Такой эффект можно применить на сайте для Вывода какого-нибудь текстового блока или рекламного сообщения. Все это будет осуществляться благодаря jQuery и CSS. Изначально каждая строка полностью прозрачная, потом пошагово с определенной задержкой все стает видимым и получается эффект набора текста.
Чтобы добавить такой блок с анимацией себе на сайт Вам нужно сделать следующие действия.
Шаг №1
В шапку перед закрывающимся head или в подвал перед закрывающимсяbody, Вам надо подключить библиотеку jQuery. Если это сделано ранее, то пропустите этот шаг.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Шаг №2
Далее нужно подключить скрипт, который и будет совершать анимацию нашего блока с текстом. Подключать его нужно в подвале. Если подключить в шапке, анимация может не работать.
<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'); }, 40 * i);
});
});
};
$('#example').show();
$('#example').animate_Text();
});
</script>
В 9 строке есть значение - 40, это задержка между анимацией. Чем больше число, тем медленнее будут появляться буквы и наоборот, если указать число меньше, анимация будет более плавной и быстрой.
Шаг №3
Теперь добавим сам блок, внутри которого будет текст, к которому будет применена анимация.
<div id="example"> Тут Ваш текст, который будет появляться. Строка за строкой, с плавным эффектом. Все это возможно при помощи jQuery и CSS.</div>
Шаг №4
Далее последний шаг, это добавить стили,
#example{padding:0px 0px 0px 100px;display:none;}
#example .new{opacity: 0;}
#example .div_opacity{
-webkit-transition: opacity .1s ease-in-out;
-moz-transition: opacity .1s ease-in-out;
-ms-transition: opacity .1s ease-in-out;
-o-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
opacity: 1;}
Все как обычно, стили можете настроить под себя. Сделав все правильно, у Вас появится анимация схожая с набором текста. Вот так вот.
На этом все, спасибо за внимание. 🙂
