javascript如何在滾動路線上移動元素

Question

我有一條路線就像一條垂直的蛇。 （像這樣http://www.my-favorite-coloring.net/Images/Large/Animals-Reptiles-Snake-31371.png）

如何通過滾動上的X和Y位置移動路線上的元素（圓圈10x10）？

臥式是確定的：

var coin = $('#coin'); 

    $(window).scroll(function(){ 
     var coinTop = coin.css('top'), 
      cointLeft = coin.css('left'); 

     if($(window).scrollTop() > 100 && $(window).scrollTop() < 600){ 
      $("#coin").css({ "left": contLeft + 'px' }); 
     }; 
    }); 

我多麼貓沿線平滑移動呢？

Answer 1

我建議使用矢量（SVG）庫，即raphael.js爲動畫部分。

在raphael.js中，您可以定義路徑，然後沿着該路徑的長度爲任何對象設置動畫效果。

請看例子，以便更好地理解相應的計算器線程：

• http://raphaeljs.com/gear.html

• How to animate a Raphael object along a path?

相比線程，你需要在附加動畫onScroll事件，而不是將其附加到間隔。

編輯：

添加從link相關的代碼片段，作爲評論者建議：

HTML：

<div id="holder"></div> 

JS：

var e; 
var myPath; 
var animation; //make the variables global, so you can access them in the animation function 
window.onload = function() { 
    var r = Raphael("holder", 620, 420), 
     discattr = { 
      fill: "#666", 
      stroke: "none" 
     }; 
    function curve(x, y, zx, zy, colour) { 
     var ax = Math.floor(Math.random() * 200) + x; 
     var ay = Math.floor(Math.random() * 200) + (y - 100); 
     var bx = Math.floor(Math.random() * 200) + (zx - 200); 
     var by = Math.floor(Math.random() * 200) + (zy - 100); 
     e = r.image("http://openclipart.org/image/800px/svg_to_png/10310/Odysseus_boy.png", x, y, 10, 10); 
     var path = [["M", x, y], ["C", ax, ay, bx, by, zx, zy]]; 
      myPath = r.path(path).attr({ 
       stroke: colour, 
       "stroke-width": 2, 
       "stroke-linecap": "round", 
       "stroke-opacity": 0.2 
      }); 
     controls = r.set(
      r.circle(x, y, 5).attr(discattr), r.circle(zx, zy, 5).attr(discattr)); 
    } 
    curve(100,100,200,300,"red"); 
    animation = window.setInterval("animate()", 10); //execute the animation function all 10ms (change the value for another speed) 
}; 
var counter = 0; // a counter that counts animation steps 
function animate(){ 
    if(myPath.getTotalLength() <= counter){ //break as soon as the total length is reached 
     clearInterval(animation); 
     return; 
    } 
    var pos = myPath.getPointAtLength(counter); //get the position (see Raphael docs) 
    e.attr({x: pos.x, y: pos.y}); //set the circle position 
    counter++; // count the step counter one up 
}; 

更新：

我最近用pathAnimator來完成同樣的任務。小心演出，但複雜的動畫可能會相當密集。