Animating image swap during header resize

1.8k views Asked by At

Hello people that are infinitely smarter than I.

I've been able to do the image swaps during a header resize a few different ways, using jQuery and CSS. I'm currently using the following code to resize my header:

jQuery(document).on('scroll',function(){
    if(jQuery(document).scrollTop()>50){ 
        jQuery('header').removeClass('site-header').addClass('sticky');
    }
    else{
        jQuery('header').removeClass('sticky').addClass('site-header');

    }
});

That works perfectly fine, and I've been able to sort everything else out (menu, etc)

Where I'm running into trouble, is making the transition between image swaps look "pretty".

I've tried using the example here: JS/jQuery swap image on scroll event and that works awesome, except that the image swap happens instantly and I have tried for hours and hours to make them fade, or slide to the left and top, or using CSS classes to change the opacity and display:hidden/block with transitions (but it flickers using css), or otherwise animate in some way.

But, alas, I have failed and I find that I have no other option at this point other than to ask for help.

What I'd really like to do, is emulate this: http://www.joomlashine.com/joomla-templates.html

The animation is smooth and clean and how to accomplish something like it is eluding me.

I need more reputation to post the urls to the images I'm using, but if it helps I can email them, or get them to you guys in some other way.

This is already absurdly long, but if anyone feels the need to further embarrass me, I can post all of the failed attempts I've made trying to do this ;)

Thank you all in advance!

Tyler.

2

There are 2 answers

3
Magnus Engdal On

Maybe you could use jQuery animate() instead of CSS transition. Something like this:

http://jsfiddle.net/743fs/1/

$(function () {
    $(document).on('scroll', function () {
        if ($(document).scrollTop() >= 50) {
            $('header').stop().animate({
                height: 20
            }).find('img').stop().animate({
                height: 8
            });
        } else {
            $('header').stop().animate({
                height: 80
            }).find('img').stop().animate({
                height: 60
            });
        }
    });
});
0
Tyler Ancell On

I've solved my issue. I'll post the results here for anyone encountering the same issue I had.

HTML:

<div class="container">
<header class="static">
    <a href="#" class="image">
        <img src="http://placehold.it/243x52" class="large" />
        <img src="http://placehold.it/138x38" class="small close" />
    </a>
</header>

jQuery:

jQuery(document).on('scroll',function(){
    if(jQuery(document).scrollTop()>50){ 
        jQuery('header').removeClass('static').addClass('sticky');
        jQuery('.large').addClass('close');
        jQuery('.small').removeClass('close');
    }
    else{
        jQuery('header').removeClass('sticky').addClass('static');
        jQuery('.small').addClass('close');
        jQuery('.large').removeClass('close');
    }
});

CSS:

.container{
height:750px;
background:#eee;
}
header{
width: 100%;
background: #fff;
position:fixed;
top:0;
box-shadow:0 0 5px rgba(0,0,0,0.3);
transition: all 0.2s ease-in-out;
}
header.static{
height: 90px;
}
header.sticky{
height: 50px;
background: #fff;
}
.large,.small{
transition: all 0.4s ease-in-out;
position:absolute;
left:0;
}
.large{
top:15px;
width:243px;
height:52px;
}
.small{
top:5px;
width:138px;
height:38px;
}
.close {
width:0;
height:0;
opacity:0;
}

And here is the fiddle http://jsfiddle.net/7V6H3/7/