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

Move images when vertical scroll reaches certain point

本文关键字：一点 图像 移动 滚动 垂直      更新时间：2023-09-26

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

示例: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时发生

谢谢你的帮助。我真的很感激!

这是代码，似乎是所有相关的动画。我希望这对你有帮助。

!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")
        })
相关文章：