Header Scroll Animation
In this ever revolutionising industry, there is constant innovation happening that keeps us wondering how small enhancements can make our life easier and smoother. Same hold true when it comes to innovations that improve user experience over the web/mobile.
Every now and then, 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 blog, I would like to elaborate on one such creativity, which is Header Scroll Animation.
Here is the description to create a header scroll animation :-
1) Here is the HTML Code:-
[java]
<body>
<div class="header">
<div id="header-scroll"> <h1>Header Scroll Effect</h1></div>
</div>
</body>
[/java]
2) Here is the CSS code:
[java]
<style type="text/css">
.header {
height:800px;
}
#header-sroll {
position:fixed;
height: 100px;
background:#ccc;
left:0;
top:0;
float:left;
width:100%;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#header-sroll h1 {
font-size: 30px;
font-family: Arial;
text-align: center;
line-height: 50px;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#header-sroll.small {
height: 70px;
line-height: 35px;
}
#header-sroll.small h1{
height: 70px;
line-height: 35px;
font-size: 25px;
}
</style>
[/java]
3) And finally, let’s have a look at the jQuery code given below:
[java]
<script>
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc > 0) {
$("#header-scroll").addClass("small")
} else {
$("#header-scroll").removeClass("small")
}
});
</script>
[/java]
The final section that above has the JQuery Code which will add the class named “small”. When this class is added with id “header-scroll” the header scroll animation renders.
