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

Тема в разделе "Верстка", создана пользователем arsen, 14 янв 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. arsen

    arsen НЕрядовой

    Регистр.:
    16 июн 2011
    Сообщения:
    858
    Симпатии:
    306
    Подскажите интересные варианты анимации текста
     
    evolvent нравится это.
  2. stylebig

    stylebig Создатель

    Регистр.:
    12 янв 2013
    Сообщения:
    33
    Симпатии:
    7
    На jQuery находил скрипты которые анимируют текст как в фильме "Матрица", еще есть скрипт которые выводят текст как на табло аэропорта.
    Ссылка 1: 20 Cool jQuery Text Effects
    http://www.tripwiremagazine.com/2012/03/jquery-text-effects.html
    P.S. Лучше всего поискать по запросу "jquery text effects examples", можно найти свежие примеры.
     
  3. chayteam

    chayteam Писатель

    Регистр.:
    15 янв 2013
    Сообщения:
    2
    Симпатии:
    1
    http://soulwire.github.com/Makisu/

    Это 3d css, очень интересное новое веяние), но старыми браузерами не поддерживается, и оперой тоже, даже новой
     
  4. Blanigator

    Blanigator Постоялец

    Регистр.:
    11 янв 2013
    Сообщения:
    60
    Симпатии:
    11
  5. w3bmak3r

    w3bmak3r Писатель

    Регистр.:
    19 янв 2013
    Сообщения:
    5
    Симпатии:
    0
  6. vedro

    vedro Писатель

    Регистр.:
    13 дек 2012
    Сообщения:
    6
    Симпатии:
    0
    Есть вот такой вариант плавной смены цвета для ссылок на Jquery.
    http://cssglobe.com/fading-color-effect-for-inline-text-links-using-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>
     
  7. TLemur

    TLemur Писатель

    Регистр.:
    21 янв 2013
    Сообщения:
    9
    Симпатии:
    7
  8. viryys

    viryys Создатель

    Регистр.:
    26 окт 2012
    Сообщения:
    19
    Симпатии:
    1
  9. alexmay

    alexmay Создатель

    Регистр.:
    7 июн 2011
    Сообщения:
    47
    Симпатии:
    5
    Эффект плавного появления текста по буквам при помощи 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 данный скрипт не работает и выводит текст целиком.
     
  10. php-elvin

    php-elvin Постоялец

    Регистр.:
    11 сен 2012
    Сообщения:
    111
    Симпатии:
    67