垂直滚动到某个点时移动图像

Question

在网站上工作并希望在垂直滚动到达图像时放大一张图像并移动另外两张图像，以便他们看到动画。

例如：https://www.xero.com/nz/（滚动直到您看到屏幕截图动画）。

我相信这将需要 JS，但我不知道。这就是我目前所拥有的......

style="left:240px; top:1460px; width:auto; height:auto; z-index:3" src="screen_01_500_325.png"

此图片需要从 500 像素宽放大到 600 像素。高度自动。

style="left:40px; top:1468px; width:auto; height:auto; z-index:2" src="screen_02_275_280.png"

此图像需要从 left:40px 移动到 left:0px。它保持相同的大小。

style="left:666px; top:1468px; width:auto; height:auto; z-index:2" src="screen_03_275_280.png"

这张图片需要从left:666px向右移动到left:706px。它保持相同的大小。

基本上我希望当用户向下滚动到页面下方 1400 像素时出现动画。

感谢您的帮助。我真的很感激！

Answer 1

这是似乎都与动画相关的代码。希望对你有帮助。

!function() {
for (var e = 0, t = ["ms", "moz", "webkit", "o"], n = 0; n < t.length&&!window.requestAnimationFrame; ++n)
    window.requestAnimationFrame = window[t[n] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[t[n] + "CancelAnimationFrame"] || window[t[n] + "CancelRequestAnimationFrame"];
window.requestAnimationFrame || (window.requestAnimationFrame = function(t) {
    var n = (new Date).getTime(), i = Math.max(0, 16 - (n - e)), o = window.setTimeout(function() {
        t(n + i)
    }, i);
    return e = n + i, o
}), window.cancelAnimationFrame || (window.cancelAnimationFrame = function(e) {
    clearTimeout(e)
})
}(), define("vendor/polyfills/requestanimationframe", function() {}), define("throttle-to-frame", ["vendor/polyfills/requestanimationframe"], function() {
"use strict";
function e(e, t) {
    function n() {
        var r = arguments;
        i = window.requestAnimationFrame(function() {
            i = null, e.apply(t, r), o && (n.apply(null, a), o=!1, a = null)
        })
    }
    var i, o=!1, a = null;
    return function() {
        return o ? void 0 : i ? (o=!0, void(a = arguments)) : void n.apply(null, arguments)
    }
}
return e
});

和

function() {
    if (Modernizr.csstransitions && Modernizr.csstransforms) {
        var t = e(".overview .animation");
        t.find(".animation__image--laptop").xscrollview().one("visible.xscrollview", function()  {
            t.addClass("animation--trigger")
        })