CODEWITHSUNDEEP
htmlcsscss-transitionscss-animations
tdrsam
tdrsam

Reputation: 527

Smoothly animating a header

I'm trying to make something similar to one of those headers that reduces in size and has an element slide when the page starts scrolling down. The difference is that most of those kinds of headers that I've seen have a single large header with a background-color, and my client wants the logo to be in a separate space to the nav-bar. There's a blank space at the top with just the logo in it, then there's the nav-bar which has a background-color. So I'm trying to make the nav-bar stick to the top on scroll and slide the logo into a different position. I've tried animations and transitions but it's still really jarring on scroll.

Here's some current code that uses jQuery to add css classes on scroll, then positions the elements differently. I'm actually using sass and haven't changed it to regular css.

Html:

<header>
<a href="index.php"><img src="images/logo.png" width="170" height="68" /></a>
<nav>
<ol>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="gallery.php">Gallery</a></li>
</ol>
</nav>
</header>

JS:

$(window).scroll(function() {
  if ($(this).scrollTop() > 80){
$('nav').addClass("scroll");
$('header img').addClass("logoScroll");
}
else{
$('nav').removeClass("scroll");
$('header img').removeClass("logoScroll");
}
});

SASS:

header{
 width: 100%;
img{
margin-left:68%;
}}

 nav{
 padding:5px;
 z-index:2;
 background:#571189;
 font-size:1.3em;
 }

.scroll {
position:fixed;
top:0;
width:100%;
}

.logoScroll{
position:fixed;
top:0;
right:4%;
z-index:3;
zoom:0.6;
transition: all 0.4s ease;
}

Upvotes: 1

Views: 3677

Answers (1)

Saurabh Sonawane
Saurabh Sonawane

Reputation: 951

For smooth transition of header and image/logo, what you have to do is, bind those tags to Jquery Scroll event and add and remove classes accordingly.

Check this fiddle here

For smooth logo transition, try to use CSS3 translate property with some transition.

Sample HTML

<header>
    <img src="https://unsplash.it/100/50">
    <h4>Scroll below</h4>
</header>

Sample CSS

header{
    padding:20px;
    background:#111; 
    width:100%;
    position:fixed;
    -webkit-transition: all 0.35s;
       -moz-transition: all 0.35s;
            transition: all 0.35s;}

.nav-collapse{
    padding:0}

img{
    -webkit-transition: all 0.35s;
       -moz-transition: all 0.35s;
            transition: all 0.35s;
    float:left}

img.translate{
    -ms-transform: translate(250px,0px);
    -webkit-transform: translate(250px,0px);
            transform: translate(250px,0px)}

h4{color:#FFFFFF; float:right:display:inline-block}

Sample Jquery

$(window).scroll(function() {
    if ($("header").offset().top > 50) {
        $("header").addClass("nav-collapse");
        $("img").addClass("translate");
   } else {
        $("header").removeClass("nav-collapse");
        $("img").removeClass("translate");
    }
});

Updated fiddle - another variant

Upvotes: 2

Related Questions