- This topic is empty.
July 9, 2012 at 11:57 pm #38847tomtom92Member
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:
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!July 10, 2012 at 8:36 am #105805Taufik NurrohmanParticipant
As far as I know, the
cubic-bezier()transition timing function is limited only to the numbers 0 – 1. But this works for the spring effect :D
-webkit-transition:width 0.4s cubic-bezier(0,2,0,0);
-moz-transition:width 0.4s cubic-bezier(0,2,0,0);
-ms-transition:width 0.4s cubic-bezier(0,2,0,0);
-o-transition:width 0.4s cubic-bezier(0,2,0,0);
transition:width 0.4s cubic-bezier(0,2,0,0);July 10, 2012 at 11:02 am #105812tomtom92Member
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*
- The forum ‘CSS’ is closed to new topics and replies.