Scroll effects on page

Beaver Builder
1

I was wondering if it was possible to do scrolling effects such as the opacity effect on the following link
https://codyhouse.co/demo/page-scroll-effects/opacity.html

Could I do this in beaver builder?

Cheers

1 Like
2

Not with beaver Builder but you could use a JS library like Animate On Scroll:
https://michalsnik.github.io/aos/
You would tag your page elements with AOS classes to trigger effects on scroll.
Maybe you would also need custom CSS to fix the background images position on scroll.

3

Thank you for the response, sorry I’ve got little experience with adapting themes, how would I go about incorporating the library into a WordPress theme

Cheers

4

If you want to use the library on a specific page, you can both load the script from a CDN and initialize it by inserting this code in an HTML module in the layout:

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init({
        Here your init parameters (see the doc)
    });
</script>

If you want to load the script site wide (need to use it on multiple pages), you can insert the link to the CDN in the theme’s customizer, in a Code location (depending on the theme).

5

Thank you so much, I’ll be sure to give this a try

6

One more question, do I need to reference any other stylesheets when loading script on one page?

7

I’m not sure to understand, stylesheets related to what?
AOS doesn’t require any dependency.

8

Ok thank you my bad, sorry I’m new to all this

Thank you so much for your help

9

No problem, but as mentioned before, i think you’ll need also a bit of custom CSS to reproduce the effect of static background images seen in your example, AOS will not provide all the effects by itself in my opinion. :wink: