Better scroll animations with BasicScroll

BasicScroll is a lightweight, powerful, high-performance parallax scrolling JavaScript library designed for both mobile and desktop.

Another parallax library?

This one is a bit different, because you can do much more than a simple parallax.  It allows you to change CSS variables depending on the scroll position.

Step 1

Go to this page to download the ZIP file: https://github.com/electerious/basicScroll Upload and enqueue the JS file :

wp_enqueue_script( 'basicScroll-js', plugin_dir_url( __FILE__ ) . 'assets/js/basicScroll.min.js', '', '', true );

[ see HOWTO to learn how to add custom files ]

Step 2

We are going to change the opacity of the title, just like the heading at the top of this page. Then we will reduce the opacity when we scroll down.
In this example I use the class '.sctitle' for the title but you can use your own class or the ID.

In a Code Block, we add this Javascript:

const instance = basicScroll.create({
    elem: document.querySelector('.sctitle'),
    from: 0,
    to: 'middle-top',
    props: {
        '--opacity': {
            from: .99,
            to: .01
        }
    }
})

instance.start()

We have created a CSS variable '--opacity', that will go from 0.99 to 0.01 (could be from 1 to 0 but for a performance reason, it's better to animate it from .99 to .01, as explained in the official page https://github.com/electerious/basicScroll ).

Step 3

In a Code Block, add this CSS:

.sctitle {
    opacity: var(--opacity);
}

That's it, there is nothing else to do.
Now the opacity of your title will change when you scroll down the page.

More variables

At the top of this page, we also animate the background image (which is actually an image with an absolute position. Not a real CSS background image).
The full javascript code, that includes the image and the title:

const instance = basicScroll.create({
    elem: document.querySelector('.sctitle'),
    from: 0,
    to: 'middle-top',
    props: {
        '--opacity': {
            from: .99,
            to: .01
        },
        '--rot': {
            from: '0deg',
            to: '20deg'
        },
    }
})

instance.start()

And the CSS. You can see that we are changing the opacity for both elements, and we do a little rotation for the image.

.scimage {
    object-fit: cover;
    opacity: var(--opacity);
    transform-origin: center bottom;
    transform: perspective(700px) rotatex(var(--rot));
}

.sctitle {
    opacity: var(--opacity);
}

CSS variables

Check this next example:

As we are using CSS variables, we can easily re-use them.

In this DOUBLE PARALLAX effect, we are targeting the section, and we create a variable called --movey, that goes from -100px to 100px;

const instance2 = basicScroll.create({
    elem: document.querySelector('#section-11-818'),
    from: 'top-bottom',
    to: 'bottom-top',
    props: {
        '--movey': {
            from: '-100px',
            to: '100px'
        },
    }
})
instance2.start()

For the CSS, we do a simple vertical translation (translateY) with that variable.
Notice the second image. It's the same animation, except that we multiply the variable by -1. So the animation will be reversed (from 100px to -100px).

#image-14-818 {
    transform: scale(1.5) translatey(var(--movey));
}

#image-17-818 {
    transform: scale(1.5) translatey(calc(var(--movey) * -1));
}

Does it work on Mobile?

They are CSS variables so they will work everywhere (well, almost everywhere).
Even better, we can change the CSS, like this example:

@media (max-width: 767px) {
    #image-14-818 {
        transform: scale(1.5) translatey(calc(var(--movey) * -1));
    }
    #image-17-818 {
        transform: scale(1.5) translatey(0);
    }
}

If the screen resolution is less than 768px wide, our images will act differently:
The animation of the first one will be reversed and the second image won't be animated at all.

Check this page for more experiments:

https://oxygen4fun.supadezign.com/basicscroll/