Красивые анимации текста через плагин textillate и CSS3 для uCoz[
Скачать с сервера (8.9Kb)
]
Очередное классное готовое решение для uCoz. Для тех кто ищет хороший плагин, создающий анимации для баннеров без
картинок и флэша - вы нашли то что искали. Точнее, мы нашли и спешим
поделиться с вами своей новинкой. Плагин очень прост в установке - тут
нет равным по простоте продуктам от Ucoz. Имя ему Textillate и создан он
через CSS3, так что сами видите - много места не займет, а установить,
как мы уже говорили - проще простого. Так же плагин предполагает различные способы защиты анимации текста, что
не маловажно при создании баннеров. Ограничений на анимацию текста
вообще нет, а эффектов море - от самых простых и всем давно известных,
до новых, только что придуманных и выпущенных на просторы интернета, где
мы их и поймали. Текстовые сообщения могут и стремительно вылетать
буковка за буковкой, и повисев немного, опадать как осенние листья вниз,
цепляясь друг за друга. конечно же можно задать скорость и частоту всех
этих эффектов. Так же текст может таинственно выплывать из темного фона
или элементы будут вылетать в произвольном порядке, формируя части слов
постепенно превращая это в осмысленное предложение. Основная фишка,
конечно же в эффекте выпадения элементов - буковки падают вниз то с
большой скоростью и с большей высоты, а могут просто легко раскачиваясь
лениво уползать вниз - с этой штукой можно позаморачиваться долго, но
эффект будет того стоить - ваш идеальный баннер с текстовым наполнением
будет создан - гарантируем!
Важно! Скрипты из прикреплённого архива залейте в папку js, стиль в папку css
Установка:
После /head на нужных страницах вставляйте: <linkhref="/css/animate.css"rel="stylesheet"> <scriptsrc="/js/jquery.textillate.js"></script> <scriptsrc="/js/jquery.fittext.js"></script> <scriptsrc="/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: <divclass="tlt">http://scripts-for-ucoz.ru</div>
|
Нравится
|