contact us

send us your message

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

The latest and greatest

Featured articles from our in-house Superheroes

Build a Parallax background with CSS & jQuery in 5 minutes

By

|

December 18, 2019

Overview

Parallax backgrounds involve the usage of image layering to create an illusion of depth in a scene using 2D graphics. This can enhance the immersion of users when interacting with digital environments, and is an increasingly popular choice for developers building websites using interesting and original designs.

This article will walk you through the fundamental process of how to make a simple parallax scrolling background, using the same techniques used on many commercial sites.

HTML

<div class="parallax" id="home">

<div class="layer layer-bg" data-parallax-speed="1"></div>

<div class="layer layer-1" data-parallax-speed="0.5"></div>

<div class="layer layer-2" data-parallax-speed="0.5"></div>

<div class="layer layer-3" data-parallax-speed="0.4"></div>

</div>

Assigning our div with the class ‘parallax’ will allow styling of elements such as a hero title that can be displayed over your parallax scrolling background.

Each nested div element represents an image making up the parallax background. Assigning the layer class will allow styling of the layers with a generic style. Following this, assign a unique class to each layer, which will be where each image is assigned individually.

Finally,the data-parallax-speed will allow you to set a scrolling speed for each layer of the parallax background. Ideally, keep the latter layers (those higher up in the parallax).

Styling

.layer {

   background-position: center bottom;

   background-repeat: no-repeat;

   background-size: 100% 600px;

   width: 100%;

   min-height: 600px;

   height: auto;

   position: fixed;

 }

First,assign the generic layer style using the above code, which will set the dimensions of your images and fix their position to the top of the page.

If you want to add text over your background, set the z-index to ‘-1’to enable your text sits above your image layers.

.layer-bg {

   background-image: url("bg-image.png");

 }

Next,assign the images for each of your layers by referencing the layer class and passing the url of your desired image.

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Make sure you have included jQuery in your included scripts.

$(window).scroll(function() {

   var scroll = $(window).scrollTop();

   $('.layer').each(function () {

     var layer = $(this);

     var dataSpeed = layer.data('parallax-speed');

     var offsetY = -(scroll * dataSpeed);

     var translate = 'translate3d(0, ' + offsetY + 'px, 0)';

     layer.css('-webkit-transform', translate);

     layer.css('-moz-transform', translate);

     layer.css('-ms-transform', translate);

     layer.css('-o-transform', translate);

     layer.css('transform', translate);

   });

 });

Use the code above to assign the parallax scrolling effect to each of your layers. Make sure to reference your layer class name when performing this function.

Some examples of parallax backgrounds in use today:

If you have any questions or want to reach out to us, please get in touch via our Twitter and LinkedIn social spaces.



...

featured posts
Business Advice

Launch a new part of your business with a Bounce Back Loan

We’ve put together three ways you can use all or some of your Bounce Back Loan to promote growth and new thinking through technology in your business.

Recruitment

Our team is remarkable, its growing but it's not for everyone.

Our team is remarkable, its growing but it's not for everyone.