Пульсирующий текст или эффект пружины
На наш взгляд очень интересным получился скрипт пульсирующего текста или как его еще называют "текст с эффектом пружины". Суть данного скрипта заключается в постепенном увеличении и последующем постепенном уменьшении расстояния между буквами в строке. Получается, что текст поочередно то расширяется, то сжимается.
На экране это будет выглядеть следующим образом:
Чтобы данный скрипт заработал у Вас на сайте, вставьте в начало странички JavaScript код, отвечающий за расширение и сжатие интервала между буквами:
<script type="text/javascript">
function text_pulse(id) {
if (null == id.direction) id.direction = 1;
else if ((id.sizes.pos > id.sizes.length - 2) ||
(0 == id.sizes.pos)) id.direction *= -1;
id.style.letterSpacing = id.sizes[id.sizes.pos += id.direction];
}
</script>Далее, в том месте Вашей странички, где необходимо получить пульсирующий текст, используйте следующий код:
<div style="text-align: center;">
<b style="font-size:28px; color:#CC0000;" id="pulse">Демонстрация работы скрипта</b>
</div>
<br>
<div style="text-align: right;">
<b style="font-size:22px; color:#006600;" id="pulse2">Второй пример работы скрипта</b>
</div>После того, как был добавлен JavaScript код с функцией text_pulse() и выбрано место, где будет отображаться пульсирующий текст, вызываем функцию text_pulse() с необходимыми параметрами:
<script type="text/javascript">
var s = document.getElementById("pulse");
s.sizes = new Array("0px", "1px", "2px", "3px", "4px", "5px");
s.sizes.pos = 0;
var s2 = document.getElementById("pulse2");
s2.sizes = new Array("0px", "1px", "2px", "3px", "4px");
s2.sizes.pos = 0;
setInterval("text_pulse(pulse)", 200);
setInterval("text_pulse(pulse2)", 200);
</script>Обратите внимание, что если текст выровнен по правому краю, то он будет расширяться только в левом направлении и наоборот! Если выравнивание текста произведено по центру, то расширяться он будет сразу в обе стороны.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.