Главная » Файлы » Прочие скрипты » CSS

Разнообразные способы анимации текста через плагин textillate и CSS3 для uCoz
24.06.14, 16:33:39

Скачать файл




Данный скрипт позволит анимировать любой текст, причём количество анимаций просто огромное. Плагин прост в установке и использовании, а разнообразие эффектов позволит создавать замечательные баннеры без картинок и флеша

Для начала посмотрите ДЕМО

Вот моё тестирование в фидле: ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<link href="/css/animate.css" rel="stylesheet">  
  <script src="/js/jquery.textillate.js"></script>  
  <script src="/js/jquery.fittext.js"></script>  
  <script src="/js/jquery.lettering.js"></script>  
  <script>  
  $(document).ready(function() {  
  $('.tlt').textillate({  
  // стандартный селектор, который будет автоматически обрабатываться  
  selector: '.texts',  
  // повторение  
  loop: false,  
  // минимальное время задержки до перемещения букв  
  minDisplayTime: 2000,  
  // устанавливает задержку до начала анимации  
  initialDelay: 0,  
  // запускать ли анимацию автоматически  
  autoStart: true,  
  // анимация в начале  
  in  
  : {  
  // название анимации  
  effect: 'flip',  
  // фактор задержки между показом букв  
  delayScale: 1.9,  
  // задержка между буквами  
  delay: 50,  
  // установите true, чтобы все буквы анимировались одновременно  
  sync: false,  
  // перемешивать ли буквы при анимации
  // (не работает, если включена предыдущая опция sync = true)  
  shuffle: true  
  },  
  // настройки конечной анимации  
  out: {  
  effect: 'hinge',  
  delayScale: 1.5,  
  delay: 50,  
  sync: false,  
  shuffle: false,  
  }  
  // Русификация от Apocalypse  
  });  
  });  
  </script>

Список доступных анимаций: flash | bounce | shake | tada | swing | wobble | pulse | flip | flipInX | flipInY | fadeIn | fadeInUp | fadeInDown | fadeInLeft | fadeInRight | fadeInUpBig | fadeInDownBig | fadeInLeftBig | fadeInRightBig | bounceIn | bounceInDown | bounceInUp | bounceInLeft | bounceInRight | rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft | rotateInUpRight | rollIn

Текст, который нужно анимировать, обрамляйте в любой тег с классом tlt:
Код
<div class="tlt">http://apo-ucoz.com</div>

Скрипты из прикреплённого архива залейте в папку js, стиль в папку css

Материал адаптирован и подготовлен Apocalypse

Категория: CSS | Добавил: Apocalypse | Теги: textillate, анимации, Через, ucoz, плагин, разнообразные, CSS3, текста, для, способы
Просмотров: 559 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: