2012-06-12 43 views
1

我發現水平視差 http://www.perandersen.no/sandbox/parallax/ 的唯一修改的這個很好的例子,我想提出它是使之從最右邊而不是左邊開始屏幕,但如果知道怎樣做我不能那樣工作如何在特定位置啓動jQuery 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> 

有沒有人知道我可以如何實現這一目標?

非常感謝,

+0

謝謝,我會看看 – jmysona

回答

1

由於最後一個項目有endid,只是通過與結束URL附加散列跳轉到那裏。

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

這就是說,你可以把它跳到那裏使用已經頁面加載所需的窗口onload事件過程中.scrollTo插件。

例子:

$.scrollTo('#end'); 


我做了這個jsFiddle包含作者的網站上面.scrollTo()是回答你的問題的單獨添加

+0

非常感謝,這就是我一直在尋找的,再次感謝 – jmysona