If you want to see a scrolling effect, check out this link here.
For another animation on mouse move, click on this link(here).
Combining both the scrolling effect and the image movement might seem challenging due to different styles used in each template. In one front-end template, actual images are employed whereas image backgrounds are used in the other.
To achieve this combination, follow the code snippets below:
// JS code here
var zoom_value = 1;
var boxFullHeight = $('header').height();
var boxHalfHeight = $('header').height() / 2;
var domHeight = $('html').scrollTop();
//scrollController will check the value when scrolling up or down
var scrollController = 0;
//max number that the scroll happens before images change
var max_scrollController = 4;
//this will enable/disable the scrollbar after a certain period
var controller = 0;
... (JS Code Continues) ...
// CSS code here
html,body,header, #header_box, .image_box, img {
height: 100%;
}
#firstbox{
background: red;
width: 100%;
}
#second_box{
background: blue;
}
#third_box{
background: black;
}
.general{
width: 100%;
height: 100%;
}
header {
position: relative;
overflow: hidden;
}
.image_box{
position: absolute;
width: 100%;
}
img{
width: 100%;
}
.hide_image {
visibility: hidden;
}
... (CSS Code Continues) ...
// HTML code here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="firstbox" class="general">
<header>
<div id="header_box">
<div class="image_box">
<img class="img1" src="https://cdn.pixabay.com/photo/2017/03/07/13/38/landscape-2124022_960_720.jpg" alt="image here">
</div>
<div class="image_box box2">
<img class="img2" src="https://cdn.pixabay.com/photo/2017/06/05/20/10/blue-2375119_960_720.jpg" alt="image here">
</div>
</div>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ut accusamus non error laboriosam in commodi ad, sint, neque voluptates deserunt magnam minima nulla officia nobis fugit enim optio assumenda.</p>
</div>
<div id="second_box" class="general">
</div>
<div id="third_box" class="general">
</div>
</body>