diff --git a/blob-animation.js b/blob-animation.js index f871faa..6aecaca 100644 --- a/blob-animation.js +++ b/blob-animation.js @@ -1,21 +1,31 @@ +var stage = 0 $(document).ready(function () { - var height1 = $("#eins").height (); + var height1 = $("#eins").height (); $(window).scroll(function () { - if (pos+600 >= height1){ - $("#blobs").css ({ - 'top': '1000px', - 'right': '1000px', - /*'animation': 'move-down-1 5s'*/ - }) - $("blobs").animate ({'top': '1000px', 'right': '1000px'}, 5000) - } else { - $("#blobs").css ({ - 'top': '0px', - 'right': '0px', - }) - $("blobs").animate ({'top': '0px', 'right': '0px'}, 5000) - } - } - ) + var pos = $(this).scrollTop (); + console.log (pos); + if (pos+600 >= height1 && stage == 0){ moveBlobs (1000, 1000, 1)} + else if (stage == 1 && pos < 400){ moveBlobs (0,0,0) } + }) +} +) + +function moveBlobs (t, r, to) { + var dur = 0.7 + if (stage < to) { + $("#blobs").css ({ + 'animation': 'move-down-'+ to + ' ease-in-out '+dur+ 's' + }) } -) \ No newline at end of file + else { + $("#blobs").css ({ + 'animation': 'move-down-'+(to+1)+' ease-in-out '+dur+'s reverse' + }) + } + setTimeout (function () {$("#blobs").css ({ + 'top': t + 'px', + 'right': r + 'px', + 'animation': '0',}); + stage = to; + }, (dur*1000)-1) +} \ No newline at end of file