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

所属分类:媒体-图片展示

 4807  28  查看评论 (1)
jQuery+CSS3图片遮罩和过渡动画效果 ie兼容10

注:本地预览请用火狐浏览器,chrome浏览本地预览有跨域问题

简要说明

这是一款通过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');
    }
}


相关插件-图片展示

jQuery图片放大镜插件blowup.js

blowup是一款实用的jQuery图片放大镜插件。
  图片展示
 9151  66

jquery原图对比查看特效

图片效果hover前后对比
  图片展示
 8266  46

轮播图

轮播图,12种图片切换效果
  图片展示
 20306  96

jQuery翻转卡片式插件

提示卡插件让你创建卡布局,与你看到一个卡片状的交互谷歌提示页面。我还添加了一些新的动画选项,以便您可以在个性化你自己的喜好。
  图片展示
 27457  48

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    ax_ax 0
    2017/3/22 16:25:00

    为什么下载下来不能链接进去呢

    回复
取消回复