CODEWITHSUNDEEP
javascripthtmljquerycssscroll
Chris Faux
Chris Faux

Reputation: 135

vanilla javascript image zoom scroll effect

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.

Upvotes: 0

Views: 2136

Answers (1)

Svela
Svela

Reputation: 639

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/

Upvotes: 1

Related Questions