Case: Animate on Scroll (AOS)
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
This will load the CSS. At the bottom of your page/post you’ll have to load the script in a custom HTML-block:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script>
Now you can add the custom code, that will animate for instance an image. Let’s try this with my logo:
Now select the block in the List View. Click the kebab menu, and select “Edit as HTML“.
Now you can see the WP “markup”, and add whatever code you fancy. For instance if you want to flip the image you’ll need code around these lines:
In the HTML block add data-aos=”flip-up” to the image tag:
<figure class="wp-block-image size-full"> <img data-aos="flip-up" src="https://multimusen.dk/wp-content/uploads/cropped-cropped-multimusen-150-150-1.png" alt="" class="wp-image-9017"/> </figure>
Now test the page. With a little luck the image will flip.
- Load CSS before the blocks you want to manipulate.
By your own research try to add effects to your pages and posts, such as:
- even jQuery might work
Leave a Reply