Across the internet, a trend called parallax scrolling is gaining popularity. This technique creates an illusion of depth by having the foreground and background content move at different speeds during scrolling.
This captivating technique can be layered multiple times. In this piece, we’ll peel back the curtain to show you how to construct a straightforward parallax effect involving two layers.
Basic Setup with HTML
To kick things off, we need a bit of HTML structure. Let’s set up text within a section that will house our content and also, create a <div> to serve as the backdrop: <div class=”bg”> </div>
<section>
<h1>Main Page</h1>
<p>We operate as a compact, adaptable design firm that tackles both print and web. Collaborating closely with our clients, we meet a spectrum of design demands. From establishing a brand complete with marketing materials and a stunning website to refreshing your current design, we believe you'll be thrilled with what we bring to the table.</p><p>Here are some services we provide:</p>
<ul>
<li>Identity Creation</li>
<li>Logo Design</li>
<li>Website Creation</li>
<li>Web-based App Development</li>
<li>Programming – HTML5, CSS3, JavaScript</li>
<li>Content Systems Management</li>
<li>Adaptive Web Design</li>
<li>Graphic Illustration</li>
<li>Professional Business Cards</li>
<li>Office Stationery</li>
<li>Promotional Flyers</li>
<li>Direct Mail Pieces</li>
<li>Custom Appointment Cards</li>
</ul>
<h1>Information Page</h1>
<p>Before you entrust us with your vision, you may want to learn a bit about us, so let's introduce our dynamic team:</p>
<img alt="" src="https://lorempixum.com/500/600" /> <p>Ross brings over a decade of experience to his role as Creative Director, handling digital and web design tasks, as well as excelling with traditional drawing. With a history as a designer and studio chief at a well-known agency, Ross applies this profound expertise to our current projects.</p>
<p>Monica, Ross' sibling and an award-winning designer, is our Art Director with a specialization in graphic and print design.</p> <p>Fresh designers Rachel and Chandler add youth to our team. Rachel provides web design prowess, working in tandem with Ross, while Chandler, a recent graphic design graduate, thrives under Monica's guidance.</p> <img alt="" src="https://lorempixum.com/500/600/sports" /> <p>Joey and Phoebe are the engines driving our business growth, recently securing several prominent clients. Beyond their sales talents, they are trained in project management, ensuring smooth execution from inception to delivery.</p>
</section>
That wraps up our simple HTML setup. With all the text, the page should now necessitate scrolling. Next, let’s dive into the styling with CSS:
Styling with CSS
The essential CSS needed for a parallax effect is quite simple once you grasp the underlying concept. First, we assign a background image to the .bg class. To prevent the background from moving with the scroll, we utilize a fixed position for the div. We extend the div’s width to the full page and its height to three times that of the viewable area. We align it to the top left and set its z-index to -1 to ensure it rests underneath the content elements.
.bg {
background: url('background.jpg') no-repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}
That’s all we need for the background. Feel free to style the rest of the page however you wish, though this won’t impact the parallax scrolling itself:
section {
color: #fff;
font-family: 'Arial', sans-serif;
width: 500px;
margin: 0 auto;
line-height: 1.5;
font-size: 16px;
}
With a bit of scrolling, you’ll notice the text moves while the backdrop remains steady. But we’re about to alter that dynamic with jQuery:
Animation with jQuery
We’ll employ jQuery to vary the background’s scroll rate. Our function, dubbed parallax, will monitor the user’s scroll distance:
function parallax(){
var scrolled = $(window).scrollTop();
To move the background at the same rate as the text, we’d normally match the div’s top value to the scroll, but we invert it for parallax:
$('.bg').css('top', -(scrolled) + 'px');
}
For parallax, though, we need differing speeds. Therefore, if we want the background to move slower by 20%, we multiply by 0.2:
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top', -(scrolled * 0.2) + 'px');
}
The final step is triggering this function with every scroll event:
$(window).scroll(function(e){
parallax();
});
Now our code is complete. You can see the effect in action by testing the file. Varying the fractional speed allows for different parallax rates. A demo of our code can be found here.
Wrapping It Up
As demonstrated, crafting a parallax effect is more straightforward than it might seem. While this example is basic, you can expand upon it to create complex and visually engaging parallax designs.
