Hi all,

 

Another extreme jquery novice here looking for advice.

 

I have a header which features a logo and an unordered list. When the page scrolls I would like to shrink the logo's size and the line height of the list.

 

I have achieved this, using the code below.

<script>
$(document).ready(function(){
  $('header').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 50)
{
    if($('header').data('size') == 'big')
    {		
        $('header').data('size','small');
		
	$('nav ul li a').stop().animate({'line-height':'55px'},600);
        $('header').animate({height:'61px'},600);
	$('header img').animate({width:'100px'},600);
    }
}
else
  {
    if($('header').data('size') == 'small')
      {
        $('header').data('size','big');
		
	$('nav ul li a').stop().animate({'line-height':'160px'},600);
	$('header').animate({height:'184px'},600);
	$('header img').animate({width:'300px'},600);
		
      }  
  }
});
</script>

Now I just don't link the way the line height gets adjusted only after the logo width.

Ideally I think it would look best if the line-height changed first, then the logo.

Or maybe even both at the same time if that's possible.

 

Is anyone able to shed some light on what I'm missing? Any advice would be greatly appreciated.

 

Thanks for your time.

You can use delay() for to start different animations in different time. Or use GSAP tool.

Edited January 18, 201511 yr by fleur

You can use delay() for to start different animations in different time. Or use GSAP tool.

 

Delay is a good one, I'd say delay the nav transition for 600ms (or for the same time you're having the header and logo transitions for).

$('nav ul li a').delay(600).animate({'line-height':'160px'},600);

Another way is using setTimeout, but I think delay is better in your case

or use the complete callback function

$('nav ul li a').animate({ 'line-height': '160px' }, 600, function() {
  $('header img').animate({width:'300px'},600);
});

http://api.jquery.com/animate/

Edited January 18, 201511 yr by Wynn

Thanks a lot for the advice! I didn't realise delay existed and that seems simple enough.

Callbacks seem interesting though, I'd guess I'm going to want to be using that process a lot more in future so perhaps I should start now.

 

Much appreciated.

Callback as wynn suggested is by far the more robust solution. This is exactly what they are intended for.

Also .animate is horribly inefficient. Either use addClass then use that to trigger a transition in your CSS. Or use a library like Velocity to animate efficiently through its JavaScript methods.

 

Fleur- this simple transition isnt worth loading the whole gasp library for. Its intended uses are more complex than this, and it adds unecessary page weight in this case.

 

@@teodora IIRC the jQuery delay method actually uses SetTimeout and returns the jQuery object as a callback.

Edited January 21, 201511 yr by rbrtsmith

@@teodora IIRC the jQuery delay method actually uses SetTimeout and returns the jQuery object as a callback.

 

Oh! I didn't know that My development logic is the less code the better :D

 

Edit: And I also think setTimeout is better used for when you need to trigger an event, if I am not mistaken.

 

 

Or use a library like Velocity to animate efficiently through its JavaScript methods.

 

Second that - velocity is great

 

To be honest I prefer js animations than pure css animations because of the browser support (yes, I have to support IE8 and sometimes even below!) and I find CSS animations not very smooth, might be just me...

Edited January 21, 201511 yr by teodora

@@teodora, generally speaking less code is better, less maintenance, less chances of bugs, so long as it doesn't sacrifice on code readability.

 

In most cases animations are just a nice have, so long as IE8 users get the functionality that is all that matters. In short animations should be used as a form of progressive enhancement. Of course if the animation is necessary then JavaScript does have the better support. Just animating things like top, left and so forth are much less efficienct than animating a translate3D. so you sacrifice the smoothness of the animation just to support older browsers. It's always a trade off of some sort, and almost always I go down the progressive enhancement route .

 

 

In what cases do you have to support below IE8? Microsoft themselves no longer support windowsXP (Which uses IE8) so I see no reason why we should, Google have also stopped IE8 support on most of their products. It's just not economically feasable to support these days imo (especially IE7)

 

I can understand for government websites, but surely even those that are under development now don't go down to the likes of IE7. Our agency ceased support for IE8 a few months back.

 

If a client were ever to question the decision then we'd show them the useages of those browsers (Most of which is in China) explain that Google and Microsoft don't support them any longer, and the added costs that would be required to support. By that time they should get the picture

Edited January 21, 201511 yr by rbrtsmith

@@rbrtsmith Mainly in cases when the client's GA reports show a high number of visitors using IE8 (just can't get rid of it!!!)

Of course not every website needs IE8 support.

 

IE7 is out of the picture, but recently I had to do a (very basic) support, because the client wanted it and paid for it. But yes, that's very rare!

 

Generally, we should stop supporting older IE.

 

 

In most cases animations are just a nice have, so long as IE8 users get the functionality that is all that matters. In short animations should be used as a form of progressive enhancement. Of course if the animation is necessary then JavaScript does have the better support. Just animating things like top, left and so forth are much less efficienct than animating a translate3D. so you sacrifice the smoothness of the animation just to support older browsers. It's always a trade off of some sort, and almost always I go down the progressive enhancement route .

 

Completely agree

I have been using scroll animations more and more, for example to attract attention to a CTA button when the user scrolls to it. If the animation is only a basic one, like move it 10px from the top for example, I would prefer just to swap CSS classes, for more complex ones I prefer js instead of css keyframes.

One thing I can add is that scroll events dont work so well on touch devices, because they only execute the callback after the scroll has finished, which makes things appear to jump on these devices. But if you use RequestAnimationFrame as your timing event (Has a frequency of 60Hz) You can use that and in the callback measure the distance scrolled, and then you get super smooth scroll events on touch devices

 

I've used this technique to make parallax work on touch devices, sticky navigations and so forth, just be careful to make sure that the code for your animation only fires if you have scrolled, otherwise it will fire constantly. You can do this by setting an initial variable and testing that against the current scroll to see if the user has scrolled or not, if they have you update the variable and execute the function.

Edited January 21, 201511 yr by rbrtsmith

That's very useful, thank you very much @@rbrtsmith!

 

I find on mobiles the whole strategy and CTAs approach changes drastically, so scroll events sometimes are not even needed!

 

Strictly technically speaking, you're right, animations and effects could be great on touch devices, if done right