How to Create a Parallax Scrolling Effect
Creating a website requires an exciting design to attract visitors and increase user engagement. One of the trendy effects is the parallax effect.
Before creating a parallax effect, let’s see what it is and where it comes.
The parallax effect makes the background and foreground content move at a different speed while scrolling. Parallax website design always catches the attention of users. The “parallax” term first came from the visual 2D effect side-scrolling videogames that used different background image movement speeds for creating the illusion of depth during gameplay.
It can be used on any page or post of any website. Mostly, it is seen on homepages, landing pages, or one-page sites.
Create HTML
- Create a <div> element with a class name "parallax-effect".
- Add another <div> with a class name "text" within the first one.
<div class="parallax-effect"></div>
<div class="text">
Parallax Effect
</div>Add CSS
Style the "parallax-effect" class.
- Set the image link with the help of the background-image property and specify the min-height.
- Specify whether the background image should be fixed or it will be scrolled along with the rest of the page with the background-attachment property.
- Specify the starting position of the background image with the background-position property. We set it to "center".
- Set the background-repeat property to "no-repeat"and the background-size to "cover".
Now, style the "text" class.
- Set the height property and use the background-image with its "linear-gradient" value.
- Specify the font-size and font-famiily.
- Set the text-align property to its "center" value.
.parallax-effect {
background-image: url("https://images.unsplash.com/photo-1453747063559-36695c8771bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1050&q=80");
min-height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
height: 1000px;
background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4);
font-size: 36px;
text-align: center;
font-family: 'Raleway', Arial, sans-serif;
}So, here is the simplest parallax effect example.
Example of creating a parallax scrolling effect with the <div> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.parallax-effect {
background-image: url("https://images.unsplash.com/photo-1453747063559-36695c8771bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1050&q=80");
min-height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
height: 1000px;
background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4);
font-size: 36px;
text-align: center;
font-family: 'Raleway', Arial, sans-serif;
}
</style>
</head>
<body>
<div class="parallax-effect"></div>
<div class="text">
Parallax Effect
</div>
</body>
</html>In the next example, we add one more <div> so that when you scroll, the image will be seen at the end. Let’s use CSS internal style instead. The code is more evident in this way.
Example of creating a parallax scrolling effect with the CSS internal style:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.parallax-effect {
background-image: url("https://images.unsplash.com/photo-1453747063559-36695c8771bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1050&q=80");
min-height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax-effect + div {
height: 1000px;
background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4);
font-size: 36px;
text-align: center;
font-family: 'Raleway', Arial, sans-serif;
}
</style>
</head>
<body>
<div class="parallax-effect"></div>
<div>
Parallax Effect
</div>
<div class="parallax-effect"></div>
</body>
</html>Next, we create a parallax effect with the <section> tag. The <section> tag is often used when creating a landing page to divide the page into separate logical blocks.
Example of creating a parallax scrolling effect with the <section> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #eeeeee;
margin: 0;
padding: 0;
border: 0;
}
h2 {
font-family: 'Noto Sans', serif;
font-size: 2em;
color: #000000;
}
p {
font-family: 'Noto Sans', sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #666;
margin: 30px 0;
text-indent: 30px;
}
.image {
background: url("https://images.unsplash.com/photo-1535919020263-f79f5313f336?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80") no-repeat fixed;
background-position: center center;
background-size: cover;
min-height: 500px;
}
.content {
max-width: 960px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
z-index: 2;
height: 100%;
}
</style>
</head>
<body>
<div class="image"></div>
<section class="content">
<h2>Parallax Effect</h2>
<p>
One of the most popular destinations in the world and the top Greek destination, Santorini, or Thira, is one of the most magical places you’ve ever seen!
</p>
<hr>
<div>
<p>
Located on the southern side of the Aegean sea, Santorini is a part of Cyclades island complex. The island was created after a huge volcanic eruption, occurred in 17th century B.C., which shaped the breathtaking Santorini caldera.
</p>
<p>
The beautiful sunset view in Oia Santorini, the minimal Cycladic architecture, the luxurious Santorini Greece hotels, the dramatic rocky landscape, and Santorini volcano are some of the reasons you’ll have a crush on this unique island!
</p>
<p>
There’s no denying of the uniqueness of this destination or its huge allure – Santorini hosts 1.5 million tourists annually. If you’re planning to join that crowder's, all you need to know. Part of the Cyclades island group, Santorini (known as Thira, a name that encompasses the volcanic islets within Santorini’s orbit) sits in the Aegean Sea, roughly halfway between Athens and Crete.
</p>
<p>
The island is shaped like a wonky croissant. The neighboring islets hint at the fact that Santorini was once circular; it was known as Strongili (the Round One). Thousands of years ago a colossal volcanic eruption caused the center of Strongili to sink and leave a caldera (or crater) with towering cliffs along the east side – now Santorini’s trademark landscape.
</p>
<p>
Santorini’s commercial development is focused on the caldera-edge clifftops in the island’s west, with large clusters of whitewashed buildings nesting at dizzying heights, cliffsides and offering gasp-inducing views from land or sea.</p>
<p>
Fira, the island’s capital, sprawls north into villages called Firostefani and Imerovigli (the highest point of the caldera edge). A path running through these villages is lined with upmarket, restaurant terraces, hotels, and endless photo opportunities
</p>
<p>
These three conjoined settlements draw most visitors, together with the stunning and exclusive village of Oia in Santorini’s north. There’s a growing number of hotels in the island’s south, offering caldera views to the north and northeast. Akrotiri’s views come cheaper than Oia’s, but it’s a fair way from the action of Fira.
</p>
</div>
</section>
</body>
</html>