How to add Cool Features Like Chameleonic Header and Smooth Scroll to your Web Projects?

Every front-end developer’s goal is to create a multi functioning, easy-to-navigate, and aesthetically appealing front-end design for website and web/mobile apps. It might seem very basic but the effort that goes into building such a front-end requires a lot of patience, efforts such as writing repetitive and time consuming coding processes and Pure CSSPure CSS

A set of small, responsive CSS modules that you can use in every web project.

for smooth scrolling.

HTMLHTMLHypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript., CSSCSSCascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript., & JavaScriptJavaScriptJavaScript, often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.are the predominant languages for any newbie front-end developer to learn. With these technologies, you can get your hands dirty on building the front-end of websites and web apps. CSS unpacks a distinctive cascading structure, and it is easy to understand and follow. When you get your hands on CSS and start experimenting with it, be prepared for the complexities you are about to create. We will be using CodyFrameCodyFrameCodyFrame is a lightweight front-end framework for building accessible, bespoke interfaces.as our default front-end framework to develop a chameleonic header.

Enabling Chameleonic Header:

You can enable chameleonic header using the clip-path CSS property. The idea behind the implementation is to replicate the main header under every <section> tag of the page. Each replicated header will adapt to the style of the section it belongs to.

All replicated header should be placed at the top of the page with fixed position. You can then use the clip-path property as a clipping region for each header and use them to style the section element it belongs to. As a result, a header will be visible only when it is in the parent section and you get the transition effect you wanted between the headers with different colors.

Let’s start replicating the header inside different sections of the page.

<section class="position-relative">

    <header class="cha-header">

  <div class="cha-header-clip">

    <div class="menu-primary-menu-container"><ul id="primary-menu" class="menu nav-menu">

<li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172">Company</li>

<li id="menu-item-367" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-367">Services</li>

<li id="menu-item-366" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-366">Expertise</li>

<li id="menu-item-368" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-368">Technologies</li>

<li id="menu-item-369" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-369">Spots</li>

</div>

    </header>

  </div>

  <!-- section content here -->

</section>

<section class="position-relative" data-theme="dark">

  <div class="cha-header-clip" aria-hidden="true">

    <header class="cha-header">

      <!-- header content -->

    </header>

  </div>

  <!-- section content here -->

</section>

<!-- other sections here -->

You can witness for yourself that the replicated headers have the attribute aria-hidden equals to true. Hence, your browsers can understand your command. In order to prevent users, who scroll using keyboard, from scrolling all the header items, a tab index of -1 should be added to each tabbable child. We leverage data-theme values to the section to change the style of each section and header element. The data-theme is inherited later on by the header.

You can override the CSS color variables within the components using data-theme. For more details about playing around with color themes in the CodyFrame framework, click here.

You can place all the replicated headers at the top of the page.

.cha-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1;

}

In the last step, we are going to enable a header only when it is present inside the parent <section> element.

Though the overflow property has no effect on child header with fixed position, you can still achieve the desired output using clip-path property. For that, let’s add a position absolute property to the .cha-header-clip element and modify its dimensions to ensure it covers the section element area completely.

.cha-header-clip {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  pointer-events: none;

}

You can now use the clip-path property to set the full .cha-header-clip region.

.cha-header-clip {

  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

}

Now, we have replicated the header successfully and they will be read by the browser only when they are inside the parent <section> and thus creates a clipping effect on scroll.

Enabling Smooth Scroll:

We can enable Smooth Scrolling with the help of Pure CSS frameworks. It is easy with Pure CSS and only requires a single line of code. We will look into the code later on and understand what happens when we use the code. As a web developer, you will be required to implement smooth scrolling on web projects so that the end-users won’t feel jitters in the content. You can achieve the same results with JavaScript but it takes several lines of codes.

Here’s an example with JavaScript

$('a[href*="#"]')

  // Remove links that don't actually link to anything

  .not('[href="#"]')

  .not('[href="#0"]')

  .click(function(event) {

    // On-page links

    if (

      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')

      &&

      location.hostname == this.hostname

) {

      // Figure out element to scroll to

      var target = $(this.hash);

      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

      // Does a scroll target exist?

      if (target.length) {

        // Only prevent default if animation is actually gonna happen

        event.preventDefault();

        $('html, body').animate({

          scrollTop: target.offset().top

        }, 1000, function() {

          // Callback after animation

          // Must change focus!

          var $target = $(target);

          $target.focus();

          if ($target.is(":focus")) { // Checking if the target was focused

            return false;

          } else {

            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable

            $target.focus(); // Set focus again

          };

        });

      }

  }

 });

But with Pure CSS, you can do it easily without any hassle. Whether you want your users to go to a particular section of the page straight up or smoothly, depend on the scroll-behavior property in CSS. The property accepts two values that help to juggle between the above mentioned scroll-behavior.

Example CSS Code

.module {

  scroll-behavior: smooth;

}

Syntax of the CSS Code

scroll-behavior: auto;

scroll-behavior: smooth;

Values:

Smooth: This value to the scroll-behavior property enables smooth scrolling with a user-agent-defined timing.

Auto: The scrolling box scrolls quickly in no time.

According to Mozilla, this property doesn’t interfere when a user wants to scroll to some other parts of the web page. So, when you specify this property on the root element, it applies to the viewport. However, it will not apply to the viewport if you specify it in the body element and users can ignore this property and scroll according to their wants.

See the Pen Smooth Scroll by Hanush (@hanushk) on CodePen.

We have achieved chameleonic header and smooth scroll using two different frameworks CodyFrame and Pure CSS. Since the front-end of a web project directly influences the end-user in making decisions, these aesthetic elements make a significant appeal in positioning a brand on the end-user minds.

We, at TechAffinity, have expert front-end developers who are familiar with CSS frameworks, CSS preprocessors and CSS properties. If you have further queries in improving the aesthetic aspects of a front-end development project, feel free to shoot your emails to media@techaffinity.com. Otherwise, you can schedule a meeting with our experts for yourself.

Get in Touch