HTML
<div class="header">
<div class="container">
<div class="column col-half">
<h1>Animated Header</h1>
</div>
<div class="column col-half">
<nav>
<a href="#">Features</a>
<a href="#">Offers</a>
<a href="#">About</a>
<a href="#">Shop</a>
</nav>
</div>
</div>
</div>
<div class="content">
<!-- Top Navigation -->
<div class="codeconvey-top clearfix">
<a href="http://codeconvey.com/Tutorials/animated-header-on-scroll/"><span>Check out Demo</span></a>
<span class="right"><a href="http://codeconvey.com/nice-scroll-animated-header/"><span>Checkout Complete Article</span></a></span>
</div>
<div class="container">
<header>
<h2>Shrink & Resize on Scroll <span>Subtle and modern shrink header effect</span></h2>
<p><strong>Please Scroll Down</strong></p>
</header>
</div>
<section>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla pulvinar porttitor. Duis viverra ante ut odio accumsan, ac bibendum dolor consequat. Ut id dolor maximus, dapibus massa et, condimentum tortor. Vestibulum non dictum mauris. Pellentesque pellentesque mi at diam iaculis, nec mattis mi bibendum. Ut commodo lacus aliquet, lacinia lectus in, lacinia ligula. Etiam hendrerit dui sed dui gravida, sed pretium tortor lobortis. Sed consectetur nisi sed sapien facilisis vestibulum in nec risus. Maecenas scelerisque, quam id auctor egestas, risus est rutrum sapien, vitae ultrices sapien felis sed eros. </p>
</div>
</section>
<section>
<div class="container">
<p>Donec fringilla pretium pretium. Ut id vestibulum nulla. Vivamus elit quam, congue vel faucibus ac, gravida vel arcu. Sed vitae urna mauris. Mauris porttitor, magna quis pellentesque maximus, tortor nunc porttitor neque, semper elementum lectus ligula at velit. Proin convallis dolor volutpat diam placerat, ut vestibulum odio condimentum. Ut blandit id tellus eu porttitor. Curabitur maximus nunc et eros sodales, a sollicitudin ligula eleifend. Nunc metus velit, rutrum ac sapien ac, pretium bibendum libero. Integer tincidunt suscipit blandit. Donec id metus feugiat, efficitur nulla ac, commodo lectus. Aenean venenatis dapibus faucibus. In non facilisis neque, non tristique libero. Nunc vehicula semper orci eu viverra.</p>
</div>
</section>
<section>
<div class="container">
<p>Donec aliquet mattis ante, at imperdiet ante pellentesque nec. Etiam mollis non arcu eget pellentesque. Fusce scelerisque turpis sed lacus congue, in faucibus libero egestas. Quisque tincidunt venenatis dui non tempor. Suspendisse diam metus, dapibus sed interdum vitae, sagittis et arcu. Proin ac fringilla magna. Integer finibus, neque vitae dictum tristique, nulla felis dapibus quam, a tristique libero urna sit amet lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ut suscipit sem.</p>
<p>Aliquam lectus dolor, feugiat ultrices purus et, convallis molestie lectus. Fusce in neque id ante posuere pulvinar sit amet sed enim. Integer scelerisque commodo porta. Maecenas pharetra, nunc sagittis condimentum vehicula, orci dui varius sem, in viverra dui diam hendrerit nulla. Pellentesque placerat vitae ligula ac tempor. Etiam vel sagittis enim. Maecenas eu mi justo. Quisque convallis a quam nec sodales. Donec ex sapien, scelerisque sed bibendum ac, sodales eu magna. Praesent cursus leo eget magna sollicitudin laoreet vitae at augue. Donec scelerisque dolor vitae arcu tincidunt, ac dapibus mi commodo. Proin lacinia eget nibh vel lobortis. Pellentesque nibh erat, rhoncus eget neque ac, accumsan pharetra odio. </p>
</div>
</section>
</div>
CSS
f*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
}
.container{
margin:0 auto;
padding:0 12px;
}
.column{
float:left;
}
.col-half{
width:50%
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #c8bd76;
color:#fff;
z-index: 1000;
height: 200px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
line-height:normal;
}
.header.shrink {
height: 75px;
line-height:normal;
}
.header h1 {
line-height: 200px;
color: #fff;
float: left;
font-size: 2.5em;
letter-spacing: 4px;
margin: 0;
text-transform: uppercase;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
nav a {
position: relative;
display: inline-block;
margin: 15px 16px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
line-height:170px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
nav a:hover,
nav a:focus {
outline: none;
}
.header.shrink nav a{
font-size: 1em;
line-height: 46px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.header.shrink h1
{
color:#fff;
line-height:76px;
font-size:24px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.content{
padding-top:200px;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1024px;
}
}
@media only screen and (min-width:240px) and (max-width: 768px){
.column{ width:100%;}
.header.shrink {
height: auto;
}
}
/*demo purpose only*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700);
.container > header,
.codrops-top {
font-family: 'Lato', Arial, sans-serif;
}
.container > header {
margin: 0 auto;
padding: 2em 0;
text-align: center;
color: #89867e;
}
.container > header p{ margin:0;}
.container > header h2 {
font-size: 27px;
line-height: 1.3;
margin: 0;
font-weight: bold;
text-transform: uppercase;
}
.container > header span {
display: block;
font-size: 60%;
color: #ceccc6;
padding: 9px 0;
font-size: 22px;
font-weight: 300;
}
/* To Navigation Style */
.codeconvey-top {
background: #bbae5c;
text-transform: uppercase;
width: 100%;
font-size: 0.69em;
line-height: 2.2;
}
.codeconvey-top a {
text-decoration: none;
padding: 0 1em;
letter-spacing: 0.1em;
color: #fff;
display: inline-block;
padding: 12px;
}
.codeconvey-top a:hover {
background: rgba(255,255,255,0.95);
color: #716d62;
}
.codeconvey-top span.right {
float: right;
}
.codeconvey-top span.right a {
float: left;
display: block;
}
.container > section {
margin: 0 auto;
padding: 2em 0;
text-align: center;
}
section{
padding:2em 0;
}
section p {
font-size: 1.5em;
line-height: 1.5;
margin: 0;
}
section:nth-child(2n) {
background: #cdc79b none repeat scroll 0 0;
color: #fff;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1024px;
}
}
@media only screen and (min-width:240px) and (max-width: 768px){
.codeconvey-top {
text-align: center;
}
.codeconvey-top a{
display:block;
}
.codeconvey-top span.right {
float: none;
}
.codeconvey-top span.right a {
float: none;
}
}
