Прыгающий текст или текст с эффектом волны
Предлагаем Вашему вниманию скрипт, позволяющий реализовать очень красивый эффект подпрыгивания текста или текст с эффектом волны. Рассматриваемый далее JavaScript код позволяет добавить к произвольному тексту эффект волны (поочередного подпрыгивания символов).
Наглядный пример работы предлагаемого скрипта, реализующего посимвольное подпрыгивание текста, Вы можете наблюдать ниже:
Для получения подпрыгивающего текста с эффектом волны на своей страничке, воспользуйтесь следующим JavaScript кодом, который необходимо будет разместить на Вашей страничке:
<script type="text/javascript">
var message = "UsefulScript.ru";
var mess = new Array( -1, -5, -9, -13, -9, -5, -1);
var num = 0;
var scope = 0;
var text = "";
function start_jumping() {
for (n=0; n != message.length; n++) {
text += "<span style='position: relative;' id='id_" + n + "'>" +
message.charAt(n) + "</span>"
}
jumping_text.innerHTML = text;
text = "";
move_left();
}
function move_left() {
first_symbol = document.getElementById("id_0");
first_symbol.style.left = -scope + "px";
if (scope != 12) {
scope += 4;
setTimeout("move_left();", 50);
}
else move_right();
}
function move_right() {
first_symbol.style.left = -scope + "px";
if (scope != 0) {
scope -= 4;
setTimeout("move_right();", 50);
}
else wave();
}
function wave() {
text = "";
for (n=0; n != message.length; n++) {
if (n+num > -1 && n+num < 7) {
text += "<span style='position: relative; top: " + mess[n+num] + "px'>" +
message.charAt(n) + "</span>"
}
else text += "<span>" + message.charAt(n) + "</span>";
}
jumping_text.innerHTML = text;
text = "";
if (num != (-message.length)) {
num--;
setTimeout("wave();", 50);
}
else {
num = 0;
setTimeout("start_jumping();", 50);
}
}
</script>Далее в том месте странички, где Вы планируете разместить текст, к которому будет применен эффект подпрыгивания, добавьте следующее:
<div id="jumping" style="font-weight: bold; font-size: 40px; color: green;"></div>После того как вы добавили все выше перечисленные фрагменты кода, остается только запустить выполнение скрипта. Для этого поместите в тело странички следующий JavaScript код:
<script type="text/javascript">
jumping_text = document.getElementById("jumping");
start_jumping();
</script>Хоть данный JavaScript код и не маленький по своим размерам, но он того стоит. Обратите внимание, что подпрыгивание текста начинается только после того, как первая буква текста "ударит" по остальному тексту и запустит волну.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.