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 >
|
-
CSS Code: Css is used to design 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 >
|
-
Javascript 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 scroll 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 image
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 image
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> |
Final Solution: In this section we will combine the above 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 scroll 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 image
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 image
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.