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.
Maybe you could use jQuery
animate()
instead of CSStransition
. Something like this:http://jsfiddle.net/743fs/1/