Jump to content

Dynamic Image code is affecting other images on my page.

Recommended Posts

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
  • Replies 2
  • Views 665
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.