How To Make Background Move With Scroll Html

Brand a background image move horizontally every bit you curlicue down with simple jQuery.

Parallax furnishings are a brilliant play tricks to use when you want to show off a beautiful image. It'due south visually more engaging by giving the web page a depth. Still, the parallax effects are normally vertical. How about a horizontal parallax consequence that can move the image one side to some other as we scroll down the page? I would like to share a elementary technique that tin can do just that using a simple jQuery.

Firstly we will have 3 sections on the folio, and locate the background images (one for a static image, another for a moving image) in the centre department to demonstrate the scrolling effect. Let's build upward the HTML markups. Actually elementary.

i two 3 4 5 6 7 8 9

<div class="section">   Roll downwards to see the issue </div> <div course="section bg-static">   <div course="bg-move"></div> </div> <div class="section">   The boat image is moving only when scrolling.  </div>

<div class="section"> Scroll down to see the effect </div> <div class="section bg-static"> <div course="bg-move"></div> </div> <div course="section"> The boat image is moving only when scrolling. </div>

Adjacent let's give the HTML elements some styles and put the images in the centre section.

one ii three four 5 6 7 8 9 10 eleven 12 thirteen fourteen 15 xvi 17 18 19 twenty 21 22 23 24 25 26 27 28 29

body                        {                        font-size                        :                        1.5em                        ;                        font-family                        :                        Arial,                        Helvetica,                        sans-serif                        ;                        }                        .department                        {                        position                        :                        relative                        ;                        max-width                        :                        920px                        ;                        min-tiptop                        :                        75vh                        ;                        padding                        :                        40px                        ;                        margin                        :                        auto                        ;                        groundwork-color                        :                        #48c9b0                        ;                        color                        :                        #ffffff                        ;                        }                        .section                        .bg-static                        {                        background-color                        :                        #85c1e9                        ;                        background-image                        :                        url                        (                        https://webmadewell.com/wp-content/uploads/2018/07/img-web log-background-movement-scrolling-bg.png                        )                        ;                        background-size                        :                        cover;                        groundwork-position                        :                        center                        ;                        }                        .section                        .bg-move                        {                        position                        :                        absolute                        ;                        top                        :                        0                        ;                        bottom                        :                        0                        ;                        correct                        :                        auto                        ;                        width                        :                        100%                        ;                        background-image                        :                        url                        (                        https://webmadewell.com/wp-content/uploads/2018/07/img-blog-background-move-scrolling-boat.png                        )                        ;                        background-size                        :                        cover;                        background-position                        :                        middle                        ;                        }

body { font-size: 1.5em; font-family: Arial, Helvetica, sans-serif; } .section { position: relative; max-width: 920px; min-height: 75vh; padding: 40px; margin: auto; groundwork-color: #48c9b0; color: #ffffff; } .section.bg-static { background-colour: #85c1e9; groundwork-image: url(https://webmadewell.com/wp-content/uploads/2018/07/img-blog-background-move-scrolling-bg.png); background-size: cover; background-position: center; } .department .bg-movement { position: absolute; tiptop: 0; bottom: 0; right: auto; width: 100%; background-image: url(https://webmadewell.com/wp-content/uploads/2018/07/img-blog-background-motility-scrolling-boat.png); background-size: cover; background-position: center; }

The sample folio should await like below. Very summer-like!

It looks nice, only too plane. Wouldn't yous agree? Let'southward arrive fiddling bit more interesting past giving the boat a horizontal parallax outcome. Simply add the jQuery code beneath.

1 2 iii 4 5 6 7 8 9 10

                        $                        (window).on                        (                        'load resize scroll'                        ,                        function                        (                        )                        {                        $                        (                        '.bg-static'                        ).each                        (                        role                        (                        )                        {                        var                        windowTop                        =                        $                        (window).scrollTop                        (                        )                        ;                        var                        elementTop                        =                        $                        (                        this                        ).offset                        (                        ).pinnacle                        ;                        var                        leftPosition                        =                        windowTop                        -                        elementTop;                        $                        (                        this                        )                        .detect                        (                        '.bg-motion'                        )                        .css                        (                        {                        left:                        leftPosition                        }                        )                        ;                        }                        )                        ;                        }                        )                        ;

$(window).on('load resize scroll', function() { $('.bg-static').each(role() { var windowTop = $(window).scrollTop(); var elementTop = $(this).kickoff().superlative; var leftPosition = windowTop - elementTop; $(this) .find('.bg-movement') .css({ left: leftPosition }); }); });

With the jQuery in place, at present the boat is moving left to correct as you curlicue down making it little more than fun. Meet it in action from the video below.