melsk2022 Posted February 14, 2022 Share Posted February 14, 2022 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 Link to comment
tuanphan Posted February 19, 2022 Share Posted February 19, 2022 Have you found the solution yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
melsk2022 Posted February 22, 2022 Author Share Posted February 22, 2022 I have not found a solution yet. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment