weepy / jquery.path

Animatation for arcs and bezier curves with jQuery
http://weepy.github.com/jquery.path/
407 stars 79 forks source link

How to not repositionning elements? #20

Open iacuzzoGiovanni opened 11 years ago

iacuzzoGiovanni commented 11 years ago

I would like to move items from their position I defined in relative and not in a redefined position. Is there a way to do that? I'll be grateful if you could help me :-)

beldar commented 11 years ago

Hi, I faced this problem too, with a little bit more personalization I came up with this SineWave function:

var SineWave = function($el) {
    this.offsety = $el.offset().top;
    this.offsetx = $el.offset().left;
    this.direction = -1; //-1 for left to right, 1 for right to left
    this.amplitude = 300;
    this.frequency = 10;
    this.css = function(p) {
      var s = Math.sin(p*20);
      var x = this.direction * p * this.amplitude + this.offsetx; 
      var y = s * this.frequency + this.offsety;
      return {top: y + "px", left: x + "px"};
    } 
  };
$("#element").animate({path : new SineWave($("#element"))},5000, "linear");

I hope this helps.