Parallax 101

By @evaferreira92

"Above the Fold"

The Theory

Example of Above the Fold

The Theory

Example of Above the Fold

¡¿ ?!

The Theory

Example of Above the Fold

The Theory

Example of Above the Fold Example of Above the Fold

Engage the user

The Terminal

Engage the user, example jsconfar.com website

The countdown

Engage the user, example jsconfar.com website

The countdown

Engage the user, example jsconfar.com website

The game

Engage the user, example jsconfar.com website

Nyan Cat

Engage the user, example jsconfar.com website

Suspicious Octopus

A suspicious whale at jsconfar.com website

The Theory

'The "Above the Fold" theory is nothing but an excuse for lazy web design.'

Me.

Parallax

Parallax -> Moving the viewport

Example of Parallax

Parallax

The trend began with a Nike' website in 2011

Moving elements in different layers along with natural scroll pace.

Nearby objects have a larger parallax than more distant objects, so parallax scrolling can be used to determine distances and to give a sensation of perspective and depth.

How to
Parallax

Parallax

  1. jQuery
  2. Libraries
  3. CSS
  4. Or... Peeler

Option 1

jQuery

jQuery

Powerpuff Girls

A Paragraph

Content.

Another Paragraph

Content.

Pour some CSS

Powerpuff creation

Pour CSS

.info not relative

.info not relative

Add jQuery to it

Powerpuff creation

Write jQuery

Powerpuff creation

Write jQuery

Ask for ScrollTop()

ScrollTop example

Write jQuery

jQuery

Negative values go up

Feels like flyin'!

Performance

Interesting, but no.

Request Animation Frame for Better Performance

Option 2

Libraries

Libraries

Skrollr

Skrollr

Skrollr

Data-Attributes

Data-Attributes

Example of Data-Attributes

Data-Attributes

Example of Data-Attributes

Faster Parallax

Avoid Javascript

Surprised cat because it has to avoid Javascript!

Option 3

CSS

'Oh Really?' Owl

Option 4

Peeler

Recommendations

Recommendations

Recommendations

Recommendations

Recommendations

Recommendations

Think of semantics, Simpsons