Летающий по кругу или вращающийся текст
Предлагаем Вам ознакомится с еще одним JavaScript кодом, позволяющим реализовать эффект летающего текста (или кругового вращения текста). Данный скрипт позволяет задать не только скорость вращения, но и размер окружности, по которой будет вращаться нужный Вам текст.
Для наглядности работы скрипта обратите внимание на текст, летающий по кругу чуть ниже. Хотим обратить внимание на то, что данный текст будет летать поверх основного содержания Вашей странички:
текст,
состоящий
из четырех строк!
Чтобы получить точно такой же летающий текст на своем сайте, необходимо на Вашу страничку добавить для начала стили, которые мы будем применять к летающим строкам:
<style type="text/css">
.demo_spin { font-weight: bold; text-align: center; color:#009900; }
.demo_spin span { position: relative; }
</style>Далее добавьте на свой сайт JavaScript код, который отвечает за перемещение строк по кругу:
<script type="text/javascript">
arrCos = new Array(360);
arrSin = new Array(360);
for (i=0; i<360; i++) {
arrSin[i] = Math.sin(i * Math.PI / 180);
arrCos[i] = Math.cos(i * Math.PI / 180);
}
function rotate(objID, x, y, r, deg, rinc) {
y = r * arrSin[deg];
x = r * arrCos[deg];
document.getElementById(objID).style.left = x + "px";
document.getElementById(objID).style.top = y + r + 10 + "px";
if (deg % 50 == 0) r += rinc;
if (r > 50 || r < 10) {
rinc *= -1;
r += rinc;
}
deg += 12;
if (deg >= 360) deg = 0;
setTimeout("rotate('" + objID + "'," + x + "," + y +
"," + r + "," + deg + "," + rinc + ")", 80);
}
function start() {
x = 0; y = 0; r = 10; deg = 0; rinc = 1;
rotate("obj_1", x, y, r+10, deg, rinc);
rotate("obj_2", x, y, r, deg+40, rinc);
rotate("obj_3", x, y, r+15, deg+60, rinc);
rotate("obj_4", x, y, r, deg+90, rinc);
}
</script>Далее необходимо вставить собственно сам текст, который будет вращаться по окружности. Делается это вот так:
<div class="demo_spin">
<i>
<span style="font-size: 24px;" id="obj_1">Вращающийся</span><br>
<span style="font-size: 20px;" id="obj_2">текст,</span>
</i><br>
<span style="font-size: 20px;" id="obj_3">состоящий</span><br>
<span style="font-size: 18px;" id="obj_4">из четырех строк!</span>
</div>После того, как Вы вставили текст, который будет летать по окружности, необходимо запустить функцию вращения start() следующим образом:
<script type="text/javascript">
start();
</script>Если Вы все сделали правильно, то у Вас на сайте должен быть точно такой же летающий по кругу текст, как и в нашем примере. Как видите, ничего сложного в данном JavaScript коде нет.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.