Search code examples
jqueryraphaelgraphael

Smooth scrolling effect of Raphael Shapes

I am having diagram similar to g.rapahel http://raphaeljs.com/graffle.html , i am storing shapes in the array like below code

var shapes = new Array();
var kx=50,ky=150;
var RecWidth=120;
var RecHeight=85;
var RecRadius=10;

r = Raphael(10,10, '60%', '100%');

for (var i=0; i<= 50; i++) {

 shapes[i]=r.rect(kx, ky, RecWidth, RecHeight,RecRadius);

 shapes[i].id="keylist"+i ;

 kx=kx+50;

 ky=ky+100;

}

Now suppose, i want to move shape[1] along with the window scroll with the connection line shown in graffle (above link).intention is that Shapes[1] (for simplicity, i am choosing this) should always there in the frame when scrolled. how to do this?.

Solution

  • Try this:

       var originalTop = shape[1].getBBox().y;
   $(window).scroll(function() {
        var dy = $(window).scrollTop();
        shape[1].animate({y: originalTop+y}, 300);
   });