Dahock Сообщество - Анимация текста

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

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

Задачи 2019
Просмотров: 241
Рейтинг: 3.6

Обновление
Просмотров: 304
Рейтинг: 2.5

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

 Навигация Основное:

На Музыкальный Сайт  (Музыкальный Сайт на котором эксклюзивное видео и аудиозаписи с RaidCall)

На Кино Сайт    (Кино Сайт где вы найдете мультфильмы,фильмы и шоу а также фильмы от Dahock)

На Хоррор Сайт  (Мистический Сайт где только мрак и тишина любителям мистики)

На Manual Dahock  (Мануал для тех кто попал впервые на Портал)

На XDXKX  (Hard Anime Сайт только +18)

На Газета DHK  (Авторский Информационный Блог)

Каналы:

Ютуб (Основной канал  всегда самое первое видео выходит раньше всего)

Рутуб (Второстепенный канал на русскоязычном портале)

Соц-Сети:

Вконтакте   (В этой группе всегда все самые самые свежие новости а также регулярные новости)

Одноклассники  (Для тех кто не сидит не где кроме Одноклассники)

Фейсбук  (Всемирная соц сеть где выходят не все новости а только отсортированные)

МайлРу  (Редкая группа редко выходят новости и видео для тех кто не любит ничего кроме МайлРу)

Твиттер  (Всегда свежие статейки ссылки и цитаты)

close