Geek Answers Handbook

Moving an item along a curved path as custom scrolls

I am trying to make a page where the rocket follows a predefined path that will mask the page (the page will load below) as the user scrolls.

I can animate an element along the path using something like jQuery.path and using SVG animateMotion, but I cannot figure out a solution where the element will move along this path as the user scrolls.

jQuery Scroll Path is not quite what I am looking for when it moves elements to the center of the page.

I saw on the TEDxGUC website that they move an apple along a curved path when you scroll down. I see that they are using Raphael.js and the "animation along the way" extension, but I still can’t understand how they actually achieved this - I am not yet a complete JS ninja.

Any pointers in the right direction would really be appreciated!

EDIT

For those still interested in this, I came across Skrollr Path , which pretty much does exactly what I was looking for: an example

+6
source share
2 answers

I am the developer of the website www.tedxguc.com.

I think you're already on the right track (pun intended) regarding how I got the animation to work with scrolling. I just conceptualized the animation as if the scroll bar was the search bar in the video player.

So, I set the page height to the length of my animation, so that every 1 pixel my element moves 1 ms in the animation, as if I were moving in the timeline.

At the end of the homepage.js file, you will see the animation setup code.

In makeAnim () you will find a lot of code that looks like this:

setAnim(obj.apple,{0:{along:0}, 1000:{along:1}}, start+3200, 1000);

This basically means: configure the apple so that it moves from it 0 (beginning of the path) to 1 (end of the path), and it will do this within 1000 pixels of scrolling starting from the "beginning" of the animation + an offset of 3200 pixels.

I cheated a little and slightly corrected the code to make it easier to understand.

Here's the jsfiddle of the previous development concept, and I hope my comment helped.

+10
source

You need to create a formula that takes the value y and calculates x, but here is what I came up with ...

http://codepen.io/anon/pen/zCuEb

HTML

 <div id="oh" style="background-color:red;height:100px;width:100px;position:fixed"></div> <div style="height:25000px;width:20px;background-color:#000033">&nbsp;</div>

Js

 var $w = $(window); var $d = $('#oh'); $w.scroll(function(){ $d.css('left',formula400()) }); function formula400(){ return Math.sin($w.scrollTop()/100)*100 }
0
source

More articles:


All Articles