Header Animation on Scroll with HTML/CSS

Header Animation on Scroll with HTML/CSS

by

In the era of innovations, we look forward to create smooth and user-friendly applications to make the work simple and flawless. User experience has always been given the topmost priority when it comes to designing a website. Everyday, we see advancements in UI practices that evidently improve the user experience & further, add more creativity to the interface, making the user journey more interesting & engaging.

In this tutorial we’ll create a header, as the menu bar, that sticks to the top of the viewport/ webpage. The sticky menu bar will show some animation when we scroll down.

To create this project, you have to make three files. The first one is HTML, and the second and third one in CSS and JavaScript files respectively. Please copy the code below and paste them to your project and save it to run in your preferred IDE.

Run the project to your browser and make some changes according to your needs.

Let’s get into the coding part. First we will create an HTML file and add this code.

Version 1 (Header Animation on Scroll)

Demo

Let’s run the demo and scroll down to see that the navbar sticks on the top and it has an animation when we scroll down.

See the Pen Simple header animation on scroll with JS by Arpit Mittal (@codingiseasy) on CodePen.

HTML

<body>
<div class="header">
  <h1>Animated Fixed Header (Scroll Down) 
  </h1>
  
</div>

<div class="content">
  Content Starts from here and you need give a margin equals to the height of the header. <br/>
  Developed by <a href="https://codingiseasy.com">CodingIsEasy.com</a>
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

CSS

<style type="text/css">
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #cc5350;
    color:#fff;
    z-index: 1000;
    height: 200px;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    text-align:center;
    line-height:160px;
}

.content {
  margin-top: 200px;
}

.header.shrink {
    height: 100px;
    line-height:80px;
}
.header h1
{
    font-size:30px;
    font-weight:normal;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.header.shrink h1
{
    font-size:24px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.content
{
height: 2000px;
 /*just to get the page to scroll*/
}
</style>

And finally let’s make the webpage interactive by adding JavaScript. Copy paste the code given above and see the results.

Jquery / Javascript

<script>
$(function(){
 var shrinkHeader = 300;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
           $('.header').addClass('shrink');
        }
        else {
            $('.header').removeClass('shrink');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset;
    }
});
</script>

HTML

Hope you enjoyed making this project.

Leave a Comment