Разноцветные буквы в словах на jQuery by Apocalypse

Разместил: Apocalypse
2 июля 2016

Данное решение я разработал со скуки. Суть скрипта в том, что он окрашивает каждую букву в предложениях в случайный цвет из вашего набора Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: HTML код примера:

<div class="aporainbow">IMAPO.RU - Только уникальные скрипты</div>

1	<div class="aporainbow">IMAPO.RU - Только уникальные скрипты</div>

  2#: Javascript код примера. Вставлять сразу после предыдущего:

<script> $(function() { // Указываем класс блока, который обрабатывать var apocurelem = $('.aporainbow'); var apolet = apocurelem.text().split(''); for(i in apolet) { apolet[i] = '<span>' + apolet[i] + '</span>'; }; var text = apolet.join(""); apocurelem.html(text); // Создаём массив цветов. Массив может быть любого размера var apocolorarr = ['#f30', '#d3d', '#a3a', '#f3a', '#293']; var min = 0; var max = apocolorarr.length-1; $('.aporainbow span').each(function(index) { var aporandom = min + Math.floor(Math.random() * (max + 1 - min)); $(this).css('color', apocolorarr[aporandom]); }); }); </script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<script> $(function() { // Указываем класс блока, который обрабатывать var apocurelem = $('.aporainbow'); var apolet = apocurelem.text().split(''); for(i in apolet) { apolet[i] = '<span>' + apolet[i] + '</span>'; }; var text = apolet.join(""); apocurelem.html(text);   // Создаём массив цветов. Массив может быть любого размера var apocolorarr = ['#f30', '#d3d', '#a3a', '#f3a', '#293']; var min = 0; var max = apocolorarr.length-1; $('.aporainbow span').each(function(index) { var aporandom = min + Math.floor(Math.random() * (max + 1 - min)); $(this).css('color', apocolorarr[aporandom]); }); }); </script>

В этом скрипте используется просто замечательный пример того, как можно обрамить каждую букву в слове. Используйте для воплощения других своих фантазий За основу взято решение из ЭТОГО топика

Автор публикации

не в сети 1 неделя

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: ApocalypseColorjQueryLettersRainbowWordsБуквыРазноцветныеСлова

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Случайный размер букв на jQuery by Apocalypse
• Предыдущая публикация Отражение любого текста на CSS3

Вам может также понравиться...

• Flickity - Адаптивный слайдер с Touch эффектом на CSS3 и jQuery

  Разместил: Apocalypse 12 мая 2016

  - Apocalypse 12 мая 2016

• Вращение изображений через плагин jQuery Rotate

  Разместил: Al-Sher 25 июля 2015

  - Al-Sher 25 июля 2015

• IMAPO BLOG #9 - Новый дизайн 2020 и что стало причиной его разработки

  Разместил: Apocalypse 12 октября 2020

  - Apocalypse 12 октября 2020 Last modified 15 октября 2020

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии