We are going to add the functionality to our web-page so that whenever the user scrolls up or scrolls down on the image, then the image changes. We have used only 3 images but it can easily be expanded for multiple images.
We are keeping the images on top of each other, this makes sure only one image is visible at a time. When we scroll, we decrement the z-coordinate of the current image and increments the z-coordinate of the new image. By doing this the new image overlays the old image and it comes on top of all images and becomes visible.
- HTML Code: It is used to create a basic structure to include images.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>
Change Image Dynamically
when User Scrolls
</
title
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
b
>A Computer Science Portal for Geeks</
b
>
<
div
id
=
"scroll-image"
>
<
img
src
=
"CSS.png"
class
=
"test"
/>
<
img
src
=
"html.png"
class
=
"test"
/>
<
img
src
=
"php.png"
class
=
"test"
/>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_none - CSS Code: Css is used to desing the structure. The position property is the most important things here. It will make all the images to appear on top of each other.
<
style
>
body {
text-align: center;
}
h1 {
color: green;
}
img {
position: absolute;
left: 300px;
}
</
style
>
chevron_rightfilter_none - Javscript code: In this section we will add JavaScript code to perform the scrolling on the image.
<script>
window.onload =
function
() {
// Index of current image
// which is on display
var
imageIndex = 0;
// Object array of all the
// images of class test
var
images =
document.getElementsByClassName(
'test'
);
// This tells us if mouse if over
// image or not, We only change
// image if mouse if over it
var
isMouseOverImage =
false
;
// Object of parent element
// containing all images
var
scrollImages =
document.getElementById(
'scroll-image'
);
// Stores the current scoll co-ordinates
// so that the window don't scroll down
// while scrolling the images
var
x, y;
// This function sets the scroll to x, y
function
noScroll() {
window.scrollTo(x, y);
}
// The following event id fired once when
// We hover mouse over the images
scrollImages.addEventListener(
"mouseenter"
,
function
() {
// We store the current page
// offset to x,y
x = window.pageXOffset;
y = window.pageYOffset;
// We add the following event to
// window object, so if we scroll
// down after mouse is over the
// image we can avoid scrolling
// the window
window.addEventListener(
"scroll"
, noScroll);
// We set isMouseOverImage to
// true, this means Mouse is
// now over the iamge
isMouseOverImage =
true
;
});
// The following function is fired
// when mouse is no longer over
// the images
scrollImages.addEventListener(
"mouseleave"
,
function
() {
// We set isMouseOverImage to
// false, this means mouse is
// not over the iamge
isMouseOverImage =
false
;
// We remove the event we previously
// added because we are no longer
// over the image, the scroll will
// now scroll the window
window.removeEventListener(
"scroll"
, noScroll);
});
// The following function is called
// when we move mouse wheel over
// the images
scrollImages.addEventListener(
"wheel"
,
function
(e) {
// We check if we are over
// image or not
if
(isMouseOverImage) {
var
nextImageIndex;
// The following condition
// finds the next image
// index depending if we
// scroll up or scroll down
if
(e.deltaY > 0)
nextImageIndex = (imageIndex + 1)
% images.length;
else
nextImageIndex =
(imageIndex - 1
+ images.length)
% images.length;
// We set the z index of current
// image to 0
images[imageIndex].style.zIndex =
"0"
;
// We set the z index of next
// image to 1, this makes
// The new image appear on top
// of old image
images[nextImageIndex].style.zIndex =
"1"
;
imageIndex = nextImageIndex;
}
});
}
</script>
chevron_rightfilter_none
Final Solution: In this section we will combine the avobe three section.
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <title> Change image dynamically when user scrolls </title> <style> body { text-align: center; } h1 { color: green; } img { position: absolute; left: 300px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <b>A Computer Science Portal for Geeks</b> <div id= "scroll-image" > <img src= "CSS.png" class= "test" /> <img src= "html.png" class= "test" /> <img src= "php.png" class= "test" /> </div> <script> window.onload = function () { // Index of current image // which is on display var imageIndex = 0; // Object array of all the // images of class test var images = document.getElementsByClassName( 'test' ); // This tells us if mouse if over // image or not, We only change // image if mouse if over it var isMouseOverImage = false ; // Object of parent element // containing all images var scrollImages = document.getElementById( 'scroll-image' ); // Stores the current scoll co-ordinates // so that the window don't scroll down // while scrolling the images var x, y; // This function sets the scroll to x, y function noScroll() { window.scrollTo(x, y); } // The following event id fired once when // We hover mouse over the images scrollImages.addEventListener( "mouseenter" , function () { // We store the current page // offset to x,y x = window.pageXOffset; y = window.pageYOffset; // We add the following event to // window object, so if we scroll // down after mouse is over the // image we can avoid scrolling // the window window.addEventListener( "scroll" , noScroll); // We set isMouseOverImage to // true, this means Mouse is // now over the iamge isMouseOverImage = true ; }); // The following function is fired // when mouse is no longer over // the images scrollImages.addEventListener( "mouseleave" , function () { // We set isMouseOverImage to // false, this means mouse is // not over the iamge isMouseOverImage = false ; // We remove the event we previously // added because we are no longer // over the image, the scroll will // now scroll the window window.removeEventListener( "scroll" , noScroll); }); // The following function is called // when we move mouse wheel over // the images scrollImages.addEventListener( "wheel" , function (e) { // We check if we are over // image or not if (isMouseOverImage) { var nextImageIndex; // The following condition // finds the next image // index depending if we // scroll up or scroll down if (e.deltaY > 0) nextImageIndex = (imageIndex + 1) % images.length; else nextImageIndex = (imageIndex - 1 + images.length) % images.length; // We set the z index of current // image to 0 images[imageIndex].style.zIndex = "0" ; // We set the z index of next // image to 1, this makes // The new image appear on top // of old image images[nextImageIndex].style.zIndex = "1" ; imageIndex = nextImageIndex; } }); } </script> </body> </html> |
Output:
Note: The above code will change image only if mouse if over the image.