Jparallax.js

Basics

<div class="parallax" speed="2">

The blob changes his position according to how far you scroll. Notice how the blob aligns to the top.

View on Codepen

Speed

Different speed values lead to different results.
(The number in the blobs tells their speed)

• Higher speed makes content look more like default content.
• It rather scrolls when the user scrolls
• A bit like position:static
• Lower speed makes it look like it's behind the content.
• It's rather sticky and doesn't scroll as much when the user scrolls
• A bit like position:fixed or background-attachment:fixed

View on Codepen

Alignment

<div class="parallax p-center" speed="2">

When you add the class p-center, the blobs align to the middle of the screen.

View on Codepen

Negative Values

<div class="parallax p-center" speed="-2">

While positive values make it look like "behind" the content, negative values make it look like it's in front of it.

• The higher the absolute speed value (e.g. -3).
• It rather scrolls when the user scrolls
• A bit like position:static
• The lower the absolute speed value (e.g. -1.5).
• It scrolls faster than the user
• It looks like it's in front of the default content

View on Codepen