Question

我发现了这个水平视差的好例子 http://www.perandersen.no/sandbox/parallax/ 我想对它做出的唯一修改就是让它从最右边开始，然后从屏幕左侧开始，但是如果不知道怎么做就无法工作

这是使用的Jquery函数

<script type="text/javascript">
    var snowboarderPos;
    var balloonPos;

    $(document).ready(function() {
        $("#beginningLink").click(function() {
            $.scrollTo(0,0, {duration: 2000});
        });
        $("#avalancheLink").click(function() {
            $.scrollTo(2000,0, {duration: 2000});
        });
        $("#elevatorLink").click(function() {
            $.scrollTo(4400,0, {duration: 2000});
        });
        $("#wolfLink").click(function() {
            $.scrollTo(7000,0, {duration: 2000});
        });
    });

    $(window).load(function() {
        snowboarderPos = $("#snowboarder").offset();
        balloonPos = $("#ballong").offset();
        window.onscroll = scroll;
        hideScreen();

    });

    function hideScreen() {
        $("#loadingWrap").fadeOut("slow");
        //$('html,body').animate({scrollLeft: $("#info2").offset().top},'slow');

        $("#snowboarder").animate({"top": "-=200px"}, "slow");
        $("#info1").delay(500).animate({"left": "-=200px", "width" : "350px", "fontSize" : "24px"}, "slow");
    }

    function scroll()
    {
        var xPos = window.pageXOffset;
        var element = $("#wrapper");
        var newXPos = Math.abs(xPos /1.1);
        element.css( "left", newXPos );

        element = $("#snowboarder");
        var position = element.position();
        var newXPos = Math.abs(xPos /1.5) + snowboarderPos.left;
        element.css( "left", newXPos );

        element = $("#elevator");
        var position = element.position();
        var newXPos = Math.abs(xPos /1.9) + 2800;
        element.css( "left", newXPos );

        var element = $("#ballong");
        var position = element.position();
        var newXPos = Math.abs(xPos /1.2) + balloonPos.left;
        element.css( "left", newXPos );

        // $("#xpos").text(window.pageXOffset);
    }
</script>

有谁知道我怎么能做到这一点？

非常感谢，

Answer 1

由于最后一个项目的id为end，因此只需通过附加散列跳转到该网址。

例：
http://www.perandersen.no/sandbox/parallax/#end

也就是说，您可以在窗口加载期间使用已经需要的.scrollTo插件在页面加载时跳转它。

示例：

$.scrollTo('#end');

我制作了这个jsFiddle，其中包含作者网站，其中包含上述.scrollTo()的单一添加，可以回答您的问题。

如何在特定位置启动jQuery Parallax？

1 个答案: