jQuery和css3页面顶部图片滚动缩小视觉差特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果炫酷的 jQuery和css3页面顶部图片滚动缩小视觉差特效插件。在当下已经有很多网站用大的背景图片来作为网站的头部。在这个教程中我们将在页面向下滚动时创建一个非常好看图片缩小动画，制作一种图片沿Z轴缩放的假象。

该视觉差效果的灵感来自于Anchor Travel website.。

HTML结构

创建section#cd-intro元素作为wrapper，包含住图片和文本内容。

<section id="cd-intro">
  <div id="cd-intro-background"></div>
  <div id="cd-intro-tagline"><!-- insert your tagline here --></div>
</section>

将#cd-intro-background的背景图像设置为全屏宽度的图片。

CSS样式

对于桌面设备，我们为section#cd-intro设置 position:fixed，并为#cd-intro-background通过CSS3 scale Transformation设置origin 属性为X轴50%、Y轴100%。这些是我们要为图片缩小效果所做的工作。

@media only screen and (min-width: 1170px) {
  #cd-intro {
    position: fixed;
    top: 70px;
    left: 0;
  }
  #cd-intro .cd-intro-background {
    transform-origin: 50% 100%;
  }
}

#cd-intro-background上的scale transformation值将通过jQuery动态来调用。

JAVASCRIPT

我们定义triggerAnimation()方法来触发CSS3 scale Transformations事件并将它绑定到屏幕的滚动事件上。

function triggerAnimation(){
  if($(window).width()>= MQ) {
    $(window).on('scroll', function(){
      //The window.requestAnimationFrame() method tells the browser that you wish to perform an animation- the browser can optimize it so animations will be smoother
      window.requestAnimationFrame(animateIntro);
    });
  } else {
    $(window).off('scroll');
  }
}

我们使用requestAnimationFrame()来作为滚动事件的处理函数。requestAnimationFrame()可以告知浏览器我们需要执行什么动画，这样浏览器可以对动画进行效果优化。

animateIntro()函数根据窗口的scrollTop()的值来缩放#cd-intro-background元素并且改变它的透明度。