Monday, June 24, 2013

Study: Parallax Scroll

  • Simple Parallax

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)

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)">

  forceHeight: false


Great Demo
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

rotate or move canvas   

  • Parallax-JS (by Razorfish)

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.

  • Parallax.js (by stolksdorf)

slide in pages of your site with having a parallaxing background

  • Scrollorama (by John Polacek)

transitions, zooms, rotations, etc. using any animatable CSS property that takes a numeric value

  • Stellar.js (by Mark Dalgleish)

Scrolling sideways

  • jParallax (by stephband)