Banner animation on page load

Add a slide from top banner animation to all your pages with a few lines of code

Created by

Code & Wander

Code

<!-- Banner Animation by Code & Wander https://www.codeandwander.com/ -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const banner = document.querySelector('.banner'); // Change to match your class

  if (banner) {
    banner.animate([
      { transform: 'translateY(-100%)' }, // Starting position
      { transform: 'translateY(0)' }
    ], {
      duration: 300, // Animation duration in milliseconds
      easing: 'ease-in-out', // Easing function
      fill: 'forwards' // Keeps the animation state after finishing
    });
  }
});
</script>

Copied!

Tutorial

Steps & Description

Step 1

Copy and paste the above code in the before </body> tag.

‍

Step 2

Adapt the code to your design:

Change the classes to match yours
Change the starting position
Change the easing and speed

Tips & Notes

Related resources

Code Tricks

Show popup once

Set a cookie so the banner only shows once.