dixonandmoe / rellax

Lightweight, vanilla javascript parallax library
https://dixonandmoe.com/rellax/
MIT License
7.06k stars 878 forks source link

Re-apply Parallax on Window Resize #157

Closed pauljohnknight closed 5 years ago

pauljohnknight commented 5 years ago

Hi,

I have a parallax set for larger screens with the following code:

    // PARALLAX VARS - IMAGES
    var largeScreenParallax = new Rellax('.parallax-large-screen', {
        speed: 2,
        center: true,
        wrapper: null,
        round: true,
        vertical: true,
        horizontal: false
    });

On small screen sizes I have removed it with the destroy() method.

    // REMOVE PARALLAX CLASS
    function removeParallaxClass() {
        if (window.innerWidth < 981) {
            largeScreenParallax.destroy();
        }
    }
    removeParallaxClass()
    addEventListener("resize", removeParallaxClass, false)

However I can't work out how to re-add the parallax when the window is resized back up again?

I thought this would work, by adding the refresh() method, but it doesn't:

    // RE-ADD PARALLAX ON WINDOW RESIZE IF DESTROYED ABOVE
    function reAddParallaxClass() {
        if (window.innerWidth > 980) {
            largeScreenParallax.refresh();
        }
    }
    reAddParallaxClass()
    addEventListener("resize", reAddParallaxClass, false)

When you've removed a parallax on smaller window sizes, how do you re-add/re-set it for when the window is re-sized back up again?

Many thanks,

Paul.

EmilyChews commented 5 years ago

@moeamaya I'm having a similar problem, there seems to be an open pull request that may relate to a fix for this issue?