网站在Gogoro向下滚动效果

Question

我搜索了这种向下滚动效果，但无法获得有用的信息。

如何在http://www.gogoro.com/#/smarter（手机部分）中执行向下滚动效果，其中手机图像在浏览器窗口中固定，同时内容随页面滚动而变化。

这是通过javascript还是CSS完成的？

Answer 1

你想要的是视差滚动效果。搜索"Parallax Scrolling libraries"，有很多工具可以帮助你，也不是很难推出自己的工具。例如，在this site上发现的背景视差效果只是极少数纯粹的javascript - 无需库：

<script type="text/javascript">
    (function() {
        var background = document.getElementById("background");
        var parallax = function() {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            background.style.marginTop = (-28 - scrollTop / 120) + "%";
        };
        window.onscroll = parallax;
        parallax();
    })();
</script>