ArTech: June 2013

Simple Parallax

http://blog.fraser-hart.co.uk/jquery-parallax-scrolling/

One solid background image and 2 transparent PNG’s

For every X pixels you scroll the window, with jQuery, you move the “nearest” layer 0.8 x X pixels, the middle layer at 0.5 x X pixels and the “furthest” layer 0.2 x X pixels.

Pro: Basic parallax scroll, dead simple and easy to understand the parallax principle.
Con: Not fancy animation

Skrollr (by Alexander Prinzhorn)

https://github.com/Prinzhorn/skrollr

U se the HTML5 data- attributes to define multiple sets of styles (we call each of them keyframe) and skrollr interpolates between them
<div class="elements pineapple"

data-start="left: 10%; top: 325px; opacity: 1;transform:rotate(-30deg)"

data-20-start="left: 20%; top: 400px; opacity: 1; transform:roate(20deg)"

data-50-start="left: 30%; top: 325px; opacity: 0.5; transform:rotate(40deg)">

skrollr.init({

forceHeight: false

});

Great Demo http://sammarkiewi.cz/

The body is fixed
clothes coming from different direction.

Pro: fairly easy to use and understand;
Con: only scrolling up and down, doesn't scroll sideways

Scroll Path

https://github.com/JoelBesada/scrollpath#readme

rotate or move canvas

Parallax-JS (by Razorfish)

https://github.com/razorfish/Parallax-JS

Any <section> tag, along with any element with the animate class is parsed for parallax effects. <section> tags are assumed to line up one-after-another, all other tags can have any effect desired.