前端实现炫酷动效_求一个前端滚动执行动画效果的实现思路

最新推荐文章于 2024-07-06 00:08:38 发布

weixin_39748838

最新推荐文章于 2024-07-06 00:08:38 发布

阅读量615

点赞数

文章标签：前端实现炫酷动效

本文链接：https://blog.csdn.net/weixin_39748838/article/details/111498774

版权

本文探讨了使用luxy.js实现视觉差效果，详细解析了targetsUpdate函数，说明如何通过修改元素的3d位置来创建动画效果。同时提到了wow.js作为另一个优秀的前端动画插件，结合animate.css可以实现丰富的动效。

摘要由CSDN通过智能技术生成

luxy.js / targetsUpdate

:) 其实我对这个也不是很熟。

luxy.js是视觉差效果插件，似乎不支持元素宽高的改变，demo的字体放大效果也是改变元素的3d位置带来的视差效果(并没有真正放大hiahia)。但是对元素的update事件是在targetsUpdate这个函数里执行的，

targetsUpdate : function(target){

target.top += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedY) - target.top) * this.settings.targetPercentage;

target.left += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedX) - target.left) * this.settings.targetPercentage;

var targetOffsetTop = ( parseInt(target.percentage) - target.top - parseInt(target.offset) );

var offsetY = Math.round(targetOffsetTop * -100) / 100;

var offsetX = 0;

if(target.horizontal){

var targetOffsetLeft = ( parseInt(target.percentage) - target.left - parseInt(target.offset) );

offsetX = Math.round(targetOffsetLeft * -100) / 100;

}

target.elm.style.transform = 'translate3d(' + offsetX + 'px ,' + offsetY + 'px ,' + 0 +')';

想要实现上述效果的话，在这里加生你想要的css3效果应该能行吧？当然这里做了改动就会影响全局的效果，如果只是个别元素需要缩放，可以仿照这个函数单独添加一个缩放函数、或在当前函数下传入参数并判断(缩放可用css3/cubic-bezier等属性实现)

下为改变元素3d位置的源码位置。

target.elm.style.transform = 'translate3d(' + offsetX + 'px ,' + offsetY + 'px ';

当然，还有基于Animate.css的wow.js也是很不错的插件

wow.js

animate.css

关注