Плавное появление текста по буквам
В данной теме мы хотим показать Вам небольшой скрипт, который позволяет при помощи jQuery и CSS создавать на собственном сайте текст с плавным появлением по буквам.
Для того чтобы понять о каком эффекте плавного появления текста идет речь, обновите страничку и обратите внимание на текст расположенные ниже:
Как видите, анимация текста при помощи jQuery и CSS выглядит довольно таки неплохо, но для нормальной ее работы, первоначально текст рекомендуется скрывать.
Давайте рассмотрим, как получить подобный эффект плавного появления текста по буквам на своем сайте. Первым делом стоит прописать стили для текста. Для этого разместите данные стили на своем сайте межу тегами <head></head>:
<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>Далее в нужном месте странички необходимо поместить текст, к которому и будем применять наш эффект анимации:
<div id="example" style="padding: 0px 0px 0px 100px; width: 350px; display: none;">
Тут Ваш текст, который будет плавно появляться.</div>Чтобы скрипт анимации текста заработал на Вашем сайте, Вам потребуется подключить библиотеку jQuery. Рекомендуем его подключать в конце странички вот так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>После того, как библиотека jQuery была подключена, Вам остается только добавить 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, и вывод текст целиком.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Объясню, - у меня строки выводятся одна за другой (сколько влазит в ширину width) не переносятся по окончанию строки, пробовал Каждую строку заворачивать в <p></p>, в конце каждой строки ставить <br />, \n и т.п. не помогает.
Мне нужно чтоб каждая строка стиха выводилась новой строкой.
Т.к. весь текст разбивается скриптом на отдельные символы, то для перевода строк нужно будет использовать какой-нибудь редко используемый символ и к тому же он должен быть не служебный. Предлагаю использовать символ "~" (добавлять в его конце строки вместо <br />).
А в коде строку: $this.html(string.replace(/./g, '<span class="new">$&</span>'));
заменяем на две такие:
string=string.replace(/./g, '<span class="new">$&</span>');
$this.html(string.replace(/~/g, '<br />'));
Скрипт отличный, особенно сейчас :), я правда пошёл другим путём, - я закомментировал строку $this.html(string.replace(/./g, '<span class="new">$&</span>'));, каждую строку текста руками завернул в <span class="new">, вышло не так эффектно но так как я ещё не такой спец как Вы (я только учусь) то мне итак понравилось, а Ваш вариант нравится ещё больше подход интересный.