Helix Rebound
keyboard shortcuts: ← previous shot → next shot L or F like
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
111,925,944,460 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
4 Responses
Coded up a live version of Andrey's shot using some css3 animations. See the live version here.
12 months ago
Pro
Maciej Jasiński
this... just rocks :D can't stop starring at this tiny snail :D hah!
12 months ago
Pro
Davlikanoff Design
good job Maxim!
By the way, you are not the first one, here is an example from Dylan Lamers - http://www.dylanlamers.nl/projects/Helixbar/
Anyway it is nice to see my creature in action, thanks!
You both have made a small mistake, take a look at my shot and see where the helix starts moving :)
12 months ago
@Andrey Thanks mate.
The reason why the helix starts moving from where it does is due to it being position center over where the progress point is. If it starts with it's tail at the position of your image it's head overlaps on to the background when it's reaches 100%.
Dylan Lamers's is definitely more accurate to your shot. I used this as an test of css3 properties rather than using images (expect for the Helix), unfortunately css3 gradients aren't up to the level that photoshop can produce, or maybe it's my skills!.
12 months ago