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"

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

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

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

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

此图像需要从左侧向右移动：666px到左：706px。它保持相同的大小。

基本上我喜欢当人在页面上滚动到1400px时动画。

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

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")
        })

垂直滚动到达某一点时移动图像

1 个答案: