ss="layer-1"></div> <div class="layer-2"></div> <div data-offset="1" class="layer-3"></div> <div data-offset="3" class="layer-4"></div> <div data-offset="10" class="layer-5"></div> </div>
每一个 .layers
的规则都相同,但是我们给他们应用到 translateY
和 translateX
属性上。
data-offset
属性的值越大,动画的效果越明显,可以改变这些值体验下。
为了代码可读性,我们在java script里给 .poster
赋值给 $poster
变量,.shine
给 $shine
变量,$layer
变量代表所有层,w
,h
代表页面的宽度和高度。
var $poster = $('.poster'), $shine = $('.shine'), $layer = $('div[class*="layer-"]’);
现在,需要考虑下当光标移动的时候获取到光标位置的问题。我们可以用 $(window)
的 mousemove
事件来实现,这个事件会返回一个java script对象,含有我们需要的位置信息和其他一些我们暂时还用不到的变量。
$(window).on('mousemove', function(e) { var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight; var offsetX = 0.5 - e.pageX / w,
下一步,就是用上面解释的公式来计算offsetY
和offsetX
的值,然后就是把视差效果应用到.posert
和每一个海报层。
非常酷啊,现在我们就有了一个有视差效果的小部件了。
基本完成
但是还没完,海报上的光泽部分还没设置
现在回到CSS部分,给.shine
div 绝对定位,添加一个渐变颜色效果,设置z-index
属性值为100,让它在所有层的上面。
.shine { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%); z-index: 100; }
已经有了一个漂亮的闪光层在海报上,但是为了达到更逼真的效果,光照应该随着光标的移动而变化。
更逼真些
我们怎么做呢?可能你还记得无聊的初三数学课,当你想着你在学一些你从来都不会用到的公式的时候,我们现在就用到了。
所以,倾斜的角度应该等于光标与海报中心形成三角形的角度的相反值。(还记得吧,海报的中心就是整个页面的中心啊,也就是页面宽度和高度的二分之一)
角度示意图
首先,找到光标与页面中心形成的三角形的直角边,光标与中心连线后作出一个直角三角形。
然后用 Math.atan2()
函数得到中心点的角度值。注意这个函数的返回值使用弧度值来表示的,所以我们得在CSS中转换成角的度数,用以下公式:
弧度值*180/pi = 角度值
var $poster = $('.poster'); var $shine = $('.shine'); var $layer = $('div[class *= "layer-"]'); $poster.data("offset",15); $(window).on('mousemove', function(e) { var w=e.currentTarget.innerWidth,h=e.currentTarget.innerHeight; var offsetX = 0.5 - e.pageX / w,