Текст с эффектом волны за счет
увеличения и уменьшения букв
Ранее мы уже рассматривали скрипт, позволяющий создать Прыгающий текст или текст с эффектом волны. Отличие предлагаемого в данной теме скрипта от рассмотренного ранее заключается в том, что в данном случае эффект волны получается за счет постепенного увеличения и уменьшения размера букв в текстовой строке.
Наглядный пример текста с эффектом волны за счет постепенного увеличения и уменьшения размера букв Вы можете наблюдать ниже:
Для того, чтобы получить на своем сайте точно такой же текст с эффектом волны, добавьте на свою страничку следующий JavaScript код:
<script type="text/javascript">
function next_Size(i, Length) {
return (14 + 22 * Math.abs(Math.sin(i / Length * 3.14)));
}
function size_Cycle(Wave, dis, text) {
var out = "";
for (i = 0; i < text.length; i++) {
size = parseInt(next_Size(i + dis, text.length));
out += "<b style='font-size: "+ size +"px'>" + text.substring(i,i+1) + "</b>";
}
if (document.all) document.all(Wave).innerHTML = out;
else if (document.getElementById) {
rng = document.createRange();
el = document.getElementById(Wave);
rng.setStartBefore(el);
html_Frag = rng.createContextualFragment(out);
while (el.hasChildNodes()) el.removeChild(el.lastChild);
el.appendChild(html_Frag);
}
}
function Wave_start(id, n, str) {
size_Cycle(id, n, str);
if (n > str.length) n = 0;
setTimeout("Wave_start('" + id + "', " + (n + 1) + ", '" + str + "')", 90);
}
</script>В том месте странички, где Вам необходимо отобразить текст с эффектом волны, добавьте следующий код:
<div id="Div_Wave" style="text-align: center;"></div>
<div id="Div_Wave2" style="text-align: center;"></div>Теперь остается только запустить функцию постепенного увеличения и уменьшения размера букв в текстовой строке для придания тексту эффекта волны. Делается это следующим образом:
<script type="text/javascript">
Wave_start("Div_Wave", 0, "Скрипты на http://UsefulScript.ru");
Wave_start("Div_Wave2", 0, "Онлайн-сервисы и хитрости");
</script>Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.