Animated header on scroll in Angular

Posted By : Gaurav Arora | 28-May-2018

angularjs

In this blog, we will create an animated header on Scroll in Angular.

Nowadays in every single application, we can see many animated effects on the content of the page, whether it’s text, image or header. You might have seen many web applications when header comes with an animated effect. In this blog, we will be going to create the same in angular. What we will do is we will shrink the header on the scroll so that it's looking more elegant which adds more creativity to the User Interface of the application, also it makes the web journey of the user more interesting.

We will start by creating the HTML for the header.

Now we will add the class on the header with the help of ngClass

What this will do is, this will add the class header-big on the header when the value of boolean shrinkHeader is false i.e. on default and add the class header-small to it when the value of shrinkHeader is true i.e. on scroll else it will remove it.

Now we will define some css for the header.

       header {
           width: 100%;
           background-color: #ccc;
           position: fixed;
           top: 0;
           left: 0;
           -webkit-transition: 0.2s linear all;
           -moz-transition: 0.2s linear all;
           -o-transition: 0.2s linear all;
           transition: 0.2s linear all;
       }
      
       .header-big {
           height:120px;  
       }
      
       .header-small {
          height:60px;
       }

Now we will define the function for animating the header in out component file. We will write the animated header code in window.scroll function as it is required at the time of scrolling the page

Here I have taken class level boolean variable shrinkHeader, which is false by default

       export class AppComponent {
           shrinkHeader : boolean = false;
          
           ngOnInit() {
               this.animateHeader();
           }
          
           animateHeader() {
               window.onscroll = () => {
               if (window.pageYOffset > 120) {
                   this.shrinkHeader  = true;
               } else {
                   this.shrinkHeader  = false;
               }
               }
           }
          
           }

Here the default value of shrinkHeader is false, at the time of scrolling when a user reaches the pageYOffset greater than 120 than our function will work and when the page is scrolled at top header will get back to its original height.

In this way, we can create Animated Header on scroll using Angular.