Geek Answers Handbook

Snake-Like Moving Glow Around An Element

I am wondering how you can create a snake effect around the rim of an object using javascript / css.

This effect will create a constantly moving animation around the object, which looks like a tiny white slug moving along the edge of the object (looking like a glow).

(Will edit this question as soon as I find out the correct wording)

+8
javascript html css
source share
5 answers

I have a small version of CSS3:

A small container and our snake:

<div id="cont"></div> <div class="snake"></div>

And here is 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]

+7
source share

Maybe it can help

The code below moves a point within the specified boundaries. Please see: that by adjusting the width and height of the same point, you can have a snake like a creature. Look at 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 the point within the specified boundaries. Note: that by adjusting the width and height of the same point, you may have a snake creature

+3
source share

This is where @Starx's answer improves. I made the #snake size independent of the measurement and gave a shadow effect with a shadow box. 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; } }

A few snakes :-)

+2
source share

Scramble after quick google in javascript / css3 animation.

check out this demo

This previous stackoverflow question has a border glow effect.

stack overflow

you can also use javascript animation library like createjs. http://www.createjs.com/#!/TweenJS

+1
source share

Create four images that must be exactly larger than the element, so when you look at it, the element is the foreground against a background that has “shaky” borders.

Create one with a fixed color. And make it "evil" around the borders. Make sure it is slightly larger than the element itself.

The following image should be a different color, which is easier to create a glow effect.

The next image should be the color used in the first image, but in exactly the opposite way. All crests in the first image must be hollows here (to make it evil).

The fourth image again coincides with the third, but with a lighter color.

Now, using jQuery, use the "animation" and change the background of the element and move it between the four images in that order. This creates the effect of "glow and crawl effect."

You can expand it beyond four images, add more to increase the effects.

0
source share

More articles:


All Articles