Creating a Dynamic Header Animation on a Duda Website

Incorporating dynamic elements into your website can enhance both user experience and design aesthetics. A straightforward yet powerful feature is a scrolling header that disappears as users scroll down and reemerges when they scroll up. This is especially beneficial for maintaining accessible navigation while conserving valuable screen space. Here's an overview of how it functions and how you can integrate it into your Duda website.

What Does This Code Do?

This script enhances your website header, making it both intelligent and dynamic: 

When you scroll down, the header gracefully slides out of sight, providing more room for your content. 

When you scroll up, the header reemerges, ensuring easy access to navigation links. 

This effect is accomplished by sensing the direction of the user’s scroll and applying CSS classes to the header for smooth animation.

How It Works

The JavaScript code monitors scroll events and evaluates the user's scroll position. Based on whether the user is scrolling upward or downward, it adds a scroll-up or scroll-down class to the header element. These classes initiate CSS animations that move the header in or out of view. The corresponding CSS specifies the visual behavior of the header: In its Default State, the header remains fixed at the top of the page. When scrolling down, the scroll-down class applies a transformation that conceals the header. Conversely, when scrolling up, the scroll-up class reverses the transformation, revealing the header once more.

The Code - JavaScript

<script>

    dmAPI.runOnReady('runOnReady',function(){

        let header = $('.dmHeaderContainer');

        let lastScroll = 100;

        $(window).scroll(function() {

          let currentScroll = $(window).scrollTop();

          if (currentScroll <= 100) {

            header.removeClass('scroll-up');

            return;

          }

          if (currentScroll > lastScroll) {

            header.removeClass('scroll-up').addClass('scroll-down');

          } else if (currentScroll < lastScroll) {

            header.removeClass('scroll-down').addClass('scroll-up');

          }

          lastScroll = currentScroll;

        });

    });

</script>

The Code - CSS

.dmHeaderContainer.scroll-down {

  transform: translate3d(0, -100%, 0);

}

.dmHeaderContainer.scroll-up {

  transform: none;

}

.dmHeaderContainer {

    position: fixed;

    top: 0;

    width: 100%;

    left: 0;

    z-index: 1000;

    transition: transform 0.4s;

}

How to Implement It

Add the JavaScript:

Navigate to Site Settings > Body-End html in your Duda editor.

Paste the JavaScript code.

Add the CSS:

Go to Dev Mode - Navigate to Site.CSS Folder.

Add the CSS code.

Test the Feature:

Preview your website and scroll up and down to see the header’s dynamic behavior.

Why Use This Feature?

Enhances Usability: Ensures navigation is readily accessible when required. Refines Design: Delivers a sleek, contemporary user experience. Tailorable: Modify the animation timing or look to align with your brand identity. This compact yet impactful feature can significantly boost both the functionality and visuals of your Duda website. Try it out and witness the improvement it brings!