almost 8 years ago from Sam Mularczyk, Designer at Thick
Hey! I'm looking for some inspiration for transitions between full-size headers and smaller, fixed versions.
Have plenty of ideas - just hard to find reference on this specific topic.
Cheers!
I like the fill / path color changes in Parakeet's fixed header logo.
I liked that one! I recreated it in a CodePen to make it easier to see what's going on, and to save for myself for use at some point :)
That's fantastic! I couldn't figure out how they got that working.
Yeah, it's pretty cool! It's really the just the css clip that's doing the magic!
He must be using midnight.js by Aerolab!
Could be, but I don't think so based on the markup — I took pretty much exactly what they had there and put it in that pen (http://codepen.io/poopsplat/pen/gpVmMy), and it seems just as simple as that!
Hey you are right, he's using the clip property, but I don't really get how that works. I'll give it a better look afterwards, looks pretty cool.
Hi! Thanks for your kind words. I wrote about how I did this effect here: https://dribbble.com/shots/2201459-Parakeet-Website – Let me know if you have any questions.
This is may be a bit of a stretch, but Rally Interactive's beta site has a stunning full-size to smaller header animation.
When you scroll down into a case study, clicking the hamburger menu reveals a submenu that feels like small to full-size header transition.
Navigating left and right between case studies shows a horizontal fill transition similar to Parakeet's fill change.
Love these clever fixed header by codrops - http://tympanus.net/Development/HeaderEffects/
Check out arlingtoncap.com. Very simple, but it works well. There's a little easter egg when you hover over the logo
That one works really well! Do you know of any resources on how to recreate something like this?
Are you referring to the header scroll effect or the hover effect on the branding? (or both!)
both! :D
headroom.js is super easy to implement and customize.
Thats possibly the nicest financial services website I've seen in a while. Kudos to them!
I always dug The Players' Tribune. Scroll up and down to see it animate.
I really like this one from the NYT Cooking http://cooking.nytimes.com/
Two that I've worked on: http://nowfe.com & http://stpso.com
Check out the homepage of Team Treehouse, they had an awesome thing going on at their fixed header.
Second that. Likewise this one
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now