Плавное появление текста по буквам

В данной теме мы хотим показать Вам небольшой скрипт, который позволяет при помощи jQuery и CSS создавать на собственном сайте текст с плавным появлением по буквам.

Для того чтобы понять о каком эффекте плавного появления текста идет речь, обновите страничку и обратите внимание на текст расположенные ниже:

Тут Ваш текст, который будет плавно появляться.Данный текст показывается на страничке не сразу,а постепенно, по буквам. При помощи jQuery иCSS создается эффект плавного появления текста,который Вы только что наблюдали.

Как видите, анимация текста при помощи jQuery и CSS выглядит довольно таки неплохо, но для нормальной ее работы, первоначально текст рекомендуется скрывать.

Давайте рассмотрим, как получить подобный эффект плавного появления текста по буквам на своем сайте. Первым делом стоит прописать стили для текста. Для этого разместите данные стили на своем сайте межу тегами <head></head>:

HTML код:

<style type="text/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;
}
</style>

Далее в нужном месте странички необходимо поместить текст, к которому и будем применять наш эффект анимации:

HTML код:

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

Для того чтобы скрипт анимации текста заработал на Вашем сайте, Вам потребуется подключить библиотеку jQuery. Рекомендуем его подключать в конце странички вот так:

JavaScript код:

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

После того, как библиотека jQuery была подключена, Вам остается только добавить JavaScript код, отвечающий за анимацию выводимого текста:

JavaScript код:

<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, и вывод текст целиком.

Закрыть меню
Боковая Панель Закрыть

Страницы:

Солушать совет Бота:

Озвучить

Цитата из Твиттера:

Уровень доверия к сайту, оставьте ваш отзыв:

Испытай Знания UA

close