Parallax Scrolling using HTML CSS & Jquery

byCodingFlicks -October 09, 2020

0

Parallax Scrolling using HTML CSS Jquery

Hello, in this project, I will share a snippet on how to create a parallax using HTML CSS and a simple jquery plugin called parallax. Previously I have shared a snippet on the scroll to the top button using HTML CSS and jquery. Checkout that snippet if you like.

Now, what is the parallax effect on the website? A simple explanation is the faster movement of the foreground objects than the objects in the background. It creates a 3d effect to the viewers when they try to scroll down the webpage. A couple of top brands designed their website using this parallax method. It makes the website unique and aesthetic than the other ordinary website.

In this snippet of the Parallax Scrolling effect using HTML, CSS, and javascript, I have used a plugin named parallaxie. For the snippet to work, you have to download the plugin from the plugin website. After downloading, you have to extract the file, take the parallaxie js file from there, and add it to your project. This plugin is straightforward to understand to implement on our website. You also need to add the latest jquery to your project; otherwise, the snippet will not work.

You May Also Like:

I have taken three different div elements with some random text in the HTML markup. I have given the first, third, and fifth divs the name of 'section-one' and the second, fourth, and sixth divs the name of 'section-two.' i have provided a background-image to all the divs containing 'section-one' name. I used inline CSS while giving the background-image to divs. I have provided a pre-defined padding class which styled in CSS.

In the CSS part, I have used some basic CSS styles to decorate all the project elements. I have used a CSS background overlay for those divs that have a background image. In this way, the text on those divs will become visible. I hope you already have the parallaxie js to your project. Now what you need to do is initiate the plugin and mention the div where we want the parallax effect. In our case, the divs named 'section-one,' and I have added the initiating code below.

After creating the HTML and CSS file, copy, paste, and save the code. Now the code in your browser and play around with the code.

HTML

<!DOCTYPE html>
<!--code by Codingflicks (https://www.codingflicks.com/)-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parallax Scrolling using HTML CSS & Jquery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="section-one p-225" style="background-image: url(https://i.postimg.cc/fRvhhmPs/11.jpg)">
<h1>Welcome to website</h1>
<p>Lorem ipsum dolor sit amet.</p>
<a href="#" class="btn-area">Learn More</a> 
</div>

<div class="section-two p-125">
<h1>Section header</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis hic, dicta velit obcaecati a. Soluta ipsam dolor minima pariatur. Nesciunt voluptatem nihil, recusandae laboriosam tenetur!</p>           
</div>

<div class="section-one p-225" style="background-image: url(https://i.postimg.cc/k42r8ZgM/12.jpg)"> 
<h1>Parallax Effect</h1>
</div>

<div class="section-two p-125">
<h1>Section header</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis hic, dicta velit obcaecati a. Soluta ipsam dolor minima pariatur. Nesciunt voluptatem nihil, recusandae laboriosam tenetur!</p>           
</div>

<div class="section-one p-225" style="background-image: url(https://i.postimg.cc/RFykTRW7/14.jpg)"> 
<h1>Parallax Effect</h1>
</div>

<div class="section-two p-125">
<h1>Section header</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis hic, dicta velit obcaecati a. Soluta ipsam dolor minima pariatur. Nesciunt voluptatem nihil, recusandae laboriosam tenetur!</p>           
</div>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="parallaxie.js"></script>
<script>
    $('.section-one').parallaxie({
        speed: 0.4 
    }); 
</script>
</body>
</html>

CSS

body{
margin: 0;
padding: 0;
line-height: 1.5;
font-family: poppins;
text-align: center;
}
.p-225 {
padding: 225px 0;
}
.p-125{
padding: 125px 0;
}
.btn-area{
padding: 10px 20px;
margin-top: 15px;
border: 2px solid #fff;
display: inline-block;
text-decoration: none;
color: #fff;
}
.btn-area:hover {
background: #fff;
color: #262626;
transition: .9s;
}
.section-one{
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;            
color: #fff;
position: relative;
z-index: 1;
}

.section-one h1 {
font-size: 50px;
text-transform: uppercase;
margin: 0;
}
.section-one p{
font-size: 20px;
}
.section-two h1{
text-transform: uppercase;
}
.section-two p{
max-width: 700px;
margin: 0 auto;
}
.section-one:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: -1;
}

I hope you liked this simple snippet. Please follow our social media profiles to stay connected with this blog.thanks for stopping by.

Please do not enter any spam link in the comment box.