CSS3 3D倾斜视差图片展示动画特效

一款很有创意的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>



下载

2023-11-23 01:31 上传

点击文件名下载附件
售价: 1 金币  [记录]  [购买]