Разноцветные буквы в словах на 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>

$(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>

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

Метки: Apocalypse Color jQuery Letters Rainbow Words Буквы Разноцветные Слова

Apocalypse

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

Читайте также:

Вы точно не робот?

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

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

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

stalker1313

https://youtu.be/_GFy0QC_OcU

2023-01-11 02:33:13

Apocalypse

@stalker1313, видел эту фишку в ТикТоке. Ты проверял её?

2023-01-12 23:17:39

stalker1313

Не проверял

2023-01-13 20:58:01

Apocalypse

@stalker1313, это работает! Нифига себе: https://imapo.ru/demos/cssblock.html

2023-01-13 21:03:54

stalker1313

👍

2023-01-18 11:48:44

stalker1313

В вордпрессе есть встроенный счётчик просмотра записей? Тоесть что бы сейчас его “активировать” и можно было бы узнать сколько было просмотров страницы за всё время существования сайта

2023-01-26 23:18:29

fapalnaapo

Ктонибудь вкурсе зачем юкоз сломали лайки, при нажатии ничего ен рпоисходит

2023-01-30 21:43:35

fapalnaapo

у вас вроде работают модно своровать ))))
😀

2023-01-30 21:44:34

Apocalypse

@stalker1313, нет такой функции, насколько мне известно

2023-02-02 18:03:54

Apocalypse

@fapalnaapo, они вечно что-то ломают

2023-02-02 18:04:13

......

Для публикации сообщений в чате необходимо авторизоваться

Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28

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

Читайте также:

Посетители сайта

Панель управления

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

Читайте также:

Адаптивный мультитач слайдер Slick на jQuery

Подсчёт количества слов и времени прочтения статей в WordPress без плагинов

Цветные блуждающие линии на HTML5 Canvas

Посетители сайта

Панель управления