Панель Управления

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

В данной теме мы хотим показать Вам небольшой скрипт, который позволяет при помощи 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, и вывод текст целиком.

Donat
Экспресс меню навигации

DAHOCK PORTAL

Голосовой помощник

Скажите ключевое слово например "Статьи".

Музыкальный Плеер
cover art cover art
0:00
Все треки
close