Parallax scrolling is an amazing scrolling effect that causes an object to move at an unusual speed than a page. The Parallax scroll effect is often used for modern web design where the background image is much slower than before when the user navigates to a web page.
Parallax JQuery Plugin CDN
https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js
#index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cool Parallax.js Scrolling JQuery Plugin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body{
margin: 0;padding: 0;
overflow-x: hidden;
}
.parallax-window {
min-height: 400px;
background: transparent;
}
#banner-absolute{
color: #fff;
position: relative;
top: 60px;
left: 30px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="parallax-window" data-parallax="scroll" data-image-src="bg.jpg">
<div id="banner-absolute">
<h1>Cool parallax scrolling jquery</h1>
<p>Parallax scrolling is an amazing scrolling effect that causes an element to move at an unusual
speed than the page.
</p>
</div>
</div>
</div>
</div>
</div>
<div style="height: 400px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</body>
</html>
Output: