Пример волнообразного текста. Вариант 3.

hand.gif (969 bytes)Ограничения: Netscape 4.0+  или Microsoft Internet Explorer 4.0+.

Описание:

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

                                                        


Инструкция:

В тэг <head> Вашей HTML-страницы вставьте следующий код:
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>Пример волнообразного текста</title>

<style type="text/css">
// Определяем атрибуты шрифта
.scroll {font-weight:bold; font-size:12; text-align: center; font-family: Verdana, Courier, Courier New;}
</style>

<script language="JavaScript1.2">
/*
Библиотека скриптов Юрия Сергеева,   http://www.crosswinds.net/~ysergeev/money.htm
EMail: ysergeev@mail.ru
*/

// глобальные переменные
var initialx, initialy, scrolltext;
var frame = 0, frame2 = 0.5;
var amplitude1 = 50, amplitude2 = 30;
var offset = 0.2, speed = 0.2, speed2 = 0.35;
var offset2 = 0.6;
var scrollspeed = 6; // скорость прокрутки текста
var charwidth = 30;

var twopi = Math.PI * 2;
var chracters, position, numvisible, nextchar, firstchar;
var skipsteps = 1;
var delaytimer = 0;
var interval;

// функция для создания синусоидальной прокрутки
function sinescroll (x, y, value, number_of_chars)
{
    // глобальные установки
    scrolltext = new String(value);
    initialx = x;
    initialy = y;
    numvisible = number_of_chars;
    nextchar = numvisible;
    firstchar = 0;

    // создание массива  символов фиксированного размера и их абсолютных позиций на HTML-странице
    characters = new Array(numvisible);
    position = initialx;

    //запись всех символов из созданного выше массива в содержимое DIV-тэга
    for (var i = 0; i < numvisible; i++)
    {
        document.write('<DIV ID="character" STYLE="position:absolute;top:',
            initialy, ';left:-10000', //(initialx + i * charwidth),
            ';width=', charwidth, ';height=30;" ><p class=scroll>',
            scrolltext.charAt(i), '</p></DIV>');
    }
}

// функция анимации
function step ()
{
    // инкрементные счетчики
    frame += speed;
    frame2 += speed2;

    // задержка таймера
    if (delaytimer > 0)
    {
        delaytimer--;
    }
    else
    {
        // изменение позиции
        position -= scrollspeed;
    }

    //контроль смещения по экрану
    if (position < (initialx - charwidth))
    {
        while (scrolltext.charAt(nextchar) == '|')
        {
            delaytimer += 90;
            nextchar++;
        }

        // выборка следующего символа из массива символов
        characters[firstchar].innerHTML = '<p class=scroll>' + scrolltext.charAt(nextchar) + '</p>';

        // переход к следующему символу
        nextchar++;

        // проверка, нужна ли прокрутка с переносом символа
        if (nextchar >= scrolltext.length)
        {
            nextchar = 0;
        }

        // изменение значений счетчиков позиции и смещения
        position += charwidth;
        frame += offset;
        frame2 += offset2;

        // замена первого символа другим символом
        firstchar++;

        if (firstchar >= numvisible)
        {
            firstchar = 0;
        }
    }

    // счетчики переноса символов в полосе прокрутки
    if (frame > twopi) frame -= twopi;
    if (frame2 > twopi) frame2 -= twopi;

    // задание переменных для организации цикла
    var angle = frame;
    var angle2 = frame2;
    var pos = position;

    // динамическое изменение  html-страницы
    for (var i=firstchar; i < numvisible; i++)
    {
        characters[i].style.left = pos;
        characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2);
        angle += offset;
        angle2 += offset2;
        pos += charwidth;
    }

    for (var i=0; i < firstchar; i++)
    {
        characters[i].style.left = pos;
        characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2);
        angle += offset;
        angle2 += offset2;
        pos += charwidth;
    }
}

// старт анимации
function start ()
{
if (!document.all)
return
    // сброс всех элементов  DIV - тэга  в массив (только Internet Explorer?)
    characters = document.all.item('character');
   
    // установка величины таймаута для последующего вызова данной функции
    interval = window.setInterval("step();", 20);
}

// остановка анимации
function stop ()
{
if (!document.all)
return
    if (interval)
        clearInterval(interval);
}

window.onload=start
window.onunload=stop


// создание прокрутчика
if (document.all)
sinescroll(30,80,"*Пример текстовой волны*",24);

</script>

</head>


Источник материалов: http://dynamicdrive.com/


Copyright © 2001 г. Юрий Сергеев

При использовании материалов обязательна ссылка на
 
 http://www.crosswinds.net/~ysergeev/money.htm


Пример волнообразного текста. Вариант 3.

 

Хостинг от uCoz