当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<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代码来调用。

```html
<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">
        
      </div>
      
      <a href="#0" class="project-close cd-img-replace">Close Project</a>
    </section> 
      
    <section class="project-2 cd-project-mask">
      
    </section>
</main>   
```   
#####  JavaScript
为了实现图片遮罩效果，代码中创建了一个ProjectMask对象，并使用initProject方法来对它进行初始化。

```html
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方法用于加载文章的内容。

```html
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');
    }
}        
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果