求一個前端滾動執(zhí)行動畫效果的實(shí)現(xiàn)思路

可以試試Vanilla.js中的慣性滾動和視差效果插件luxy.js
https://github.com/min30327/l...
DEMO：https://min30327.github.io/lu...

luxy.js / targetsUpdate
:) 其實(shí)我對這個也不是很熟。
luxy.js是視覺差效果插件，似乎不支持元素寬高的改變，demo的字體放大效果也是改變元素的3d位置帶來的視差效果（并沒有真正放大hiahia）。但是對元素的update事件是在targetsUpdate這個函數(shù)里執(zhí)行的，

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 +')';
            },

想要實(shí)現(xiàn)上述效果的話，在這里加生你想要的css3效果應(yīng)該能行吧？當(dāng)然這里做了改動就會影響全局的效果，如果只是個別元素需要縮放，可以仿照這個函數(shù)單獨(dú)添加一個縮放函數(shù)、或在當(dāng)前函數(shù)下傳入?yún)?shù)并判斷(縮放可用css3/cubic-bezier等屬性實(shí)現(xiàn))
下為改變元素3d位置的源碼位置。

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

當(dāng)然，還有基于Animate.css的wow.js也是很不錯的插件
wow.js
animate.css