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
Recruitment

Operating in the STEM sector, ClearSky Logic recently had a recruitment drive for 5 positions and saw only 15-20% of our applications coming from women.

App Creation

As restaurants begin to reopen their (physical doors) under new Covid-rules, now is the perfect time for this industry's players to move into the Mobile App game.

User Design

If you've never heard of a11y and the world hasn't ended, why bother now? Because for 71% of your web visitors with disabilities, the world didn't end but their visit to your website just did.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
  • Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.