MOUSE OVER ME PLEASE!
Content is the integral part of every website and they are usually kept simple.
Well, if we choose to indulge in creating simple yet impressive/chic website, guess we can create/work on a couple of enhancements/variations/effects on texts too, isn’t it.
Yes, if you are also interested in receiving a couple of tips on vector/graphics animation, click here.
This tutorial will teach simple transition effect that you just experienced above.
Style given to the above text effect is as:
|
.text1{
color:#009999;
font-family:Arial, Helvetica, sans-serif;
font-size:50px;
font-weight:bold;
-webkit-transition-property:color, text;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
-moz-transition-property:color, text;
-moz-transition-duration:1s;
-moz-transition-timing-function: linear, ease-in;
-o-transition-property:color, text;
-o-transition-duration:1s;
-o-transition-timing-function: linear, ease-in;
}
.text1:hover{color:#003399;
}
|
Explanation of the above style
‘-webkit-transition-property’ helps us to provide transition between the colors.
‘-webkit-transition-timing-function’ is a mathematical function that is used to produce a smooth transition (Linear, Ease-in, Ease-out). This is commonly known as easing function. We can use constants to specify preset points of the curve or the cubic-bezier function to specify your own points.
According to the above code, on rollover / mouseover, the transition takes place linearly, whereas on rollout the transition style is ease-in. The timing function is specified using a cubic Bezier curve. You can have a detailed information regarding the cubic bezier function from http://www.dr-mikes-maths.com/. This property allows a transition to change speed over its duration.
‘-webkit-transition-duration property’ helps specify the duration at which we would like the color change transition to take place.
Similarly ‘-moz’ and ‘-o’ property tags should work for mozilla and IE browsers respectively.
To make best of your learning, check our work. It should give you some inspiring ideas on what you can try next.
You can also write to me at jayanthi at imajineweb dot com.
Thank you so much for taking time and going through this tutorial, Hope it has been helpful to you.
Are you creating animated gifs in tools like Photoshop / Fireworks and wondering why you have not been able to create that smooth easing effect despite of so much hard…
Read More