Главная » Файлы » Прочие скрипты » 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 | |
Просмотров: 621 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |