moving object between two preset location on scrolling

[aavelyn]

Hi w3 Community

 

i want to learn how to replicate this effect on the main screen of this website https://overv.io/

• The traget(booklets) starts off somewhere fixed and translate/rotates towards 0
• once it's reached it's original location, scrolling further down won't change any location
• scrolling back up with move the items back towards the location it stated.

Here's something which i think it should look like..

window.onscroll = function() {var speed = 1; //this should be adapted to the height of divvar startdeg = 130; //var startx = 300;var starty =-300;var scroll = $(window).scrollTop(); //using scrolling as variablevar deg = (startdeg - scroll) / speed;var translatex = startx - scroll/ speed;var translatey = starty - scroll/ speed;//Here should be some conditioner or maybe a do-while loop to stop transforming once it reached it's original location?$(".logo").css({"transform": "translate("translatex+"px,"translatey+"px) rotate("+deg+"deg)",}); };

 

https://jsfiddle.net/aavelyn/ktccxr6j/1/

PS: I'm fairly basic with javascript,jquery though i can fully understand the code presented. Thanks a lot!!

[justsomeguy]

It looks like that website uses this, although I've seen other libraries that do similar things if you don't want to build it yourself.http://scrollmagic.io