1

水平視差のこの素晴らしい例を見つけました 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>

誰も私がそれを達成する方法を知っていますか?

どうもありがとう、

4

1 に答える 1

1

最後の項目にはidofendがあるため、URL に末尾のハッシュを追加してそこにジャンプするだけです。

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

.scrollToつまり、ウィンドウのロード中に既に必要なプラグインを使用して、ページのロード時にそこにジャンプさせることができます。

例：

$.scrollTo('#end');


あなたの質問に答える上記の単一の追加で、著者のWebサイトを含むこのjsFiddleを作成しました。.scrollTo()

于 2012-06-12T01:21:17.780 に答える