JS button transitions

[AsteroidMonkey]

Hi,

I’m looking to do similar to the button changes in this website. Its the large buttons at the bottom of the page that say “IT & OT Convergence” etc.

I’m assuming they’re done with JS, has anyone seen a tutorial on how to do a similar state change?

Cheers,
Marc

[Paulie_D]

They are done with JS but it could be done with pure CSS.

There are many tutorials on CSS transitions and JS animations….Google is your friend.

[Chromawoods]

This site in particular that you are mentioning are using a very simple technique, in which the panels are absolutely positioned with bottom:0. Then, they use jQuery’s slideDown/slideUp, which actually pushes the content upwards when using slideDown because of the bottom:0 positioning.

Made a pen if you’re interested

[Chromawoods]

That being said… yeah it could be done with CSS transitions I guess. :)

[Chromawoods]

Just updated the pen. Now there’s also a CSS solution in there. But I think IE 9 and lower will not like it.

[AsteroidMonkey]

Cheers Chromawoods! Really appreciate your help on that :)

[Author]

Posts