Rotating border created with jQuery and a image


One of the many effects seen on TV is border animation for text boxes. For website applications this is ideal for places that the designer wants to bring people’s attention to such as a “click here to get a free quote” – Examples posted on http://wsmith-animations.cz.cc/

Here is the coding:

<style>

.rounded-corners {

-moz-border-radius: 30px; /* Firefox */

-webkit-border-radius: 30px; /* Safari, Chrome */

border-radius: 30px; /* CSS3 */

}

</style>

<div style=”position:relative; width:200px; height:200px; overflow:hidden; ” >

<img src=”light.png” style=” width:300px; height:300px; position:relative; left:-50px; top:-50px;” id=”rot”>

<!– center image in divide –>

<div style=”position:absolute; top:5px; left:5px; color:white; background:blue; width:190px; height:190px; “>

<!– overlay content on top of image so rotating image becomes border –>

</div>

</div>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js”></script&gt;
<!– cross browser CSS for rotation handled by jQuery with Canvas and VML fallbacks–>

<script src=”jQueryRotate.2.1.js“></script>

<script>

var angle = 0;

setInterval(function(){

angle+=3;

$(“#rot”).rotate(angle);},50);

</script>

Fall backs for browsers that do not support CSS image rotation are Canvas and for IE VML. Note: Canvas and VML are only able to rotate images not divides with backgrounds.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: