This page uses javascript to help render elements, if you have problems please enable javascript.
 
Skip to main content
 
 
 
 
 
 
You are now inside the main content area
 
 
background images and color
left col

Parallax: advanced

Parallax is different movement speeds between foreground elements and background elements.

The advanced version has two different methods of parallax, a scrolling effect, and a zoom effect.  We also allow a combination between the two.  We want to stress that these effects are purely for fun and if you use them on your pages remember that if it distracts from the content then try something else.  

right col
background images and color
left col
right col
background images and color
left col
right col
background images and color
left col
right col
background images and color
left col
right col
background images and color
left col

Here comes the styles!

right col
background images and color
left col

Parallax Scroll

To use this effect you can do it either at the Box level or if you want it on a Section, you'll need to add the class 'breakout-row' for it to work best.  If you're unfamiliar with breakout rows check out the styles page for them.

The style you need to use is 'parallax-scroll' that will cause the image to move slightly up or down depending on how the user scrolls / tabs through the page.  It is best to have at least a half style added to your page.  If the content area is too small the effect will be less noticable.

right col
background images and color
left col

Subtle Movement

As you scroll the page you should see the background image move slightly.  This isn't meant to be a constant movement.  If you stop scrolling the effect will stop so anyone who is reading content will not have movement behind their text unless they are moving the page.

right col
background images and color
left col
right col
background images and color
left col
right col
background images and color
left col

Just a transition bar here - a pallet cleanser

right col
background images and color
left col
right col
background images and color
left col

Parallax Zoom

This style, 'parallax-zoom',  will zoom the background in and out slightly as you scroll up and down.  This stops as you stop moving the page to help make reading content easier.  This is best when you have a large enough space to see your content so add some height to the box or section where you use it.

right col
background images and color
left col
right col
background images and color
left col
right col
background images and color
left col
right col
background images and color
left col
right col
background images and color
left col

Another break point before the combo style

right col
 
left col

Parallax Scroll and Zoom

Why not have both when you want it.  Use the style 'parallax-scroll-zoom' and it will add both things to the Box or Section and add some extra movement to you page.

Remember that any of the parallax effects are best used in small amounts.  While adding it makes the pages seem dynamic it can get overwhelming very fast, and if its on every page, then it tends to loose its impact.

right col
 
left col
right col
 
left col
right col
 
left col
right col
 
left col
right col