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

Question

需要实现一个类似苹果官网iPhone X主页那样的动画效果，就是滚动条滚动一张图片逐渐放大，继续滚动显示出文字，苹果官网使用的canvas，但是具体js怎么去写没有太多思路，大多demo都是滚动执行，就是滚动到某一点自己执行动画直至完成，但是不是想要的效果，需要随着滚动条滚动逐帧执行，如果滚动条反向滚动，则反向执行动画，停止滚动则动画停止，类似这样的动画效果该如何去实现，插件也好或者原生js也可，望大牛不吝赐教。

Answer 1

可以试试Vanilla.js中的惯性滚动和视差效果插件luxy.js
https://github.com/min30327/l...
DEMO：https://min30327.github.io/lu...

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