Site URL: https://www.perennialzero.com/services
I've added the following code to this site to try and create a graphic on scroll. The graphic works but in order to size and position it correctly I've had to set the position like this...
position: absolute;
top: -300px;
left: 500px;
width: 500px;
height: 500px;
instead of the original
position: absolute;
left: 300px;
Which in turn positions all the cover images way off to the side.
Is there a way to pinpoint the position above directly to just this block/section. I've attempted to use section id or content block targeting but I'm not sure I'm even doing that right.
I would also like to add something like this to the home page possibly but I have the same problem.
I'm defiantly self taught when it comes to coding.😬
I later found this (https://levelup.gitconnected.com/how-to-create-frame-by-frame-moving-image-on-scroll-effect-30ce577c63c2 and would love to make this work instead but can't get it to work at all. Either option is fine, I just want my images to change on scroll without changing the images on the rest of the page.
Any help is welcome!! Thanks
Password: 4D(HD$bK_9LgF9_
<!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;
top: -300px;
left: 50px;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="scroll-image">
<img src="https://i.imgur.com/zlN9fkY.png" class="test" />
<img src="https://i.imgur.com/GnBPDfN.png" class="test" />
<img src="https://i.imgur.com/EK30TsI.png" class="test" />
<img src="https://i.imgur.com/aavIUvI.png" class="test" />
<img src="https://i.imgur.com/qXTI6kx.png" class="test" />
<img src="https://i.imgur.com/YawWjn7.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>
This is where I got the code originally https://www.geeksforgeeks.org/how-to-change-image-dynamically-when-user-scrolls-using-javascript/?ref=gcse