jQuery和css3页面顶部图片滚动缩小视觉差特效

2019-10-09 09:33:40 作者: 大梦 浏览: 7 [百度未收录] [搜狗已收录] [360已收录]

简要教程
这是一款效果炫酷的 jQuery和css3页面顶部图片滚动缩小视觉差特效插件。在当下已经有很多网站用大的背景图片来作为网站的头部。在这个教程中我们将在页面向下滚动时创建一个非常好看图片缩小动画,制作一种图片沿Z轴缩放的假象。
该视觉差效果的灵感来自于Anchor Travel website.。
HTML结构
创建section#cd-intro元素作为wrapper,包含住图片和文本内容。
将#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元素并且改变它的透明度。

版权免责声明 1、本网站名称:罗网轻量级sns社区,源码分享平台
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的