0

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 Answers 2

1

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
            });
        }
    });
});
3
  • Hi Magnus, I should have posted this earlier. This is my current working code jsfiddle.net/7V6H3/1. If it were just an image resize, it would be no problem, but the issue I'm running into is swapping the images and animating them. I've got the header resizing, I've got the images swapping, but everything I try to get them to animate (smoothly, no chopping) seems to fail miserably. joomlashine.com/joomla-templates.html is really the sort of idea I'm going for, but I'm at a loss on how to do it. I do appreciate your answer though, so thank you. Jan 28, 2014 at 23:55
  • I cant edit my comment, here's an updated fiddle: jsfiddle.net/7V6H3/3 just an image position fix which can probably be done a lot cleaner, I'm just starting out in the world of jQuery so I'm trying my hardest without trying to ask for too much help along the way. Jan 29, 2014 at 0:46
  • I got it working here: jsfiddle.net/7V6H3/5 the only thing I don't know how to fix is the flickering. If anyone could help me with that, that would be amazing. The flickering only seems to happen in Chrome, surprisingly enough, it works perfectly in internet explorer. Jan 29, 2014 at 1:24
0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.