滾動頁面時的曲線圖像路徑

我正在嘗試爲一個項目創建一個過山車，並且需要過山車來跟蹤路徑。滾動頁面時的曲線圖像路徑

你可以看到我對rollercoaster

說明我需要的紅框追隨在後臺過山車之路？紅色的插圖顯示了我要使用的圖像。這可能嗎？我試圖使用此代碼...

<script type="text/javascript"> 

     $(window).on('scroll', function(e) { 
      var scrollTop = $(window).scrollTop(); 
      //var windowHeight = $(window).height(); 
      var windowHeight = $('.road2').height(); 
      //var S = scrollTop + Math.floor(windowHeight/2); 

      var S = $(this).scrollTop();   // scrolled distance 
      var t = 0 + (S/windowHeight);     
      //var T = 0 + (S/36);      // value for Top 
      //var L = 300 + Math.abs(Math.sin(S/400)*460); // value for Left 
      // 
      //$(".rollerImage").css({top: T+'%', left: L+'px'}); //set CSS 

      var canvas_X=400; 
      var canvas_Y=400; 

      // Increment Parameterization 
      t += 0.05; 

      // Width of Car 
      var car_X=150; 
      // Hieght of Car 
      var car_Y=50; 

      // Point A 
      var a_X=0; 
      var a_Y=0; 

      // Point B 
      var b_X=canvas_X-car_X; //Place point B at the end 
      var b_Y=0; 

      // Center of Semi Circle 
      var c_X=(b_X-a_X)/2; 
      var c_Y=(a_Y-a_Y)/2; 

      // Calculate X and Y point on trajectory 
      var x = a_X + t * (b_X- a_X); 
      var y = Math.sqrt(Math.pow((b_X - a_X),2)/4 + Math.pow((x-c_X),2)); 

      $(".rollerImage").css({top: x+'px', left: y+'px'}); //set CSS 

     });    
    </script>

希望有人可以幫助這種類型的路徑動畫。也許有可能在座標數組中定義路徑？

我使用3210嘗試，但不能「綁定」的的路徑:(

// Graahf圖像

來源

2012-08-27 Graahf

我試圖把它與jQuery的Scrollpath使用你的工作HTML和CSS文件加上從演示站點的代碼

檢查這是你OK：http://jsfiddle.net/Skr4R/6/embedded/result/

您還可以檢查小提琴來源：http://jsfiddle.net/Skr4R/6/

重要這一點，是整個包裝移動和旋轉，這就是爲什麼在我的解決方案火車圖像是包裝的外面，像這樣：

<div class="rollerCoasters"> 
    <img src="" style="background:red; height:100px; width:50px; position:absolute; top:380px; left:50%; z-index:200; margin-left:-25px"> 
</div> 

<div class="wrapper"> 
    <div class="road1"><img src="base64-encoded-img" width="1434" height="539"/></div> 
</div>

希望這可以讓你開始。這可能不是最好的解決方案，如果你想讓火車移動，而不是周圍的環境。

來源

2012-08-27 14:38:35 martinczerwi

不錯:)它的工作原理和幫助我，但如果我想要火車移動/旋轉時，包裝背景曲線？加上火車會更大:) – Graahf

現在的問題是，當您調整瀏覽器窗口的大小時，道路在列車下方移動......：/ – Graahf

在樣式表中，調整'.rollerImage'到頂部：50％;'和'邊距：-90px 0 0 -70px;'而不是邊距。答案的代碼有點草率，只是爲了讓你快速入門;）如果你看[Joeys Scrollpath Democode]（http://joelb.me/scrollpath/script/demo.js），你也會注意到，他用'.rotate'旋轉火車周圍的屏幕。一些文檔是這裏[這裏]（https://github.com/JoelBesada/scrollpath#rotate-radians-options） – martinczerwi

我正在嘗試實現相同的過程，並且這幫助了我，沿着火車/物體跟蹤軌道的前進方向可以不旋轉背景（使火車看起來像跟蹤軌道一樣）

來源

2012-08-28 13:58:42 Space87

我正在試着做一個平滑的旋轉的軌道，所以它看起來像火車是騎它:) – Graahf

我有一個小玩與js小提琴，並用http://jsfiddle.net/PLJVc/1/embedded/result/ – Space87

瞭解如何使它在IE8中旋轉？ ;） – Graahf

滾動頁面時的曲線圖像路徑

回答

相關問題