How to add parallax effect in your website

How to add parallax effect in your website?

What Is Parallax?

Parallax is scrolling is a today’s website trend where background content (images, colors) more in different speed than the upper content, it’s creates a very nice and attractive effect to your website. it’s a best for portfolio and single page website to attract more clients.

How To Add Parallax effect?

For you’ll need add a jquery file to your website and javascript library.
For downloading parallax.min.js click here..

Check out the part of video tutorial about parallax effect.

 

Part 2

Part 3

Here you can check html code..

<!DOCTYPE html>
<html>
<head>
 <title>Parallex Landing Page By TimeTechSol.</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script type="text/javascript" src="parallax.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
 <div class="navbar-header">
 <a href="" class="navbar-brand">Parallex</a>
 </div>
 <ul class="nav navbar-nav">
 <li><a href="#first_section">Home</a></li>
 <li><a href="#second_section">Home</a></li>
 <li><a href="#third_section">Home</a></li>
 </ul>
</nav>

<section id="first_section" class="parallax-window" data-parallax="scroll" data-image-src="bg.jpg">
 <h1>First Section</h1>
</section>
<section id="second_section" class="parallax-window" data-parallax="scroll" data-image-src="bg1.jpg">
 <h1>Second Section</h1>
</section>
<section id="third_section" class="parallax-window" data-parallax="scroll" data-image-src="bg2.jpg">
 <h1>Third Section</h1>
</section>
<section id="footer">
 &copy TimetechSol.com
</section>

</body>
</html>

here you can check style.css

#first_section{
width: 100%;
height: 500px;
padding: 250px 0px;
text-align: center;
color: white;
}
#second_section{
width: 100%;
height: 500px;
padding: 250px 0px;
text-align: center;
color: white;
}
#third_section{
width: 100%;
height: 500px;
padding: 250px 0px;
text-align: center;
color: white;
}
#footer{
width: 100%;
padding: 20px;
text-align: center;
}

It’s a very simpe method to add parallax effect your website, because you only need to add parallax.min.js script file which will do all the work for you..
you only need to add you data-source image to work it..

Click here to download the source code

If you like our tutorial please subscribe to our channel and comment..

Related posts

4 thoughts on “How to add parallax effect in your website

  1. I absolutely love your site.. Excellent colors & theme. Did you create this site yourself? Please reply back as I’m planning to create my very own website and would like to learn where you got this from or exactly what the theme is called. Thank you!

  2. We’re a group of volunteers and opening a new scheme in our community.
    Your web site offered us with valuable information to work on. You’ve done a formidable job and our whole community will be
    grateful to you.

  3. Hello there, I found your web site by the use of Google while searching for a comparable matter, your website got here up, it seems great. I’ve bookmarked it in my google bookmarks.

  4. Now I am going away to do my breakfast, when having my breakfast coming yet again to read further news.

Leave a Comment