So I am writing my own site and I am having a bit of difficulty getting a transform/translation effect to work. I wanted to have a few peaking tabs on the side of my page that would pop out when hovered over. They would be used for social links like facebook and whatnot.
When I scroll over the box all three of the peaking links come out (at slightly different times) and then have a little effect that makes the logos open out the other way from where the 'arrow' is. That is just a fun effect that I wanted to try.
*My question is: How can it get it so that the arrow moves out and then back in a little as if it had a bounce/spring effect of going to far. It's a common effect (maybe not in css) that looks good. Can anyone suggest how to do this or if there is a tutorial on it. As of now I have it set up just like that link where the padding of the non-moving box increases 'pushing' the arrow away.
Let me know if this is confusing and maybe I can get a demo of what I have thus far. Thanks!
The easiest way to get something like that would be to use animation keyframes, and use a good transition type to give it a bouncing effect. Here's a link Chris Coyier did on keyframe animation.
Thanks guys, I will try this when I get time and when I get back to my code. Just to clarify, by spring effect I mean have the 'arrow' shoot out, like it does in the demo, a little far and then come back just a bit. Then when it is not hovered over anymore, it just simply retracts back (I guess linear).
All in all there will be three movement effects: 1) Have the 'arrow' slide out to reveal a blank background *I have this done* with a slight spring back effect 2) Do that slide at slightly different times for all three buttons *I have this done* 3) Have the social link button slide out the opposite direction from the arrow *I have this done*
So I am writing my own site and I am having a bit of difficulty getting a transform/translation effect to work. I wanted to have a few peaking tabs on the side of my page that would pop out when hovered over. They would be used for social links like facebook and whatnot.
As of now I hav a descent effect but it isn't what I want. The effect is similar to this one:
http://tympanus.net/Tutorials/AnimatedButtons/index4.html
When I scroll over the box all three of the peaking links come out (at slightly different times) and then have a little effect that makes the logos open out the other way from where the 'arrow' is. That is just a fun effect that I wanted to try.
*My question is:
How can it get it so that the arrow moves out and then back in a little as if it had a bounce/spring effect of going to far. It's a common effect (maybe not in css) that looks good. Can anyone suggest how to do this or if there is a tutorial on it. As of now I have it set up just like that link where the padding of the non-moving box increases 'pushing' the arrow away.
Let me know if this is confusing and maybe I can get a demo of what I have thus far.
Thanks!
link: http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
cubic-bezier()transition timing function is limited only to the numbers 0 - 1. But this works for the spring effect :Dhttp://jsfiddle.net/tovic/kw7LD/12/
All in all there will be three movement effects:
1) Have the 'arrow' slide out to reveal a blank background *I have this done* with a slight spring back effect
2) Do that slide at slightly different times for all three buttons *I have this done*
3) Have the social link button slide out the opposite direction from the arrow *I have this done*
Thanks again!