Сейчас: 10:09:02   26-го апреля 2024 г.
23
57

Прыгающий текст или фраза

Если Вы хотите, чтобы посетители Вашей странички обратили внимание на какой-либо текст (или ссылку), то не обязательно выделять его жирным или делать крупнее. Достаточно добавить немного движения (в нашем случае подпрыгивания), и посетитель обязательно его заметит.


Для того чтобы понять, о каком эффекте прыгающего текста идет речь, обратите свое внимание на подпрыгивающую ниже фразу.





Прыгающий текст или фраза

Чтобы получить на своем сайте эффект подпрыгивания для текста, как и на данной страничке, воспользуйтесь JavaScript кодом, представленным ниже:

JavaScript код:
<script type="text/javascript">
var 
amplitude 90;
var 
left_pos "200px";
var 
top_pos 0;
var 
pi Math.PI;
var 
inc pi/40;
var 
position 0;

function 
prig() {
    
position += inc;
    if (
position>= piposition 0;
    
obj.style.left left_pos;
    
obj.style.top top_pos - (amplitude Math.sin(position)) + "px";
    
setTimeout("prig()"60);
}
</script>

Данный JavaScript код необходимо поместить в начало Вашей странички. Затем необходимо добавить блок, содержащий текст или фразу, к которому мы будем применять эффект подпрыгивания. Делается это следующим образом:

HTML код:
<div id="obj" style="position: relative;">
 
Прыгающий текст или фраза
</div>

Далее остается только запустить скрипт для начала движения блока следующим образом:

JavaScript код:
<script type="text/javascript">
var 
obj document.getElementById("obj");
prig();
</script>

Если Вы все сделали правильно, то у Вас должна получиться точно такая же подпрыгивающая фраза, как и в примере работы скрипта подпрыгивающего текста на данной страничке.


Подобный прыгающий текст или фраза сразу бросаются в глаза и привлекают внимание посетителей, но не стоит переусердствовать с использованием данного приема, т.к. некоторых Ваших посетителей обилие движущихся элементов может только раздражать.

Дата создания: 22:48:18 09.12.2011 г.
Дата обновления: 20:02:21 02.10.2012 г.
Посещений: 6687 раз(а).

Комментарии посетителей (2 шт.):
Константин
-1
# 1196
(09:52:46  11.10.2013 г.)

А как в скрипт добавить нужный цвет текста?
Ответить

Administrator
-1
# 1197
(18:16:45  11.10.2013 г.)

Измените стить блока DIV, например, <div id="obj" style="position: relative; color: red;">
Ответить

Закрыть
Ваше имя:
173 + 4 =
Добавить комментарий:
Ваше имя:
173 + 4 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 5

Мешает ли Вам реклама?