Parallax on Multiple Fullscreen Divs

Question

I have a series of 8 fullscreen divs, and I have successfully applied the most basic of parallax effects to the first one.

What I want to the do, is apply the same parallax effect to divs 3, 5 and 7.

Here is my JavaScript:

jQuery(document).ready(function() {
    $(window).scroll(function(e) {
        parallaxScroll();
    });

    function parallaxScroll() {
        var scrolled = $(window).scrollTop();
        $('#parallaxone').css('top', (0 - (scrolled * 0.25)) + 'px');
    }
});

Here is my HTML:

<div class="spa-container spa-container-header" id="introduction">
    <div class="spa-add-image" id="parallaxone"></div>
</div>

Here is my CSS:

html, body {
    height: 100%;
    margin: 0;
}

.spa-container {
    height: 100%;
    min-height: 100%;
}

.spa-add-image {
    width: 100%;
    height: 100%;

    position: absolute;

    z-index: 1;

    background: no-repeat center center;
    background-size: cover;
}

.spa-container-header .spa-add-image {
    background-image: url(../img/foleysbridge.jpg);
    background-size: cover;
}

All divs are the same.

I am unsure as to how I could achieve this so any help is much appreciated.

Thanks,

Matthew

You could change the `$('#parallaxone')` selector to select the 1st, 3rd, 5th, and 7th div? — swinn, Feb 18 '17 at 16:09
You may want to be more clear about what you're looking for, then. Could you use [jsFiddle](https://jsfiddle.net) to create a working example of the code you have now? And try using [placehold.it](http://placehold.it) to add placeholder images. — swinn, Feb 18 '17 at 17:07

Parallax on Multiple Fullscreen Divs

0 Answers0