Parallax is a displacement or difference in the apparent
position of an object viewed along two different lines of sight (right out of wiki)
In web design parallax is the concept of moving layers at
different speeds when the page is scrolled.
Or better yet… Parallax scrolling is a technique that allows
us to give the illusion of depth in a 2D space, such as a website.
You may have seen these….
http://discover.store.sony.com/be-moved/
, https://moto360.motorola.com/ , http://www.puma.com/mobium/
, http://www.nikebetterworld.com/
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.
Well here is the flash source - download the .fla
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
<div style=left:0% id=mycarpic></div>
and
$(document).ready(function(){ $(‘#mycarpic’). animate({left:
“80%"}, 500);});
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
This would be
jarallax.addAnimation(‘#mycarpic’, [{progress:'50%', left:'0%'}, {progress:'100%',
left:'110%'}]);
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
<script src="jquery-1.7.1.min.js"
type="text/javascript"></script>
<script src="jarallax-0.2.4.js"
type="text/javascript"></script>
the css
body
{
margin:0;
height:1000px /* this is to create the scrolling */
}
#mycar{
background-image:url(car.png);
width:300px;
height:200px;
position:fixed; /*this is important , otherwise the animation will go
haywire*/
z-index:3;
display:none; /*don’t display it immediately , let jarallax do it*/
}
The script to animate
var jarallax = new
Jarallax();
jarallax.addAnimation('#mycar', [{
progress: '0%', left: '20px', opacity: '0', display:
'block' }, //animate
from 0-20
{progress:
'10%', left: '200px',
opacity: '1', display: 'block' }, //animate
from 20-200
{progress:
'68%', left: '700px',
opacity: '1', display: 'block' }, //animate
from 200-700
{progress:
'100%', left: '1000px',
opacity: '0'}]); //animate
from 700-1000
Note: the page has a progress from 0-100% , therefore, all
animations should be constricted within the scrolling range…
The whole page
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jarallax-0.2.4.js" type="text/javascript"></script>
<style>
Body
{
margin:0;
height:2000px /* this is to create the scrolling */
}
#mycar{
background-image:url(car.png);
width:300px;
height:200px;
position:fixed;
z-index:3;
display:none;
}
</style>
<script>
$(document).ready(function () {
var jarallax = new
Jarallax();
jarallax.addAnimation('#mycar', [{
progress: '0%', left: '20px', opacity: '0', display:
'block' }, //animate
from 0-20
{progress:
'10%', left: '200px',
opacity: '1', display: 'block' }, //animate
from 20-200
{progress:
'68%', left: '700px',
opacity: '1', display: 'block' }, //animate
from 200-700
{progress:
'100%', left: '1000px',
opacity: '0'}]); //animate
from 700-1000
});
</script>
</head>
<body>
<div id="mycar"></div>
</body>
Now that you have the basic idea of Jarallax animation,
Let’s try and get the same stuff as in the Flash animation
Let’s try and get the same stuff as in the Flash animation
Again we’ll start with the 3 pictures
For pic1, we start from left 20px to the left and move to
right with fading in and out- stting the opacity like
jarallax.addAnimation('#pic1', [{
progress: '0%', left: '20px', opacity: '0', display:
'block' }, //start
{progress:
'10%', left: '200px',
opacity: '1', display: 'block' }, //animate
from 20-200 left
{progress:
'65%', left: '700px',
opacity: '1', display: 'block' }, //animate
from 200-700 left
{progress:
'100%', left: '1000px',
opacity: '0'}]); //animate
from 700-1000 and fading out
For Pic2 start from bottom left, and set the animation to
animate to right and little to eh top and fading out in the process
jarallax.addAnimation('#pic2',
[{ progress: '20%', left: '0px', opacity: '1',
top: '350', display: 'block'
}, //start
{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.
Working on flash for long, I couldn't help noticing the similarities between Flash and Jarallax
