You need a smooth change in the color of the text, 5-6 colors one after another. "The effect of the garland"

Closed due to the fact that the essence of the question is not clear to the participants 0xdb , Air , aleksandr barakin , AK ♦ , Enikeyschik December 27, '18 at 15:46

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 2
    A good idea, but to see at least part of the code that you have already done on the way to this garland. - V.March
  • Need to do it, who's stopping ... ??? - Air

2 answers 2

I want to demonstrate the work of the plugin on jquery: lettering.js which breaks a word into letters that can be manipulated and also manipulated the animation delay

In the stackoverflow snippet, I pasted this entire lettering directly

(function($) { function injector(t, splitter, klass, after) { var text = t.text(), a = text.split(splitter), inject = ''; if (a.length) { $(a).each(function(i, item) { inject += '<span class="' + klass + (i + 1) + '" aria-hidden="true">' + item + '</span>' + after; }); t.attr('aria-label', text) .empty() .append(inject) } } var methods = { init: function() { return this.each(function() { injector($(this), '', 'char', ''); }); }, words: function() { return this.each(function() { injector($(this), ' ', 'word', ' '); }); }, lines: function() { return this.each(function() { var r = "eefec303079ad17405c889e092e105b0"; injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); }); } }; $.fn.lettering = function(method) { // Method calling logic if (method && methods[method]) { return methods[method].apply(this, [].slice.call(arguments, 1)); } else if (method === 'letters' || !method) { return methods.init.apply(this, [].slice.call(arguments, 0)); // always pass an array } $.error('Method ' + method + ' does not exist on jQuery.lettering'); return this; }; })(jQuery); $(document).ready(function() { $("#text").lettering(); }); 
 p { font-size: 24px; font-weight: 900; font-family: sans-serif; } .char1, .char2, .char3, .char4, .char5, .char6, .char7, .char8 { animation: color 3s infinite; } .char1 { animation-delay: -0.1s; } .char2 { animation-delay: 0.2s; } .char3 { animation-delay: -0.3s; } .char4 { animation-delay: 0.4s; } .char5 { animation-delay: -0.5s; } .char6 { animation-delay: 0.6s; } .char7 { animation-delay: -0.7s; } .char8 { animation-delay: 0.8s; } @keyframes color { 0% { color: red; } 25% { color: green; } 50% { color: blue; } 75% { color: yellow; } } 
 <p id="text">Анимация</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Same situation without using this plugin.

 p { font-size: 24px; font-weight: 900; font-family: sans-serif; } .char1, .char2, .char3, .char4, .char5, .char6, .char7, .char8 { animation: color 3s infinite; } .char1 { animation-delay: -0.1s; } .char2 { animation-delay: 0.2s; } .char3 { animation-delay: -0.3s; } .char4 { animation-delay: 0.4s; } .char5 { animation-delay: -0.5s; } .char6 { animation-delay: 0.6s; } .char7 { animation-delay: -0.7s; } .char8 { animation-delay: 0.8s; } @keyframes color { 0% { color: red; } 25% { color: green; } 50% { color: blue; } 75% { color: yellow; } } 
 <p> <span class="char1">А</span> <span class="char2">н</span> <span class="char3">и</span> <span class="char4">м</span> <span class="char5">а</span> <span class="char6">ц</span> <span class="char7">и</span> <span class="char8">я</span> </p>

    Since the name ends with Yang, so I will answer.

     @keyframes anime { 0% { color: orange; } 33% { color: red; } 66% { color: blue; } 100% { color: orange; } } h2 { animation: anime infinite 2s linear; } 
     <h2>Lorem ipsum dolor sit amet.</h2>

    What would be clear that you tried yourself and not what you need to write, the next time asking a question show your code.