Лого www.SiteHere.ru

Как создать вращающийся текст

Как создать вращающийся текст

Иногда появляется необходимость выделить текст на странице каким-нибудь образом так, чтобы посетитель обратил на него внимание. Есть статические методы: подчеркивание, выделение жирным или курсивом. Но есть и динамические: вращение, повороты различные и просто смена слов с выделением. Динамические сменяемые слова явно сильнее привлекут внимание посетителя, но при этом очень важно не отпугнуть его. Соблюдайте золотую середину.

Примеры работы плагина можно увидеть здесь:

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

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

Необходимо скачать и подключить библиотеку jQuery(она находится здесь) и simple-text-rotator.js(ее можно скачать здесь):

1
2
3
4
5
$(".rotate").textrotator({
    animation: "spin",
    separator: ",",
    speed: 2000
});

Рассмотрим эти свойства и какие значения они могут принимать:

  • .rotate — это класс того элемента, в котором находятся выделяемые и заменяемые слова.
  • animation — данное свойство отвечает за анимацию текста, т.е. за эффект. Значения могут быть следующие: dissolve, flip, flipUp, flipCube, flipCubeUP, fade и spin. По умолчанию стоит dissolve.
  • separator — это разделитель между словами, обычно используется запятая, но в 4-м демо используется знак "|".
  • speed — это скорость смены слов, которая задается в миллисекундах. А также скорость смены или вращения слов можно изменить в файле simpletextrotator.css.

Вывод

Используйте данный плагин, только с осторожностью, чтобы не отпугнуть пользователя :).

Успехов!

Источник: http://www.onextrapixel.com/2013/08/27/super-simple-text-rotator-with-almost-no-effort-required/

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

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

10 комментариев к записи
  • Михаил

    Уважаемый автор! Для чтения своей статьи Вы вынуждаете читателя делать несколько прыжков кликом мышки. Во-1ых – это для читателя просто унизительно, выглядит издёвкой (типа: а ну попрыгай у меня!); во-2ых – это демонстрация Вашей низкой профессиональной культуры, если не можете дать одну ссылку, сразу приводящую к цели. Да, не Вы одни, так поступают все авторы. Скажет «Здрасьте!», а для продолжения статьи нужно жать на «Читать дальше». Маразм!

     
    • Юрий

      Михаил, анонс поэтому и называется анонсом, чтобы читая его пользователю захотелось прочитать всю статью. Это экономит время пользователя, т.к. зачем читать всю статью целиком если из анонса станет понятно нужна ли данная информация пользователю или нет.

      А на счет ссылки «Читать дальше»: это глупо публиковать статью целиком на чужом сайте, ведь я пишу статьи для своего. Не понятна претензия.

       
      • Михаил

        1. Анонс не получается. Иные в анонсе ограничиваются одним словом типа Здрасьте.
        2.глупо публиковать статью целиком на чужом сайте, ведь я пишу статьи для своего. — А нельзя ли в анонсе дать ссылку на свой, а не чужой сайт? Зачем тройной прыжок? Зачем гоняете меня на чужой сайт, из которого надо потом срочно выпрыгивать?

         
        • Юрий

          Хм, а на какой промежуточный сайт вы попадаете до моего?(напишите мне на e-mail пожалуйста: nemetsyuriy@gmail.com )

           
          • Михаил

            Ответил подробно мылом.

             
  • Артур

    отличные статьи, которые читаются на одном дыхании, что бы научиться, не нужно лениться. Заинтересованный читатель, с радостью кликнет «Читать далее»!
    спасибо Юре!

     
  • Ирина

    я не против «попрыгать» по ссылкам… но я не поняла, что и как нужно сделать.. вначале упоминается плагин
    «Примеры работы плагина можно увидеть здесь:»
    но что это за плагин?

    а далее идет речь о библиотеке jQuery…
    хотелось бы поподробнее, раз уж это урок.. последовательность действий..или все же надо пройти по третьей ссылке и там подробности?

     
    • Юрий

      Доброе утро, Ирина 🙂 . В статье я описал последовательность действий, она следующая: для начала необходимо скачать саму библиотеку jQuery и плагин simple-text-rotator.js, который написан с помощью ее. Подключить их между тегами <head>. Затем вставить на страницу код, который приведен выше. Там описано что делает каждое свойство.

      Для того чтобы быстрее понять и использовать я выкладываю примеры, которые можно посмотреть и скачать. А когда вы скачаете и посмотрите код, вы сразу поймете как оно устроено и вам лишь останется сделать по аналогии. Ирина, если еще будут вопросы, обязательно пишите!

       
  • Юрий

    Юрий! Отличный сайт и всё предельно ясно и понятно,большое тебе спасибо!
    Ну а тем,кто не разбирается в кодах,надо вначале этому научиться.
    Тогда всё будет понятно.

     
    • Юрий

      Спасибо за поддержку . 🙂

       

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

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