5 396 Скрипты / Text

Анимация текста на jQuery


Плагин для анимации текста имющий пять различных режимов: roll, step, jump, puff, highlight, каждый с возможностью дополнительной настройки.

  • Требуются библиотеки: jQuery , jQuery UI.
  • Поддерживаемые браузеры: Firefox 3.x+, Google Chrome2.x+, IE8+, Safari5.x+

HTML

Структура сразу для всех вариантов анимации, как в примере:

<div id="demo_roll1" class="demo" >Режим Roll.</div>        
<div id="demo_roll2" class="demo" >Вы  можете изменять настройки.</div>
<div id="demo_step1" class="demo" >Режим Step.</div>
<div id="demo_step2" class="demo" >Вы  можете изменять настройки.</div>
<div id="demo_high1" class="demo" >Режим Highlight.</div>
<div id="demo_high2" class="demo" >Вы  можете изменять настройки.</div>
<div id="demo_jump1" class="demo" >Режим Jump.</div>
<div id="demo_jump2" class="demo" >Вы  можете изменять настройки.</div>
<div id="demo_puff1" class="demo" >Режим Puff.</div>
<div id="demo_puff2" class="demo" >Вы  можете изменять настройки.</div>

JS

Подключаются jQuery и jQuery UI и плагин:

<script type="text/jаvascript" src="lib/jquery.min.js"></script>
<script type="text/jаvascript" src="lib/jquery-ui.min.js"></script>
<script type="text/jаvascript" src="src/jquery.textanimation.js"></script>
Далее инициализация сразу всех вариантов эффекта в одном вызове, только для примера:
$(document.body).ready(function(){
    $("div#demo_roll1").textAnimation({
        mode: "roll"
    });
    $("div#demo_roll2").textAnimation({
        mode: "roll",
        minsize: 20,
        magnification: 20,
        fixed: "top",
        delay: 5,
        stuff: 1.5
    });
    $("div#demo_step1").textAnimation({
        mode: "step"
    });
    $("div#demo_step2").textAnimation({
        mode:"step",
        minsize:20,       //минимальный размер шрифта[integer]
        maxsize:60,       //максимальный размер шрифта[integer]
        upper:false,      //верхний шаг? [boolean]
        fixed:"top",      //фиксировать top или bottom ["top","bottom"]
        stuff:2.0,        //величина наложения букв шрифта[float]
        delay:200,        //задержка между анимацией символов
        interval:0,       //интервал анимации
        duration:1000     //продолжительность анимации
    });
    $("div#demo_high1").textAnimation({
        mode: "highlight"
    });
    $("div#demo_high2").textAnimation({
        mode: "highlight",
        baseColor: "#111111",
        highlightColor: "#2FFF5F",
        delay: 35,
        interval: 0,
        duration: 100
    });    
    $("div#demo_jump1").textAnimation({
        mode:"jump"
    });
    $("div#demo_jump2").textAnimation({
        mode:"jump",         
        altitude:10,      //высота прыжка[integer] 
        bound :false,     //связанная анимация[boolean]
        fixed:"bottom",   //фиксировать top или bottom ["top","bottom"]
        delay:80,         //задержка анимации между символами[integer] 
        interval:0,       //интервал времени для анимации[integer]
        duration:400      //продолжительность анимации[integer]
    });
    $("div#demo_puff1").textAnimation({
        mode:"puff"
    });
    $("div#demo_puff2").textAnimation({
        mode:"puff",
        color:"#77FF6F",  //подсветка пуфф текста
        percent:200,      //масштабирование шрифта в %.[integer]     
        interval:1000,    //интервал времени для анимации[integer]
        duration:1000,    //продолжительность анимации[integer]
        times : 5         //сколько раз произваодить анимацию puff[integer]
    });
});
Скачать 1928Загрузок 76,02 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи