Лого www.SiteHere.ru

Простой и элегантный вращающийся текст

Простой и элегантный врающающийся текст

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

Пример можно увидеть здесь:

Посмотреть примерСкачать

Как пользоваться?

HTML часть

Скачиваем библиотеку jQuery(здесь или подключаем напрямую) и плагин Adjector.js(здесь) и стили(здесь), затем подключаем:

1
2
3
<link rel="stylesheet" type="text/css" href="css/adjector.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/adjector.js"></script>

Я буду рассматривать всё на примере Демо 4.

Демо 4

И в структуре сайта пишем какие слова необходимо менять через вертикальную черту:

1
2
3
4
<div id="heading" class="contain">
    <span class="adject">ЦВЕТ</span>
    <span class="adject">Красный|Синий|Зеленый|Желтый|Черный</span>
</div>

А так как в этом случае у нас есть еще и описание каждого цвета, то необходимо также через вертикальную черту, но в другом блоке, вставить описание:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="sub" class="contain">
    <span class="adject">
        Кра́сный (родственно ст.-слав. красьнъ — красивый, прекрасный), также червлёный, рдяный (арх.) — область цветов в длинноволновой части видимого спектра, соответствует минимальной частоте электромагнитного поля, воспринимаемой человеческим глазом.
        | 
        Синий — наименование группы цветов. Спектральный синий цвет ощущается человеком под действием излучения с длиной волны около 440—485 нм (иногда диапазон указывают шире — 420—490). Один из «основных цветов» в системе КЗС (RGB).
        | 
        Зелёный цвет — один из трёх основных цветов, зелёным считают диапазон цветов спектра с длиной волны приблизительно 500—565 нанометров.Широко распространён в живой природе. Большинство растений имеют зелёный цвет, так как содержат пигмент фотосинтеза — хлорофилл.
        | 
        Жёлтый — цветa с длиной волны от 565 нм до 590 нм. Является дополнительным цветом к синему в RGB или дополнительным к фиолетовому в художественной практике и системе RYB. Однако в древности, из-за несовершенства имевшихся пигментов, его рассматривали как дополнительный к пурпурному.
        | 
        Чёрный — ахроматический цвет, отсутствие светового потока от объекта. В системе RGB обозначается как #000000. Оттенки чёрного цвета именуются серым цветом.
</span>
</div>

Javascript часть

В нашем случае настройки плагина будут выглядеть следующий образом:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
    $(document).ready(function(){
        $(".contain .adject").adjector({
            sep: "|",
            stay: 3000,
            trans: 850,
            arm: 0
        });
    });
</script>

Рассмотрим что это за свойства:

  • sep — это разделитель, который мы ставим между текстом, который меняется.
  • stay — этот параметр задает на сколько секунд останавливается появившийся текст. Задается в миллисекундах.
  • trans — определяет скорость вращения. То есть мы задаем время от начала и до конца вращения. Также задается в миллисекундах.
  • arm — задает ось вращения. Если данный параметр равен нулю, то будет происходить вращение на месте. Посмотрите пример Демо 3, там данный параметр равен "-150".

Вывод

Для чего же можно использовать данный плагин? Что первое приходит в голову — это выводить в таком виде анонсы новостей где-то в сайдбаре, также можно рекламировать свои курсы(для инфобизнесменов). А может у вас появилась своя идея.

Если появятся проблемы с установкой — пишите в комментариях! 🙂

Успехов!

С Уважением, Юрий Немец

Источник: http://www.onextrapixel.com/2014/04/22/adjector-js-adjectify-yourself-a-minimal-and-elegant-content-flipper/

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *