vanilla javascript image zoom scroll effect

Question

I'm trying to recreate this simple jquery image zoom scroll effect in vanilla javascript with no success: I'm looking online and all tutorials seems to use jquery or skrollr library which is not being supported since 2014. This is a tutorial of this effect on youtube: https://www.youtube.com/watch?v=hjeS8HxH3k0

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Image Zoom Scroll Effect</title>

        <style>
            body {
                margin: 0;
                padding: 0;
            }

            div {
                width: 100%;
                height: 100vh;
                overflow: hidden;
                position: relative;
            }

            div img {
                width: 100%;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%);
            }

            /* BLANK SPACE, JUST TO TRY OUT THE SCROLL EFFECT */
            .whitespace {
                width: 100%;
                height: 100vh;
            }
        </style>

        <!-- JQUERY CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>

    <body>
        <div class="img-area">
            <img
                src="https://images.pexels.com/photos/775201/pexels-photo-775201.jpeg"
            />
        </div>

        <!-- BLANK SPACE, JUST TO TRY OUT THE SCROLL EFFECT -->
        <div class="whitespace"></div>

        <script>
            // JQUERY
            $(window).scroll(() => {
                let scroll = $(window).scrollTop();
                $('.img-area img').css({
                    width: 100 + scroll / 5 + '%',
                });
            });

            // VANILLA JS
            // window.addEventListener('scroll', () => {
            //     let scroll = window.scrollTop;
            //     document.querySelector('.img-area img').style.width =
            //         100 + scroll / 5 + '%';
            // });
        </script>
    </body>
</html>

I've commented out my vanilla javascript code.

What problem does your code give you, what is the result of using that rather than the jquery version? And do you see any errors in your browsers console? — A Haworth
– A Haworth, Commented May 11, 2021 at 12:44
So what happens ? Any errors? Apart from the jQuery version will loop all elements that match selector and you are only targeting the first one it looks like it should work — charlietfl
– charlietfl, Commented May 11, 2021 at 12:44

Svela · Accepted Answer · 2021-05-11 12:55:19Z

1

There is no property scrollTop for the window object. Use document.documentElement:

window.addEventListener('scroll', () => {  
    let scrollTop = document.documentElement.scrollTop;        
    document.getElementById('test').style.width = 100 + scrollTop / 5 + '%';
});

See working fiddle: https://jsfiddle.net/z3hux1ra/5/

answered May 11, 2021 at 12:55

Svela

6395 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Faux Over a year ago

Thank you so much. This what my code was missing.

Collectives™ on Stack Overflow

vanilla javascript image zoom scroll effect

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related