News

Use CSS & jQuery for variable parallax scrolling

Progetty Design Studio’s IT programmer Giuseppe Ciullo reveals the simple parallax scrolling trick used on Dream Yourself using CSS and jQuery

Parallax

Progetty Design Studio’s IT programmer Giuseppe Ciullo reveals the simple parallax scrolling trick used on Dream Yourself using CSS and jQuery

Parallax


Get the code to help complete this tutorial


Populate the page elements

On the ‘News’ page of dreamyourself.it you’ll find a series of independently scrolling content boxes of varying speeds. To emulate this technique we need to add at least three boxes to an HTML page. For our dummy example these boxes simply consist of <div> elements containing 300 by 300 pixel PNG images, a <small> date label, plus an <h1> headline heading. Add the following markup within your <body> section:

001 <div class="news-item first-col">     
002 <img src="img/sample1.png"/>
003 <div class="overlap-title">
004 <small class="date">01.02.2015</    small>
005 <h1 class="title">FIRST NEWS     TITLE</h1>
006 </div>    
007 </div> 
008 <div class="news-item second-col">
009 <img src="img/sample2.png"/>    010 <div class="overlap-title">    
011 <small class="date">02.02.2015</    small>
012 <h1 class="title">SECOND NEWS     TITLE</h1>
013 </div>
014 </div>    
015 <div class="news-item third-col">
016 <img src="img/sample3.png"/>
017 <div class="overlap-title">
018 <small class="date">03.02.2015</    small>    
019 <h1 class="title">THIRD NEW TITLE</    h1>
020 </div>
021 </div>

Style the boxes

Next we will add the required CSS classes and begin adding the basic styles for our three content boxes. Here you basically have to position and dimension each news-item. After you’ve added these styles, save and link the CSS file in the <head> of your HTML page with a <link> tag or simply define them within <style> braces:

001 .news-item{
002 width: 300px;    
003 height: 300px;
004 top: 700px;
005 position: absolute;
006 }
007 .first-col{ left: 0px; }
008 .second-col{ left: 300px; }    
009 .third-col{ left: 600px; }

Add scroll-speed data attribute

Next up we must add the custom HTML data attribute scroll-speed into the opening <div> tag of each of our three boxes. Using this attribute, we will be able to assign each box a different speed with a series of staggered values. Basically, those elements given a lower value will be faster once the effect is invoked. For the sake of illustration we’ll use the values 2, 6 and 1 but by all means experiment with your own!

001 <div class="news-item first-col"     data-scroll-speed="2">
002 ...
003 </div>
004 <div class="news-item second-col"     data-scroll-speed="6">
005 ...
006 </div>
007 <div class="news-item third-col"     data-scroll-speed="1">
008 ...
009 </div>

Include the jQuery library

This step is a pretty simple one – basically it’s time to attach the latest jQuery library to our page. You can do this one of a few ways, although the <script> tag below links to the latest CDN and so it’s easy to simply insert this into the <head> of your page before the code we’ll add in the next step:

001 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

Add some JavaScript code

With jQuery added, next we’ll add some JavaScript to produce the desired effect. In order to create it we will attach a simple parallax animation on each box. To achieve this we need to divide the value of the current vertical position of the window by the value of the scroll-speed attribute of the box and set the result as the vertical position of the box. To calculate this and apply it, we need to add the following code in an external JS file or within <script> tags below our jQuery include within our HTML document:

001 var myBoxes = $('.news-item');     $(window).scroll(function(){
002 var scrollTop = $(window).        scrollTop();
003 myBoxes.each(function(){
004 var $this = $(this);
005 var scrollspeed = parseInt($this.    data('scroll-speed')),
006 offset = - scrollTop / scrollspeed;
007 $this.css('transform',   'translateY(' + offset + 'px)');
008 });
009 });

Save, test and scroll!

To finish, save the HTML page and preview in your chosen browser. You should notice that when you start scrolling the page the boxes should respond and move to the different speeds. This produces a very subtle parallax effect making it appear as though the elements are floating independently!

×