Farbsturm-Texteffekt in JavaScript

Kann mich jemand auf eine JavaScript-Textanimation für einen Farbsturm-Effekt verweisen? Ich habe kein perfektes Beispiel/Video, das ich teilen kann, um mehr Klarheit zu schaffen. Die folgende URL ist jedoch etwas, das ich in here gefunden habe.Farbsturm-Texteffekt in JavaScript

Die tatsächliche Anforderung besteht darin, einen stärker sturmähnlichen Effekt zu haben, d. H. Die Farben beim Zufließen vertikal zufallsmäßig zu verteilen. Und die Farben asymmetrisch entlang der Höhe eines Zeichens zu verteilen. Etwas, das den Eindruck erweckt, als würde ein Farbensturm durchkommen.

Alle Zeiger sind willkommen.

Code Snippet

// add animation-delay properties to span elements 
 

 
var animTime = 6, // time for the animation in seconds 
 
    hueChange = 3, // the hue change from one span element to the next 
 
    prefixes = ["", "-webkit-", "-moz-", "-o-"], 
 
    numPrefixes = prefixes.length; 
 

 
$('.unicorn').find('span').each(function (i) { 
 
    for (var j = 0; j < numPrefixes; j++) { 
 
     $(this).css(prefixes[j] + 'animation-delay', (animTime * ((i * hueChange) % 360)/360) - animTime + 's'); 
 
    } 
 
}); 
 

 
// needed to avoid Chrome bug: 
 
$('.unicorn').one('mouseover',function(){ 
 
    $(this).addClass('animate'); 
 
});

.unicorn.animate span { 
 
    -webkit-animation: colorRotate 6s linear 0s infinite; 
 
    -moz-animation: colorRotate 6s linear 0s infinite; 
 
    -o-animation: colorRotate 6s linear 0s infinite; 
 
    animation: colorRotate 6s linear 0s infinite; 
 
    
 
    -webkit-animation-play-state: paused; 
 
    -moz-animation-play-state: paused; 
 
    -o-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 
.unicorn:hover span { 
 
    -webkit-animation-play-state: running; 
 
    -moz-animation-play-state: running; 
 
    -o-animation-play-state: running; 
 
    animation-play-state: running; 
 
} 
 
@-webkit-keyframes colorRotate { 
 
    from { 
 
     color: rgb(255, 0, 0); 
 
    } 
 
    16.6% { 
 
     color: rgb(255, 0, 255); 
 
    } 
 
    33.3% { 
 
     color: rgb(0, 0, 255); 
 
    } 
 
    50% { 
 
     color: rgb(0, 255, 255); 
 
    } 
 
    66.6% { 
 
     color: rgb(0, 255, 0); 
 
    } 
 
    83.3% { 
 
     color: rgb(255, 255, 0); 
 
    } 
 
    to { 
 
     color: rgb(255, 0, 0); 
 
    } 
 
} 
 
@-moz-keyframes colorRotate { 
 
    from { 
 
     color: rgb(255, 0, 0); 
 
    } 
 
    16.6% { 
 
     color: rgb(255, 0, 255); 
 
    } 
 
    33.3% { 
 
     color: rgb(0, 0, 255); 
 
    } 
 
    50% { 
 
     color: rgb(0, 255, 255); 
 
    } 
 
    66.6% { 
 
     color: rgb(0, 255, 0); 
 
    } 
 
    83.3% { 
 
     color: rgb(255, 255, 0); 
 
    } 
 
    to { 
 
     color: rgb(255, 0, 0); 
 
    } 
 
} 
 
@-o-keyframes colorRotate { 
 
    from { 
 
     color: rgb(255, 0, 0); 
 
    } 
 
    16.6% { 
 
     color: rgb(255, 0, 255); 
 
    } 
 
    33.3% { 
 
     color: rgb(0, 0, 255); 
 
    } 
 
    50% { 
 
     color: rgb(0, 255, 255); 
 
    } 
 
    66.6% { 
 
     color: rgb(0, 255, 0); 
 
    } 
 
    83.3% { 
 
     color: rgb(255, 255, 0); 
 
    } 
 
    to { 
 
     color: rgb(255, 0, 0); 
 
    } 
 
} 
 
@keyframes colorRotate { 
 
    from { 
 
     color: rgb(255, 0, 0); 
 
    } 
 
    16.6% { 
 
     color: rgb(255, 0, 255); 
 
    } 
 
    33.3% { 
 
     color: rgb(0, 0, 255); 
 
    } 
 
    50% { 
 
     color: rgb(0, 255, 255); 
 
    } 
 
    66.6% { 
 
     color: rgb(0, 255, 0); 
 
    } 
 
    83.3% { 
 
     color: rgb(255, 255, 0); 
 
    } 
 
    to { 
 
     color: rgb(255, 0, 0); 
 
    } 
 
}

<p class="unicorn"> <span style="color: hsl(0, 100%, 50%);">L</span><span style="color: hsl(4, 100%, 50%);">o</span><span style="color: hsl(7, 100%, 50%);">r</span><span style="color: hsl(10, 100%, 50%);">e</span><span style="color: hsl(13, 100%, 50%);">m</span><span style="color: hsl(16, 100%, 50%);"> </span><span style="color: hsl(19, 100%, 50%);">i</span><span style="color: hsl(23, 100%, 50%);">p</span><span style="color: hsl(26, 100%, 50%);">s</span><span style="color: hsl(29, 100%, 50%);">u</span><span style="color: hsl(32, 100%, 50%);">m</span><span style="color: hsl(35, 100%, 50%);"> </span><span style="color: hsl(38, 100%, 50%);">d</span><span style="color: hsl(42, 100%, 50%);">o</span><span style="color: hsl(45, 100%, 50%);">l</span><span style="color: hsl(48, 100%, 50%);">o</span><span style="color: hsl(51, 100%, 50%);">r</span><span style="color: hsl(54, 100%, 50%);"> </span><span style="color: hsl(57, 100%, 50%);">s</span><span style="color: hsl(60, 100%, 50%);">i</span><span style="color: hsl(64, 100%, 50%);">t</span><span style="color: hsl(67, 100%, 50%);"> </span><span style="color: hsl(70, 100%, 50%);">a</span><span style="color: hsl(73, 100%, 50%);">m</span><span style="color: hsl(76, 100%, 50%);">e</span><span style="color: hsl(79, 100%, 50%);">t</span><span style="color: hsl(83, 100%, 50%);">,</span><span style="color: hsl(86, 100%, 50%);"> </span><span style="color: hsl(89, 100%, 50%);">c</span><span style="color: hsl(92, 100%, 50%);">o</span><span style="color: hsl(95, 100%, 50%);">n</span><span style="color: hsl(98, 100%, 50%);">s</span><span style="color: hsl(102, 100%, 50%);">e</span><span style="color: hsl(105, 100%, 50%);">c</span><span style="color: hsl(108, 100%, 50%);">t</span><span style="color: hsl(111, 100%, 50%);">e</span><span style="color: hsl(114, 100%, 50%);">t</span><span style="color: hsl(117, 100%, 50%);">u</span><span style="color: hsl(120, 100%, 50%);">r</span><span style="color: hsl(124, 100%, 50%);"> </span><span style="color: hsl(127, 100%, 50%);">a</span><span style="color: hsl(130, 100%, 50%);">d</span><span style="color: hsl(133, 100%, 50%);">i</span><span style="color: hsl(136, 100%, 50%);">p</span><span style="color: hsl(139, 100%, 50%);">i</span><span style="color: hsl(143, 100%, 50%);">s</span><span style="color: hsl(146, 100%, 50%);">i</span><span style="color: hsl(149, 100%, 50%);">c</span><span style="color: hsl(152, 100%, 50%);">i</span><span style="color: hsl(155, 100%, 50%);">n</span><span style="color: hsl(158, 100%, 50%);">g</span><span style="color: hsl(162, 100%, 50%);"> </span><span style="color: hsl(165, 100%, 50%);">e</span><span style="color: hsl(168, 100%, 50%);">l</span><span style="color: hsl(171, 100%, 50%);">i</span><span style="color: hsl(174, 100%, 50%);">t</span><span style="color: hsl(177, 100%, 50%);">.</span><span style="color: hsl(180, 100%, 50%);"> </span><span style="color: hsl(184, 100%, 50%);">C</span><span style="color: hsl(187, 100%, 50%);">u</span><span style="color: hsl(190, 100%, 50%);">p</span><span style="color: hsl(193, 100%, 50%);">i</span><span style="color: hsl(196, 100%, 50%);">d</span><span style="color: hsl(199, 100%, 50%);">i</span><span style="color: hsl(203, 100%, 50%);">t</span><span style="color: hsl(206, 100%, 50%);">a</span><span style="color: hsl(209, 100%, 50%);">t</span><span style="color: hsl(212, 100%, 50%);">e</span><span style="color: hsl(215, 100%, 50%);"> </span><span style="color: hsl(218, 100%, 50%);">a</span><span style="color: hsl(222, 100%, 50%);">l</span><span style="color: hsl(225, 100%, 50%);">i</span><span style="color: hsl(228, 100%, 50%);">q</span><span style="color: hsl(231, 100%, 50%);">u</span><span style="color: hsl(234, 100%, 50%);">i</span><span style="color: hsl(237, 100%, 50%);">d</span><span style="color: hsl(240, 100%, 50%);"> </span><span style="color: hsl(244, 100%, 50%);">m</span><span style="color: hsl(247, 100%, 50%);">a</span><span style="color: hsl(250, 100%, 50%);">i</span><span style="color: hsl(253, 100%, 50%);">o</span><span style="color: hsl(256, 100%, 50%);">r</span><span style="color: hsl(259, 100%, 50%);">e</span><span style="color: hsl(263, 100%, 50%);">s</span><span style="color: hsl(266, 100%, 50%);"> </span><span style="color: hsl(269, 100%, 50%);">d</span><span style="color: hsl(272, 100%, 50%);">o</span><span style="color: hsl(275, 100%, 50%);">l</span><span style="color: hsl(278, 100%, 50%);">o</span><span style="color: hsl(282, 100%, 50%);">r</span><span style="color: hsl(285, 100%, 50%);">e</span><span style="color: hsl(288, 100%, 50%);">m</span><span style="color: hsl(291, 100%, 50%);">q</span><span style="color: hsl(294, 100%, 50%);">u</span><span style="color: hsl(297, 100%, 50%);">e</span><span style="color: hsl(300, 100%, 50%);"> </span><span style="color: hsl(304, 100%, 50%);">m</span><span style="color: hsl(307, 100%, 50%);">o</span><span style="color: hsl(310, 100%, 50%);">l</span><span style="color: hsl(313, 100%, 50%);">e</span><span style="color: hsl(316, 100%, 50%);">s</span><span style="color: hsl(319, 100%, 50%);">t</span><span style="color: hsl(323, 100%, 50%);">i</span><span style="color: hsl(326, 100%, 50%);">a</span><span style="color: hsl(329, 100%, 50%);">e</span><span style="color: hsl(332, 100%, 50%);"> </span><span style="color: hsl(335, 100%, 50%);">c</span><span style="color: hsl(338, 100%, 50%);">o</span><span style="color: hsl(342, 100%, 50%);">r</span><span style="color: hsl(345, 100%, 50%);">r</span><span style="color: hsl(348, 100%, 50%);">u</span><span style="color: hsl(351, 100%, 50%);">p</span><span style="color: hsl(354, 100%, 50%);">t</span><span style="color: hsl(357, 100%, 50%);">i</span>

Quelle

2016-08-03 Drek

t Die Unterschiede sind vertikal und asymmetrisch? eine Art von dieser http://codepen.io/arcs/pen/bpgzwz? –

Umm, nein. Ich habe nach einer zusätzlichen Randomisierung in der Art und Weise gefragt, wie Farben in dem Beispiel-Beispiel fließen. Das Beispiel, das ich geteilt habe, ist ziemlich nah. – Drek

Ich denke, du steuerst die Geschwindigkeit des Flusses, wenn du eine vorbereitete Randomisierung willst und diesen Clip loopst, ändere einfach den Prozentsatz in Keyframes colorRotate, lass etwas Farbe länger bleiben, wenn du irgendwann schneller fließen willst und irgendwann langsamer fließen willst ein anderer Weg, Hintergrund-Clip, ich werde eine Geige dafür später machen –

here es glatt ist jetzt

var $c = $('.clip'); 
 
var posX = 0; 
 
var posY = 0; 
 
var timeout = Math.random()*1000; 
 

 
function flow(){ 
 
    console.log([$c,posX,posY]); 
 
    posX+=500; 
 
    posY+=500; 
 
    timeout = Math.random()*1000; 
 
    $c.css('-webkit-transition', (timeout/1000)+'s linear'); 
 
    $c.css('background-position',posX+'px '+posY+'px'); 
 
    setTimeout(flow,timeout) 
 
} 
 
flow();

.clip { 
 
    font-size: 260px; 
 
    font-weight: bold; 
 
    background: repeating-linear-gradient(-45deg, #ff0000 0px, #00ff00 235.7px, #0000ff 471.4px, #ff0000 707.1px); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    width: 1000px; 
 
    height: 1000px; 
 
} 
 

 
.clip.d45 { 
 
    background: repeating-linear-gradient(-45deg, #ff0000 0px, #00ff00 235.7px, #0000ff 471.4px, #ff0000 707.1px); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clip">background clip clip </div>

Quelle

2016-08-03 11:58:00

Farbsturm-Texteffekt in JavaScript

Antwort

Verwandte Themen