In this week post I will show you how to make parallax effect and use it to tell story in website. Parallax is must know skill for every frontend developer because it can be used for different type of cases in websites. Mostly it is used tell story with graphics, like portfolio, about us page(timeline of a company), showcase products.
So let’s start creating our storytelling website with parallax, but before that I just want to tell you that every post in this blog is based on video tutorials i do in my youtube channel so if you want to stay tuned for my work and to see many inspiration ideas in frontend area please subscribe for my channel.
HTML Section
OK guys after i told you about my youtube channel we can start building our layout for our parallax website. To build our parallax we will need two divs in every section, so our divs will be class="parallax" and class="section-1". First div will be for our image and parallax effect, second div is for our content. So in <code>class=”section-1″</code> we will add one heading tag and paragraph tag for our text. Our code for now will be looking like below.
Example:
[code language="html"]
<div class="parallax">
<div class="section-1">
<h1>Heading Baby</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
[/code]
Now we need to copy this layout two more times and change .section-1 with 2 and 3. And our final layout would look like this.
Example:
[code language="html"]
<div class="parallax">
<div class="section-1">
<h1>Heading Baby</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="parallax">
<div class="section-2">
<h1>Heading Two Baby</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="parallax">
<div class="section-3">
<h1>Heading Three Baby</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
[/code]
CSS Section
After we have our layout done, we can proceed to our styling and making parallax effect to work!
First lets style our content in my case this is headings and paragraphs, but first let set some height and color to our .section-1 and .section-2. Height will be 300px and background color white. Let’s now style our text. For our <code>h1<code> tag I set font size to 45px and will align text to center via <code>text-align</code> property. For our paragraph i will set font size to 20px and align text with <code>justify</code> value. Also to make everything look better I will add <code>margin: 40px</code> to make more space. Until now our css file would look like this.
Example:
.section-1, .section-2{
height: 300px;
background: white;
}
h1{
font-size: 45px;
text-align: center;
}
p{
margin: 40px;
font-size: 20px;
text-align: justify;
}
Now finally let’s add our images to our .parallax, .parallax-2 and .parallax-3 and after that we will make our parallax effect. To add image to our classes we will use background-image property, where our value will be our image destinations. In my case this will be link to Unsplash.com. To make our parallax effect to work we need to use background-attachment property which will be set to fixed value. After that we only need to make couple of adjustments to image to make it look prettier. In the end our CSS will look like this.
Example:
body{
margin: 0;
}
.section-1, .section-2{
height: 300px;
background: white;
}
h1{
font-size: 45px;
text-align: center;
}
p{
margin: 40px;
font-size: 20px;
text-align: justify;
}
.parallax {
/* The image used */
background-image: url("https://images.unsplash.com/photo-1548421693-0362b2ab31f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
/* Set a specific height */
min-height: 700px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax-2{
/* The image used */
background-image: url("https://images.unsplash.com/photo-1548421693-695f236d8575?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
/* Set a specific height */
min-height: 300px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax-3{
/* The image used */
background-image: url("https://images.unsplash.com/photo-1545396047-67fb8c80f6e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
/* Set a specific height */
min-height: 350px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
To view final code and result on Codepen click here.
Subscribe for our Youtube Channel.
If you like this post please give me some review. Also you can check my previous post here.
Comments are closed.