jQuery+CSS3图片遮罩和过渡动画效果

 查看演示  website  立即下载

注：此插件需要在服务端运行，本地预览会有跨域问题！

简要说明

这是一款通过jquery和css3制作的图片遮罩和过渡动画效果。该效果通过图片制作和CSS transforms动画来制作页面过渡动画效果，非常炫酷。

使用方法

在页面中引入style.css样式文件和jquery、main.js文件。

<link href="path/to/css/style.css" rel="stylesheet">
<script type="text/javascript" src="path/to/js/jquery.min.js"></script>
<script type="text/javascript" src="path/to/js/main.js"></script>

 HTML结构

该图片遮罩和过渡动画效果的HTML结构如下：每一个<section>是一篇文章，文章的具体内容不写在HTML代码中，而是通过js代码来调用。

<main class="cd-image-mask-effect">
    <section class="project-1 cd-project-mask">
      <h1>Project Name</h1>
      <div class="featured-image"></div>
      <div class="mask">
        <img src="img/mask-01.png" alt="mask">
        <span class="mask-border mask-border-top"></span>
        <span class="mask-border mask-border-bottom"></span>
        <span class="mask-border mask-border-left"></span>
        <span class="mask-border mask-border-right"></span>
      </div>     
      <a href="#0" class="project-trigger">Explore Project</a>      
      <a href="#0" class="cd-scroll cd-img-replace">Scroll down</a>    
      <div class="cd-project-info" data-url="project-1">
        <!-- content loaded using js -->
      </div>      
      <a href="#0" class="project-close cd-img-replace">Close Project</a>
    </section> <!-- .cd-project-mask -->     
    <section class="project-2 cd-project-mask">
      <!-- content here -->
    </section>
</main>

 JavaScript

为了实现图片遮罩效果，代码中创建了一个ProjectMask对象，并使用initProject方法来对它进行初始化。

function ProjectMask( element ) {
  this.element = element;
  this.projectTrigger = this.element.find('.project-trigger');
  this.projectClose = this.element.find('.project-close'); 
  this.projectTitle = this.element.find('h1');
  this.projectMask = this.element.find('.mask');
  //...
  this.initProject();
}
  
var revealingProjects = $('.cd-project-mask');
var objProjectMasks = [];
  
if( revealingProjects.length > 0 ) {
  revealingProjects.each(function(){
    //create ProjectMask objects
    objProjectMasks.push(new ProjectMask($(this)));
  });
}                  
当用户选择了某个项目之后，revealProject方法用于放大被遮罩的图片，uploadContent方法用于加载文章的内容。
ProjectMask.prototype.initProject = function() {
  var self = this;
  
  //open the project
  this.projectTrigger.on('click', function(event){
    event.preventDefault();
    if( !self.animating ) {
      self.animating = true;
      //upload project content
      self.uploadContent();
      //show project content and scale up mask
      self.revealProject();
    }
  });
  
  //...
};
  
ProjectMask.prototype.revealProject = function() {
  var self = this;
  //get mask scale value
  self.updateMaskScale();
  //scale up mask and animate project title
  self.projectTitle.attr('style', 'opacity: 0;');
  self.projectMask.css('transform', 'translateX(-50%) translateY(-50%) scale('+self.maskScaleValue+')').one(transitionEnd, function(){
    self.element.addClass('center-title');
    self.projectTitle.attr('style', '');
    self.animating = false;
  });
  
  //hide the other sections
  self.element.addClass('project-selected content-visible').parent('.cd-image-mask-effect').addClass('project-view');
}
  
ProjectMask.prototype.uploadContent = function(){
  var self = this;
  //if content has not been loaded -> load it
  if( self.projectContent.find('.content-wrapper').length == 0 ) self.projectContent.load(self.projectContentUrl+'.html .cd-project-info > *');
   
  if( self.projectContentUrl+'.html'!=window.location ){
        //add the new page to the window.history
        window.history.pushState({path: self.projectContentUrl+'.html'},'',self.projectContentUrl+'.html');
    }
}

PREVIOUS:
NEXT:
html5 SVG绘图动画
流光溢彩的Bootstrap响应式幻灯片特效