Tutorials

Table of contents
Close

Implement a Simple Parallax Effect

A parallax effect on a website is when content scrolls at different speeds, creating a sense of perspective and depth.   While it is a unique and visually appealing effect, it can be overwhelming to the user if overutilized, so it is very important to use it sparingly.  This article will focus on creating a simple background parallax effect for a single portion of content.

View a demo of a working parallax effect using the steps below.

 

Step 1 - Save the Plugin

Below is the Simple Parallax Plugin javascript code.  Copy and paste it into a simple text editor program on your computer (Notepad, for instance) and name it 'parallax-plugin.js'.

/**
 * Author: Heather Corey
 * jQuery Simple Parallax Plugin
 *
 */




(function($) {




    $.fn.parallax = function(options) {




        var windowHeight = $(window).height();




        // Establish default settings
        var settings = $.extend({
            speed        : 0.15
        }, options);




        // Iterate over each object in collection
        return this.each( function() {




        // Save a reference to the element
        var $this = $(this);




        // Set up Scroll Handler
        $(document).scroll(function(){




    var scrollTop = $(window).scrollTop();
            var offset = $this.offset().top;
            var height = $this.outerHeight();




    // Check if above or below viewport
if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
return;
}




var yBgPosition = Math.round((offset - scrollTop) * settings.speed);




                // Apply the Y Background Position to Set the Parallax Effect
    $this.css('background-position', 'center ' + yBgPosition + 'px');
                
        });
        });
    }
}(jQuery));

 

Step 2 - Upload the Plugin

Upload the 'parallax-plugin.js' file to your portal via the File Manager, and after the upload is complete copy the file URL.

If you don't know how to find the URL of a file you've uploaded in the File Manager, check out this snippet.

 

Step 3 - Reference the Plugin

Go into the 'Edit Site Page' section for the page that you want to add the parallax effect to.  Click the 'Options' tab at the top and scroll to the 'Site Footer HTML' content block.  Copy the below code into the content block to reference the parallax javascript file on the page.  Paste the url for the parallax plugin javascript file from step 2 inside the src quotes.

<script type="text/javascript" src="paste js url here"></script>

 

Step 4 - Prepare the Module

Go into your page template within the Template Builder and create a new single row module that has a full width.  Give the module a unique class - lets call it 'parallax-section-1'.

 

Step 5 - Upload An Image

Choose an image from the web or from your computer to be your parallax background image.  Upload it via the File Manager and copy the URL.

Note: For optimal performance, make sure your image is no larger than 200-250KB. You can achieve this by selecting 'Save for Web' in Photoshop, and select 'JPEG Medium' for your image.

Note:  For optimal viewing in the browser, make sure your image is at least twice the size as the value of the 'height' property you set in your css, and make sure the width is at least 1200px so that it will stretch the full width of the page on larger screens  If your parallax section is not meant to be full width then feel free to give it a much smaller width.

 

Step 6 - Define the Styles

In the stylesheet of your choice, copy and paste the css below and make sure the selector is the same as the class you gave to your module in step 4. The property values you may change are 'height' and 'background-image' - everything else must remain as it currently is.  Paste your image URL from step 5 into the background-image property.

.parallax-section-1 {
height: 450px;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('paste background image URL here');
}

 

Step 7 - Call the Function

Go back to the 'Options' tab in the 'Edit Site Page' section for your page.  Below your parallax javascript reference in the 'Site Footer HTML' content block, add a javascript call to the parallax plugin function.  Make sure that the jQuery selector matches the css class you chose for your module.  You can change the speed by altering the decimal number.  A lower number means slower, higher means faster, and 0.15 is the default.

$('.parallax-section-1').parallax({
speed : 0.15
});

 

Step 8 - Optimize for Mobile - CSS Media Queries

If your parallax container is full width and is displaying a very large image, it is important to implement some mobile optimization.  Large images can greatly affect mobile performance, resulting in extremly slow site loading and even browser crashing.  Also, particularly for parallax, those large images you uploaded might not scale down to mobile so nicely, resulting in the main focal point of the image getting entirely cut off.  

We can solve these problems by creating media queries that load small vs full sized images.  At the bottom of your stylesheet in your 'media query' section, copy and paste the following code:  

/* Desktop Parallax Photo */
@media (min-width: 651px){
    .parallax-section-1 { background-image: url('paste full sized image URL'); }
}
/* Mobile Parallax Photo */
@media (max-width: 650px) {
    .parallax-section-1 { background-image: url('paste small image URL'); height: 300px; }
}

You will need to CUT the entire background-image line of CSS from step 6 and paste it into the Desktop Parallax Photo media query.  

You also will need to upload a smaller verion of the image (about 2/3 the height of the original and a minimum width of 800px) in the File Manager and paste the URL into the Mobile Parallax Photo media query.  In the same media query, you should add a height property with a value of maybe 150px less than what you have set the default.

Test your mobile optimized parallax photos by resizing the browser down to the size specified in the media query.

 

Step 9 - Save and Test

Make sure you've saved everything.  View your live page and test out your new parallax effect!