Menu
I am wondering how can you build a "snake like" effect around the rim of an object using javascript/css.
This effect will create an ever going animation around an object that looks like a tiny white slug moving on the rim of the object (looking like a glow)
(Will Edit this Question once I learn the correct phrasing)
807
I have a small CSS3 version of this:
A small container and an our snake:
<div id="cont"></div>
<div class="snake"></div>
And here is the CSS Magic:
#cont {
width: 150px;
height: 150px;
background: #000;
margin: 10px;
}
.snake {
width: 5px;
height: 5px;
background: #f00;
position: absolute;
top: 5px;
left: 15px;
animation: around 5s infinite;
}
@keyframes around
{
0% { left: 15px; top: 5px; }
25% { left: 165px; top: 5px; }
50% { top: 160px; left: 165px; }
75% { left: 15px; top: 160px; }
100% { top: 5px; left: 15px; }
}
[Demo]
66
Probably this might help
The code below moves a dot within the specified borders. Please see : that by adjust the width and height of the same dot you may have a snake like creature Have a look at the Fiddle
<html>
<head>
<style>
#midDiv{
float:left;
width: 100px;
height: 100px;
background:rgb(0,0,0);
}
#topDiv,#bottomDiv{
float:left;
width: 110px;
height:5px;
background: red;
position:relative;
}
#leftDiv, #rightDiv{
width:5px;
float:left;
height: 100px;
background: blue;
position:relative;
}
#bodyWrapper{
width: 120px;
height: 120px;
}
#centerDiv{
float:left;
}
.animateObject{
z-index:2;
background: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#topDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#rightDiv").append(div);
$(div).css({position: "absolute"});
$(div).animate({
top: 100
},
2000, function(){
$("#rightDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#rightDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#bottomDiv").append(div);
$(div).css({position: "absolute", right: 0});
$(div).animate({
right: 100
},
2000, function(){
$("#bottomDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#bottomDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#leftDiv").append(div);
$(div).css({position: "absolute", bottom: -5});
$(div).animate({
bottom: 100
},
2000, function(){
$("#leftDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#leftDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#topDiv").append(div);
$(div).css({position: "absolute", left: 0});
$(div).animate({
left: 105
},
2000, function(){
$("#topDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#topDiv").trigger({type: "animcomplete", time: new Date() });
});
</script>
</head>
<body>
<div id="bodyWrapper">
<div id="topDiv"></div>
<div id="centerDiv">
<div id="leftDiv"></div>
<div id="midDiv"></div>
<div id="rightDiv"></div>
</div>
<div id="bottomDiv"></div>
</div>
</body>
This moves a dot within the specified borders. Please see : that by adjust the width and height of the same dot you may have a snake like creature
33
Here's an improvement on @Starx answer. I've made the #snake dimension-independent, and gave it a glow effect with box-shadow. Demo
<div id="cont">
<div class="snake"></div>
</div>
#cont {
/* some dimensions */
position: relative;
}
.snake {
position: absolute;
z-index: -1;
width: 0px;
height: 0px;
background: #f00;
border-radius: 5px;
box-shadow: 0px 0px 15px 15px red;
animation: around 4s linear infinite,
glow .7s alternate-reverse ease-in-out infinite;
}
@keyframes around {
0% { left: 0; top: 0; }
25% { left: 100%; top:0; }
50% { left: 100%; top: 100%; }
75% { left: 0; top: 100%; }
100% { left: 0; top: 0; }
}
@keyframes glow {
0% { opacity: .2; }
100% { opacity: 1; }
}
Multiple snakes :-)
34
Hay after having a quick Google at javascript/css3 animaition.
have a look at this demo
This previous question on stackoverflow deals with a border glow effect.
https://stackoverflow.com/questions/15008931/animated-glowing-border-using-css-js link
you could also uses a javascript animation library such as createjs . http://www.createjs.com/#!/TweenJS
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
