HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

超炫喷洒墨水动画过渡效果的打开模态窗口特效

2016-3-23 11:27| 发布者: admin| 查看: 2676| 评论: 0|来自: jQuery之家

摘要: 这是一款使用CSS3和jQuery来制作的炫酷喷洒墨水式打开模态窗口特效。该特效在点击按钮时通过一张PNG墨水喷洒的雪碧图和steps()函数来制作墨水散开的效果,整个效果就像在屏幕上撒上了墨水,使屏幕改变了一个颜色。 ...

  简要教程

  这是一款使用CSS3和jQuery来制作的炫酷喷洒墨水式打开模态窗口特效。该特效在点击按钮时通过一张PNG墨水喷洒的雪碧图和steps()函数来制作墨水散开的效果,整个效果就像在屏幕上撒上了墨水,使屏幕改变了一个颜色。

 

  通过一张制作好的雪碧图,以及CSS的steps()函数,我们可以制作出各种平滑过渡的动画效果。一些效果的图片可以直接从某些视频video中提取,使用的工具是After Effects。你可以将需要的视频的帧转换为连续的PNG图片,然后将这些图片拼接为雪碧图。

 

查看演示     下载插件

 

  使用方法

  HTML结构

  该效果的HTML结构分为3个主要部分:main.cd-main-content是页面的主体部分,div.cd-modal是模态窗口,div.cd-transition-layer是一个动画过渡层。

<main class="cd-main-content">
  <div class="center">
    <h1>Ink Transition Effect</h1>
    <a href="#0" class="cd-btn cd-modal-trigger">Start Effect</a>
  </div>
</main> <!-- .cd-main-content -->
  
<div class="cd-modal">
  <div class="modal-content">
    <h1>My Modal Content</h1>
     
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Ad modi repellendus, optio eveniet eligendi molestiae? 
      Fugiat, temporibus! 
    </p>
  </div> <!-- .modal-content -->
  
  <a href="#0" class="modal-close">Close</a>
</div> <!-- .cd-modal -->
  
<div class="cd-transition-layer"> 
  <div class="bg-layer"></div>
</div> <!-- .cd-transition-layer -->   


  CSS样式

  模态窗口.cd-modal开始时通过visibility: hidden来隐藏,高度和宽度都设置为100%,并且使用固定定位方式。

  当用户点击了触发按钮a.cd-modal-trigger,模态窗口通过.visible属性设置为可见。

.cd-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.cd-modal.visible {
  opacity: 1;
  visibility: visible;
}            


  div.cd-transition-layer元素用于创建喷洒墨水效果的动画过渡层。它初始时被设置为:visibility: hidden,高度和宽度都设置为100%,并且使用固定定位方式。

.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}          


  它的子元素div.bg-layer使用雪碧图作为背景图片,并设置background-size: 100%,100%高度和2500%的宽度(因为在这个DEMO中,ink.png有25帧)。开始时,ink.png的第一帧被居中放置在div.cd-transition-layer中。

.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-2%);
  height: 100%;
  /* our sprite is composed of 25 frames */
  width: 2500%;
  background: url(../img/ink.png) no-repeat 0 0;
  background-size: 100% 100%;
}            


  上面的居中方式需要注意的是,通常我们使用绝对定位居中一个元素都是使用如下的代码:

position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);  


  在这个DEMO中,我们需要居中ink.png雪碧图的第一帧,由于div.bg-layer的宽度是它的父元素宽度的25倍,所以要使用translateX(-(50/25)%)来进行居中。

 

  为了创建喷洒墨水的动画,我们需要修改div.bg-layer的值。可以定义如下的@keyframes帧动画。

@keyframes cd-sequence {
  0% {
    transform: translateY(-50%) translateX(-2%);
  }
  100% {
    transform: translateY(-50%) translateX(-98%);
  }
}       


  通过上面的帧动画,在动画结束时,ink.png雪碧图的最后一帧将在div.cd-transition-layer中居中。

 

  对于上面100%时的translateX的值可以这样理解:由于DEMO中有25个帧,为了显示最后一个帧你需要移动.bg-layer层-100% * (25 – 1) = -96%。接着需要使最后一帧居中显示,就需要额外的调整-2%,所以最后translateX()的值为-98%。

 

  当用户点击了触发按钮a.cd-modal-trigger时,.cd-transition-layer会被添加.visible class类使其可见,同时通过.opening class类来触发喷洒墨水动画。

.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible;
}
.cd-transition-layer.opening .bg-layer {
  animation: cd-sprite 0.8s steps(24);
  animation-fill-mode: forwards;
}          


  JavaScript

 

  DEMO中在用户点击触发按钮和关闭模态窗口按钮时通过jQuery来添加和移除相应的class类。

 

  另外,还使用jQuery来调整png图片的比例使它们不至于变形。在样式文件中,.bg-layer的每一帧的宽度和高度都被设置为和视口一样大小。但是用户显示器的视口可能会是不同的比例,这会导致某些帧不能完全显示。

 

  setLayerDimensions()函数正是用于修正这些问题的。

var frameProportion = 1.78, //png frame aspect ratio
  frames = 25, //number of png frames
  resize = false;
  
//set transitionBackground dimentions
setLayerDimensions();
$(window).on('resize', function(){
  if( !resize ) {
    resize = true;
    (!window.requestAnimationFrame) 
                        ? setTimeout(setLayerDimensions, 300) 
                        : window.requestAnimationFrame(setLayerDimensions);
  }
});
  
function setLayerDimensions() {
  var windowWidth = $(window).width(),
    windowHeight = $(window).height(),
    layerHeight, layerWidth;
  
  if( windowWidth/windowHeight > frameProportion ) {
    layerWidth = windowWidth;
    layerHeight = layerWidth/frameProportion;
  } else {
    layerHeight = windowHeight;
    layerWidth = layerHeight*frameProportion;
  }
  
  transitionBackground.css({
    'width': layerWidth*frames+'px',
    'height': layerHeight+'px',
  });
  
  resize = false;
}                 

  来源:jQuery之家

更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-3-30 19:12

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部