Радуга

Эффект радужного перелива CSS, HTML5, Java, jQuery

Приятный эффект, который можно использовать в различных вариантах оформления страниц. С помощью данного эффекта реализован мой скромный логотип сайта.

Существует множество вариантов реализации подобного эффекта. В этой заметке представлено два варианта.

Первый вариант

Для вывода на странице пишем простейшую конструкцию с классом .unicorn(вы можете использовать свой класс, но не забудьте изменить его в скриптах) и текстом для которого будет применен эффект.

HTML

В конце страницы, перед закрывающим тегом </body>, размещаем java- скрипт.

JS

Обратите внимание, что для работы скрипта не требуются особые CSS стили.  Если вам нужно сменить шрифт или его размер. Примените необходимый стиль к классу .unicorn(или к вашему собственному классу).

Пример:

[codepen_embed height=»266″ theme_id=»10945″ slug_hash=»XXWOew» default_tab=»result» user=»s3abreeze» preview=»true»]See the Pen <a href=’http://codepen.io/s3abreeze/pen/XXWOew/’>rainbow html5</a> by s3abreeze (<a href=’http://codepen.io/s3abreeze’>@s3abreeze</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Второй вариант

Подробно рассматривать этот вариант я не стану. Скажу лишь, что по большому счету они идентичны. Второй вариант более громоздкий, но тоже имеет право на жизнь.

Пример:

[codepen_embed height=»266″ theme_id=»10945″ slug_hash=»obNmyL» default_tab=»result» user=»s3abreeze»]See the Pen <a href=’http://codepen.io/s3abreeze/pen/obNmyL/’>Rainbow effect2</a> by s3abreeze (<a href=’http://codepen.io/s3abreeze’>@s3abreeze</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

В обоих вариантах, не забудьте подключить jQuery библиотеки.

Добавить комментарий