Отправляет email-рассылки с помощью сервиса Sendsay

Уникальные уроки по теме сайтостроения

Подписаться Бесплатная новостная рассылка Подписчиков 2 RSS
←   Апрель 2014   →
 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
27.04.2014
13:59:08
14:00:27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://sitehere.ru
Открыта: 19-10-2013

Автор
Юрий Немец

Статистика

2 подписчиков
0 за неделю
←   Все выпуски   →

Уникальные уроки по теме сайтостроения Простой и элегантный вращающийся текст


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

Технология 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

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

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 — задает ось вращения. Если данный параметр равен нулю, то будет происходить вращение на месте.

Вывод

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