Главная » 2011 » Октябрь » 22 » Интересная анимация текста с помощью jQuery (Javascript)
22.10.2011, 04:10

Интересная анимация текста с помощью jQuery





ДЕМО МАТЕРИАЛА

В head на нужных вам страницах вставляйте:
Code
<script src="/js/easing.js"></script>  
  <script>  
  $(document).ready(function(){  

  $("#start").click(function(){  
  setTimeout(function(){  
  $("div:animated").css("border", "2px solid red");  
  }, 3000);  
  });  

  $("#textanim").click(function(){  
  if ( !$("#text span").length )  
  $("#text").html(jQuery.map( $("#text").html().split(""), function(letter){  
  return "<span>" + letter + "</span>";  
  }).join(""));  

  $("#text span").each(function(i, letter){  
  setTimeout(function(){  
  $(letter)  
  .animate({ fontSize: "4em" }, 1000, "elasinout")  
  .animate({ fontSize: "1em" }, 1000, "elasinout");  
  }, i * 100);  
  });  
  });  

  });  
  </script>

Текст, который будем анимировать, прописываем так:
Code
<div id="text">Этот текст классно анимируется!!!</div>  

  Стилизация текста прописывается так:  
  [code]<style>  
  #text { height: 100px; width: 100%; text-align:center; background: none; border: none; }  
  </style>

Кнопка, которой мы будем вызывать анимацию, прописывается так:
Code
<button id="textanim" value="Animate Scroll">Animate Letters</button>

Далее в папку js (Если такой нет - создайте) залейте скрипт из прикреплённого архива
Материал взят с сайта infoscript.ru
Теги: Скачать Интересная анимация текста с помощью jQuery
Скачать "Интересная анимация текста с помощью jQuery"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: siteforsites.ru
Категория: JavaScript's | Просмотров: 2183 | Добавил: manikom-auto | Рейтинг: 4.0/2 |
Теги: jQuery, текста, Интересная, анимация, помощью
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]