SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Adding a slight light-sliding motion effect to borders w/ jQuery / JavaScript?

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Wolf_22 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Did you mean something like this.

    Modern browsers only (ie10, latest Firefox, chrome)
    Code:
    <!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.

  4. #4
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.
    Code:
    <!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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Or we could make it go in circles
    Code:
    <!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>

  7. #7
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Depending on what this is for, it might even be possible to use an animated gif. Pau's examples are pretty awesome, though.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

    AnimatedMarquee.png

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by ronpat View Post
    Here are a couple of examples that I put together
    Somehow it's turned into a png.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

    marquee16Rt.gif

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Off Topic:

    Ew, I feel sick.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Quote Originally Posted by ralph.m View Post
    Off Topic:

    Ew, I feel sick.
    Been there, too! Allow me to refer you to the top screenshot in msg #9


    Paul's code ROCKs!

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Wolf_22 View Post

    I never knew you could do something like this with CSS.
    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 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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •