The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
CSS Help
Is there a way to animate a username so that each individual letter changes colour one at a time?
For example... At first it would be like this Username Then it would be Username Then Username Etc... |
#2
|
||||
|
||||
HTML Code:
a.username strong{ background-image: linear-gradient(to left, violet, indigo, green, blue, yellow, orange, red); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; } |
#3
|
||||
|
||||
Animating a gradient using a small percentage might do the trick, if this doesn't point you in the right direction and I find some time I might type something out.
--------------- Added [DATE]1614636808[/DATE] at [TIME]1614636808[/TIME] --------------- Animations are not my thing, but this is a little closer to your desired effect. took me a whole 2 minutes to type up, and only played with the positioning for a minute before I got over it, a little fiddling I'm sure you can get it perfected how you want it. Code:
<h1 class="username animated">DrCustUmz</h1> Code:
.username { text-align: center; font-size: 25px; } .animated { background: linear-gradient(to right, #ff0000, #000); -webkit-background-clip: text; background-clip: text; color: transparent; animation: animation 15s linear infinite; background-size: 20%; } @keyframes animation { 0%,100% { background-position: 10%; } 99% { background-position: 100%; } } Exact effect, Figured out a way but dont thing it would be possible for a username, not easily atleast. Code:
<div class="username"> <span>D</span> <span>r</span> <span>C</span> <span>u</span> <span>s</span> <span>t</span> <span>U</span> <span>m</span> <span>z</span> </div> Code:
.username > span { text-transform: uppercase; animation: flash 2s ease-in-out infinite; } @keyframes flash { 0%, 100% { color: #FF0000; } 10%, 90% { color: #000; } } .username > span:nth-child(2) { animation-delay: 0.25s; } .username > span:nth-child(3) { animation-delay: 0.5s; } .username > span:nth-child(4) { animation-delay: 0.75s; } .username > span:nth-child(5) { animation-delay: 1s; } .username > span:nth-child(6) { animation-delay: 1.25s; } .username > span:nth-child(7) { animation-delay: 1.5s; } .username > span:nth-child(8) { animation-delay: 1.75s; } .username > span:nth-child(9) { animation-delay: 2s; } |
Благодарность от: | ||
Irishnotsane |
#4
|
|||
|
|||
Thanks for the replies..
We did have the following code to enable this effect, but it seems to have stopped working? Code:
// CHASING COLOURS START // function donator_colordance_fly(newcolor,oldcolor,selector) { $(selector).each(function(){ if($(this).find('.s').next().width() < 1) { $(this).find('.s').removeClass('s').css('color',oldcolor); $(this).find('span').first().css('color',newcolor).addClass('s'); }else{ $(this).find('.s').removeClass('s').css('color',oldcolor) .next().addClass('s').css('color',newcolor); } }); } function donator_colordance(newcolor, oldcolor, selector) { setInterval('donator_colordance_fly("' + newcolor + '","' + oldcolor + '","' + selector + '");',250); $(selector).each(function(){ var letters = $(this).html().split(''); $(this).html(''); for(var i in letters) { if(letters[i].toString().search('unction') == -1) $(this).append('<span>' + letters[i] + '</span>'); } }); } // CHASING COLOURS END // Code:
donator_colordance('#7EB6FF','#5D8AA8','.chasingblue-donator');//blue |
#5
|
|||
|
|||
Is anyone able to do this as a span class, so it can be added to a usergroup?
|
Thread Tools | |
Display Modes | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|