Анимация, заключающаяся в изменении цвета фрагмента текста. Цвет текста, расположенного на белом фоне, периодически плавно изменятся от белого до черного, а затем – обратно до белого.
<html lang="ru">
<head>
<title>Анимационные эффекты | Плавное "проявление" и "исчезновение" текста</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<style type="text/css">
<!--
BODY
{
background: white;
}
TABLE
{
width: 100%;
height: 100%;
}
DIV.fader
{
color: white;
font: normal 120px "Times New Roman", serif;
}
-->
</style>
</head>
<body>
<TABLE>
<TR>
<TD align="center" valign="middle">
<DIV class="fader" ID="ID_DIV_FADER">Текст</DIV>
</TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
var nDelta = -1;
var nBrightness = 255;
function OnTimer()
{
nBrightness += nDelta;
if(nBrightness == 0)
nDelta = 1;
else if(nBrightness == 255)
nDelta = -1;
var str = nBrightness.toString(10);
document.getElementById("ID_DIV_FADER").style.color = "RGB(" + str + "," + str + "," + str + ")";
}
window.setInterval(OnTimer, 20);
// -->
</script>
<noscript>
Внимание! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.
</noscript>
</body>
</html> /17/.
Текст, движущийся на наблюдателя
Движение текстовой надписи с удаленного расстояния в направлении зрителя.
<html lang="ru">
<head>
<title>Анимационные эффекты | Текст, движущийся "на наблюдателя"</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<style type="text/css">
<!--
BODY
{
background: white;
}
TABLE
{
width: 100%;
height: 100%;
}
#ID_ANIMATE
{
font: normal 1px "Times New Roman", serif;
}
-->
</style>
</head>
<body>
<TABLE>
<TR>
<TD align="center" valign="middle">
<DIV ID="ID_ANIMATE">Текст</DIV>
</TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
var nSize = 0;
var nMaxSize = 120;
// --
var oAnimate = document.getElementById("ID_ANIMATE");
// --
function OnTimer()
{
oAnimate.style.fontSize = nSize++;
if(nSize > nMaxSize)
nSize = 0;
}
window.setInterval(OnTimer, 20);
// -->
</script>
<noscript>
Внимание! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.
</noscript>
</body>
</html> /17/.
Создание бегущих строк
Вариант 1
Текст выводится не в строку состояния, а в текстовый узел дерева документа.
<html lang="ru">
<head>
<title>Анимационные эффекты | Бегущая строка, вариант 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<style type="text/css">
<!--
BODY
{
background: white;
}
TABLE
{
width: 100%;
height: 100%;
}
#ID_ANIMATE
{
color: black;
white-space: pre;
font: bold 24px "Courier New", monotype;
}
-->
</style>
</head>
<body>
<TABLE>
<TR>
<TD align="center" valign="middle"><pre ID="ID_ANIMATE"></pre></TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
var nPos = 0;
var nLen = 16;
var strSample = "Пример бегущей строки (вариант 1)...";
// --
var oContainer = document.createTextNode("");
document.getElementById("ID_ANIMATE").appendChild(oContainer);
// --
function OnTimer()
{
oContainer.nodeValue = strSample.substring(nPos, nPos + nLen);
if(++nPos > (strSample.length - nLen))
nPos = 0;
}
// --
var str = '';
for(var i = 0; i < nLen; i++)
str += " ";
strSample = str + strSample + str;
// --
OnTimer();
window.setInterval(OnTimer, 100);
// -->
</script>
<noscript>
Внимание! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.
</noscript>
</body>
</html>
Вариант 2
Использование в бегущей строке гипертекстового содержимого. Перемещение гипертекстового содержимого производится плавно, с интервалом в один пиксел.
<html lang="ru">
<head>
<title>Анимационные эффекты | Бегущая строка, вариант 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<style type="text/css">
<!--
BODY
{
background: white;
}
TABLE
{
width: 100%;
height: 100%;
}
#ID_ANIMATION
{
position: relative;
padding: 0px;
width: 256px;
overflow: hidden;
}
#ID_ANIMATE
{
display: inline;
position: relative;
padding: 0px;
margin: 0px;
color: black;
white-space: pre;
font: normal 12px "Courier New", monotype;
}
-->
</style>
</head>
<body>
<TABLE>
<TR>
<TD align="center" valign="middle"><DIV ID="ID_ANIMATION"><pre ID="ID_ANIMATE">Бегущая строка (вариант 2). Можно включать произвольное содержимое. Ссылка: <a href="https://codeguru.ru">codeguru.ru</a>. Изображения: <img src="img/smile.gif"> <img src="img/lol.gif"> <img src="img/rotate.gif"> <img src="img/wink.gif"> <img src="img/beer.gif"></pre></DIV></TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
var oText = document.getElementById("ID_ANIMATE");
var oContainer = document.getElementById("ID_ANIMATION");
var nWidth = oText.offsetWidth;
var nPos = oContainer.offsetWidth;
// --
function OnTimer()
{
oText.style.left = nPos.toString() + "px";
if(--nPos < -nWidth)
nPos = oContainer.offsetWidth;
}
// --
OnTimer();
window.setInterval(OnTimer, 20);
// -->
</script>
<noscript>
Внимание! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.
</noscript>
</body>
</html> /17/.