Подскажите интересные варианты анимации текста

arsen

arsen

НЕрядовой
Регистрация
16 Июн 2011
Сообщения
1.078
Реакции
355
Подскажите интересные варианты анимации текста
 
На jQuery находил скрипты которые анимируют текст как в фильме "Матрица", еще есть скрипт которые выводят текст как на табло аэропорта.
Ссылка 1: 20 Cool jQuery Text Effects
Для просмотра ссылки Войди или Зарегистрируйся
P.S. Лучше всего поискать по запросу "jquery text effects examples", можно найти свежие примеры.
 
Для просмотра ссылки Войди или Зарегистрируйся

Это 3d css, очень интересное новое веяние), но старыми браузерами не поддерживается, и оперой тоже, даже новой
 
Есть вот такой вариант плавной смены цвета для ссылок на Jquery.
Для просмотра ссылки Войди или Зарегистрируйся

Для заметки на вооружение но применять не советую так как есть проблемы с переносом видно в демке на последней ссылке да и динамически добавлять в каждую ссылку по 2 span элементаб имхо не аис.

Код: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ani links</title>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<style>
body {margin:0;padding:20px;background:#ddd;color:#000;font-family: "Trebuchet MS", "Helvetica CY", sans-serif;}
p {width:600px;}
a {color:#f30;font-weight:bold;text-decoration:none;}
a span.two {color:#069;cursor:pointer;}
</style>
 
<script>
this.fadeLinks = function() {   
   
    var selector = "a"; //modify this line to set the selectors
    var speed = "slow" // adjust the fading speed ("slow", "normal", "fast")
   
    var bgcolor = "#fff";    // unfortunately we have to set bg color because of that freakin' IE *!$%#!!?!?%$!
                            //please use the same background color in your links as it is in your document.
                           
    $(selector).each(function(){
        $(this).css("position","relative");
        var html = $(this).html();
        $(this).html("<span class=\"one\">"+ html +"</span>");
        $(this).append("<span class=\"two\">"+ html +"</span>");       
        if($.browser.msie){
            $("span.one",$(this)).css("background",bgcolor);
            $("span.two",$(this)).css("background",bgcolor);   
            $("span.one",$(this)).css("opacity",1);           
        };
        $("span.two",$(this)).css("opacity",0);       
        $("span.two",$(this)).css("position","absolute");       
        $("span.two",$(this)).css("top","0");
        $("span.two",$(this)).css("left","0");       
        $(this).hover(
            function(){
                $("span.one",this).fadeTo(speed, 0);               
                $("span.two",this).fadeTo(speed, 1);
            },
            function(){
                $("span.one",this).fadeTo(speed, 1);   
                $("span.two",this).fadeTo(speed, 0);
            }           
        )
    });
};
 
$(document).ready(function(){   
    fadeLinks();
});
</script>
 
</head>
<body>
 
<h1><a href="http://cssglobe.com/fading-color-effect-for-inline-text-links-using-jquery/" target="_blank">Fading effect for inline links using simple jQuery script</a></h1>
 
<p>(roll over red links)</p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Quisque egestas,
libero in luctus tincidunt, ante erat blandit tortor, non volutpat metus metus et lectus. Proin tempor.
Morbi eu lorem. <a href="#">Proin</a> aliquet mi eu lacus. <a href="#">Quisque enim</a>. Curabitur
sed eros quis nisl lacinia consectetuer. Fusce est pede, tristique nec, tempus et, pulvinar non, ligula.
Fusce sit amet mi quis magna elementum aliquam. Integer vitae dui. Mauris eleifend adipiscing lorem.
<a href="#">Nulla molestie ultricies quam</a>. Proin adipiscing, nisl ut vestibulum commodo, diam enim
posuere elit, consequat cursus augue lacus at justo. Fusce dignissim erat ut leo. Fusce quis urna.
<a href="#">Curabitur facilisis. Aliquam sed</a>.</p>
 
</body>
</html>
 
Для просмотра ссылки Войди или Зарегистрируйся
здесь на первом скриншоте реализован был текст с градиентной заливкой, текст был не картинкой, а векторный.
а вот реализация: Для просмотра ссылки Войди или Зарегистрируйся
 
Эффект плавного появления текста по буквам при помощи jQuery и CSS:
Код: 
#example .new { opacity: 0; }
#example .div_opacity {
  -webkit-transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -ms-transition: opacity .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  opacity: 1;
}

В нужном месте помещаем следующий код с текстом, который хотим анимировать:
HTML: 
<div id="example" style="padding:0px 0px 0px 100px; width:350px; display:none;">
Тут Ваш текст, который будет плавно появляться.</div>

Подключаем jQuery:
HTML: 
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

И собственно сам скрипт отвечающий за анимацию:
Код: 
<script type="text/javascript">
$(document).ready(function(){
$.fn.animate_Text = function() {
  var string = this.text();
  return this.each(function(){
  var $this = $(this);
  $this.html(string.replace(/./g, '<span class="new">$&</span>'));
  $this.find('span.new').each(function(i, el){
    setTimeout(function(){ $(el).addClass('div_opacity'); }, 20 * i);
  });
  });
};
$('#example').show();
$('#example').animate_Text();
});
</script>

В IE данный скрипт не работает и выводит текст целиком.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху