一款很有创意的CSS33D倾斜视差图片展示动画特效,鼠标移动到页面不同位置查看视差动画效果。
js代码
<script>
varcards=document.querySelector(".cards");
varimages=document.querySelectorAll(".card__img");
varbackgrounds=document.querySelectorAll(".card__bg");
varrange=40;//constcalcValue=(a,b)=>(((a*100)/b)*(range/100)-(range/2)).toFixed(1);
varcalcValue=functioncalcValue(a,b){return(a/b*range-range/2).toFixed(1);};//thanks@alice-mxvartimeout=void0;
document.addEventListener('mousemove',function(_ref){varx=_ref.x,y=_ref.y;
if(timeout){
window.cancelAnimationFrame(timeout);
}timeout=window.requestAnimationFrame(function(){
varyValue=calcValue(y,window.innerHeight);
varxValue=calcValue(x,window.innerWidth);
console.log(xValue,yValue);
cards.style.transform="rotateX("+yValue+"deg)rotateY("+xValue+"deg)";[].forEach.call(images,function(image){
image.style.transform="translateX("+-xValue+"px)translateY("+yValue+"px)";
});[].forEach.call(backgrounds,function(background){
background.style.backgroundPosition=xValue*.45+"px"+-yValue*.45+"px";
});
});
},false);
</script>
下载
|
|