스크롤 할 때 곡선이있는 이미지 경로

Question

프로젝트를 위해 롤러 코스터를 만들고 롤러 코스터가 경로를 따라 가야합니다.

당신은 내가 백그라운드에서 롤러 코스터 도로를 따라 빨간색 상자가 필요

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> 

누군가가 이러한 유형의 경로 애니메이션을 도울 수 있기를 바랍니다. 어쩌면 좌표 배열에서 경로를 정의 할 수 있습니까?

내가 joel scrollpath를 사용하여 시도했다

하지만, 경로 :(

// Graahf에 없습니다 "바인딩의"이미지는

Answer 1

나는 그것이 jQuery를 Scrollpath 사용 작업 얻을 것을 시도했다 할 수 있습니다 HTML과 CSS 파일 플러스 데모 사이트에서 코드이 당신을 위해 OK 경우

확인하십시오. http://jsfiddle.net/Skr4R/6/

: http://jsfiddle.net/Skr4R/6/embedded/result/

당신은 또한 바이올린의 소스를 확인하실 수 있습니다

<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> 

희망이 당신이 시작 가져옵니다이 중요

는, 내 솔루션에서 기차 이미지는 다음과 같이 래퍼의 외부 왜 전체 래퍼 이동 및 회전, 즉이다. 열차가 이동하기를 원한다면 가장 좋은 해결책이 아닐 수도 있습니다.

Answer 2

나는 동일한 과정을 성취하려고 노력하고 있는데, 이것이 나를 도와 줬다. 기차를 따라 열차/물체를 돌리는 길은 배경을 회전시킬 수 없다. (트랙을 따라가는 것처럼 보이는 트랙)