Parallax is all about layers, Now, I have used flash from
its macromedia days, and I understand the concept of timelines for animation
and tweening
Basically, all you have is layers… everything (all the stuff
like pictures text etc.) in them moves simultaneously, it’s up to you to time
the animation of each element
see this video
If you had 3 pictures on a page, and you had to move them at
different times, first we would define a base time… start to finish happens in
… let’s say 400 seconds
Pic1 should move in at second 1 start from the top left and
go to the far right till the fifth second then fade away till the 10th
second
Pic2 should start from the bottom left and move to the far
right till the 10th second
Pic3 should start from middle right and move to the left of
centre till 8 seconds and fade away to the end
I flash we create 3 layers, each or them having the relevant
pics in the start positions, placing them in the first keyframe of each layer
(keyframes are the anchor frames where animation changes are applied)
For pic1, we start from left , on the 1 frame add a keyframe
and move pic1, then add a keyframe at 10 & move to right, again move to
right and on frame 20, add a keyframe do the same till frame 30 then on
keyframe 40, move to right then create tween between the layers. Now and set
the alpha property of the pic1 (the picture might have to be created into a
movie clip or graphic before the alpha is added) to 0 at frames 1 and 40.
For Pic2 do the same frame creation but move the picture
from bottom left to top right.
For Pic3 start from the middle, add keyframe on the 6th
frame, place the pic3 somewhere to the top right and move it to the left and a
little bottom, add keyframe on frame 10th, then move the pic3 to the
top left, add a keyframe on the 40th frame, create a motion tween between
the layers, and change the alpha of the pic to 0.
When using jarallax,
the jQuery plugin to perform parallax animations, you view the page as the
animation floor (which is the animation floor), the scroll progress is where
the css animations are added to each element
Jarallax changes the css of elements at progress changes….
Well, if we had a picture a nice png image of a car, To move
it on the page from left to right, we could simply add a jQueryanimation like
Jarallax (or any parallax plugin) uses the scroll to do
this. It allow to start the animation and let’s say when we are scrolling to
the middle and ends at the end of the page
It is theprogress
that makes it happen. As the page scrolls, the progress of the page moves on
and so do the elements on the page that get the css properties defined with the
jarallax object.
Let’s see how we use this thing from the start
Like using any jQuery plugin, you need to include the .js
files
{progress:
'40%', left: '200px',
top: '250', opacity: '1',
display: 'block' }, //animate
from 0-200 left and moving up
{progress:
'65%', left: '700px',
top: '150', opacity: '1',
display: 'block' }, //animate
from 200-700 left and moving up
{progress:
'100%', left: '1000px',
top: '10', opacity: '0'}]);
//animate from 700-1000 left and moving up and
fading out
For Pic3 start from the top right,then move a little lower
and the move to the top and to the left
jarallax.addAnimation('#pic3', [{
progress: '20%', left: '1000px', opacity: '1',
top: '20', display: 'block'
}, //start at 1000px left
{progress:
'40%', left: '700px',
top: '250', opacity: '1',
display: 'block' }, //animate
from 1000-700 left moving down
{progress:
'65%', left: '200px',
top: '150', opacity: '1',
display: 'block' }, //animate
from 700-200 left moving down
{progress:
'100%', left: '10px',
top: '10', opacity: '0'}]);
//animate from 200-10 left moving up
Note: for jarallax, the animation happens on scrolling the
page, if there is some other code that enables scrolling automatically, and
then the animation will go with the scrolling.
