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.

Community
  • 1
  • 1
Tyler Ancell
  • 35
  • 6

2 Answers2

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
            });
        }
    });
});
Magnus Engdal
  • 5,446
  • 3
  • 31
  • 50
  • Hi Magnus, I should have posted this earlier. This is my current working code http://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. http://www.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. – Tyler Ancell Jan 28 '14 at 23:55
  • I cant edit my comment, here's an updated fiddle: http://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. – Tyler Ancell Jan 29 '14 at 00:46
  • I got it working here: http://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. – Tyler Ancell Jan 29 '14 at 01: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/

Tyler Ancell
  • 35
  • 6