Using jQuery (JavaScript), is it possible to make a border have a gradient that slowly slides along the border’s path clockwise? I once saw a border that had this effect and it looked nice but I believe it was accomplished with Flash… Ever since then, I’ve been unable to find anything jQuery-based (or even just JavaScript-based) that can do this.
I would think that it’s only viable by making extensive use of CSS, and using some javascript to help control things.
I suggest that we find out first how easy it is for CSS to achieve some form of marquee lights technique.
HI,
Did you mean something like this.
Modern browsers only (ie10, latest Firefox, chrome)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.border:after {
content:" ";
position:absolute;
background-color:red;
top:0;
bottom:0;
z-index:1;
left:0;
width:50px;
background: rgb(249,66,49);
background: -moz-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(249,66,49,1)), color-stop(50%, rgba(41,137,216,1)), color-stop(54%, rgba(32,124,202,1)), color-stop(100%, rgba(2,131,229,1)));
background: -webkit-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: -o-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: -ms-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f94231', endColorstr='#0283e5', GradientType=1 );
-webkit-animation:spin 2s infinite;
-webkit-animation-timing-function:linear;
-webkit-transform-origin:200% 50%;
-moz-animation:spin 2s infinite;
-moz-animation-timing-function:linear;
-moz-transform-origin:200% 50%;
-ms-animation:spin 2s infinite;
-ms-animation-timing-function:linear;
-ms-transform-origin:200% 50%;
animation:spin 2s infinite;
animation-timing-function:linear;
transform-origin:200% 50%;
}
@-webkit-keyframes spin { from {
-webkit-transform:rotate(0deg);
}
to { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes spin { from {
-moz-transform:rotate(0deg);
}
to { -moz-transform:rotate(360deg); }
}
@-ms-keyframes spin { from {
-ms-transform:rotate(0deg);
}
to { -ms-transform:rotate(360deg); }
}
@keyframes spin { from {
transform:rotate(0deg);
}
to { transform:rotate(360deg); }
}
.border {
width:200px;
height:200px;
background:#0682e1;
position:relative;
overflow:hidden;
}
.inner {
position:absolute;
left:5px;
right:5px;
top:5px;
bottom:5px;
z-index:2;
background:#fff;
}
</style>
</head>
<body>
<div class="border">
<div class="inner"></div>
</div>
</body>
</html>
It’s css only and rotates a square element in a circular motion that has a gradient so one edge only appears to show. The middle section is blanked out with a white div to make the effect look like a border.
Don’t know how usable it will be as you have to adjust it fit etc.
Paul, that’s essentially it. But could something like that be done using only 1 markup element without being forced to transpose one layer over another?
Hi,
You could lace the extra element using :before but you would still need the inner content to be contained in elements so that you could raise the z-index or the white overlay will sit on top.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.border:after {
content:" ";
position:absolute;
background-color:red;
top:0;
bottom:0;
z-index:1;
left:0;
width:50px;
background: rgb(249,66,49);
background: -moz-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(249,66,49,1)), color-stop(50%, rgba(41,137,216,1)), color-stop(54%, rgba(32,124,202,1)), color-stop(100%, rgba(2,131,229,1)));
background: -webkit-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: -o-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: -ms-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f94231', endColorstr='#0283e5', GradientType=1 );
-webkit-animation:spin 2s infinite;
-webkit-animation-timing-function:linear;
-webkit-transform-origin:200% 50%;
-moz-animation:spin 2s infinite;
-moz-animation-timing-function:linear;
-moz-transform-origin:200% 50%;
-ms-animation:spin 2s infinite;
-ms-animation-timing-function:linear;
-ms-transform-origin:200% 50%;
animation:spin 2s infinite;
animation-timing-function:linear;
transform-origin:200% 50%;
}
@-webkit-keyframes spin { from {
-webkit-transform:rotate(0deg);
}
to { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes spin { from {
-moz-transform:rotate(0deg);
}
to { -moz-transform:rotate(360deg); }
}
@-ms-keyframes spin { from {
-ms-transform:rotate(0deg);
}
to { -ms-transform:rotate(360deg); }
}
@keyframes spin { from {
transform:rotate(0deg);
}
to { transform:rotate(360deg); }
}
.border {
width:200px;
height:200px;
background:#0682e1;
position:relative;
overflow:hidden;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.border:before {
content:" ";
position:absolute;
left:5px;
right:5px;
top:5px;
bottom:5px;
z-index:2;
background:#fff;
}
.border * {
position:relative;
z-index:3;
}
p,h2 {
margin:0 0 1em;
padding:5px 10px;
text-align:center;
}
</style>
</head>
<body>
<div class="border">
<h2>Heading</h2>
<p>Test</p>
</div>
</body>
</html>
There is no real extra markup as the section is contained in a div and then contains semantic elements as it should.
Or we could make it go in circles 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.border:after {
content:" ";
position:absolute;
background-color:red;
top:0;
bottom:0;
z-index:1;
left:0;
width:50px;
background: rgb(249,66,49);
background: -moz-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(249,66,49,1)), color-stop(50%, rgba(41,137,216,1)), color-stop(54%, rgba(32,124,202,1)), color-stop(100%, rgba(2,131,229,1)));
background: -webkit-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: -o-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: -ms-linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
background: linear-gradient(45deg, rgba(249,66,49,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 54%, rgba(2,131,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f94231', endColorstr='#0283e5', GradientType=1 );
-webkit-animation:spin 2s infinite;
-webkit-animation-timing-function:linear;
-webkit-transform-origin:200% 50%;
-moz-animation:spin 2s infinite;
-moz-animation-timing-function:linear;
-moz-transform-origin:200% 50%;
-ms-animation:spin 2s infinite;
-ms-animation-timing-function:linear;
-ms-transform-origin:200% 50%;
animation:spin 2s infinite;
animation-timing-function:linear;
transform-origin:200% 50%;
}
@-webkit-keyframes spin { from {
-webkit-transform:rotate(0deg);
}
to { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes spin { from {
-moz-transform:rotate(0deg);
}
to { -moz-transform:rotate(360deg); }
}
@-ms-keyframes spin { from {
-ms-transform:rotate(0deg);
}
to { -ms-transform:rotate(360deg); }
}
@keyframes spin { from {
transform:rotate(0deg);
}
to { transform:rotate(360deg); }
}
.border {
width:200px;
height:200px;
background:#0682e1;
position:relative;
overflow:hidden;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}
.border:before {
content:" ";
position:absolute;
left:5px;
right:5px;
top:5px;
bottom:5px;
z-index:2;
background:#fff;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}
.border * {
position:relative;
z-index:3;
}
p, h2 {
margin:0 0 1em;
padding:5px 10px;
text-align:center;
}
.border2 {
width:400px;
height:400px;
}
.border2:after { left:24% }
</style>
</head>
<body>
<div class="border">
<h2>Heading</h2>
<p>Test</p>
</div>
<div class="border border2">
<h2>Heading</h2>
<p>Test</p>
</div>
</body>
</html>
Totally awesome, Paul. Thank you for your help!
I never knew you could do something like this with CSS. Would you think the best way to do something like this is with this approach? Would there be any advantages of a scripted approach over this? (I’m just curious if there even is one because I can’t recall ever seeing anything like this be done with jQuery / JavaScript.)
Depending on what this is for, it might even be possible to use an animated gif. Pau’s examples are pretty awesome, though.
Paul’s code is TOTALLY awesome!!!
Yes, it can be done with animated gifs, but I wouldn’t recommend it even if you have lots of time and patience.
Here are a couple of examples that I put together a couple of years ago just for fun.
The top one rotates clockwise; the bottom one rotates clockwise on the right half and counter-clockwise on the left half.
Somehow it’s turned into a png.
<chuckle> Yes, that is just a screen shot of the “designs”. The tags are table code supported by stylesheets written for 6 sets of dimensions. The dimensions are critical for maintaining the “flow”, which means it is not easily resized.
It was a personal challenge to see if I could create a marquee effect with a gif. It was an interesting experiment that works reasonably well as designed, but I wouldn’t do it again. “Reasonably well” means that I’ve seen the timing shift by one animated dot when the browser loses synch with the gif animation (sluggish Firefox).
Just because it can be done, doesn’t make it practical. Maybe with some modern code… Nah.
Rotate the gif in your favorite graphics program to make segments that flow in all 4 directions.
Off Topic:
Ew, I feel sick. 
Off Topic:
Been there, too! Allow me to refer you to the top screenshot in msg #9
Paul’s code ROCKs!
You can do lots of things with CSS these days and as Chrome, Firefox and IE10 have good support form transitions and animation. Indeed some people [URL=“http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/”]can do impossible things with CSS only.
It’s not always practical though if there are simpler or better methods available so you have to make a choice based on the project.
As Ralph pointed out an animated gif could do the same (but of course you couldn’t easily change the size as easily).