Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  суббота, февраля 04, 2012  

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

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

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

Визуальный пример этого эффекта вы можете взглянуть здесь.

Скрипт переливающегося текста:
<script language="JavaScript1.2">
var message="Заданный текст"
var neonbasecolor="#990000"
var neontextcolor="#f72c16"
var neontextcolor2="#f4fc5d"
var flashspeed=120
var flashingletters=3
var flashingletters2=1
var flashpause=0
var n=0
if (document.all||document.getElementById){
   document.write('<font color="'+neonbasecolor+'" size=+1>')
   for (m=0;m<message.length;m++)
 document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
   document.write('</font>')
}
else
   document.write(message)
function crossref(number){
   var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
   return crossobj
}
function neon(){
   //Change all letters to base color
   if (n==0){
 for (m=0;m<message.length;m++)
 crossref(m).style.color=neonbasecolor
 }
   crossref(n).style.color=neontextcolor
   if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
   if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
   if (n<message.length-1) n++
   else{
 n=0
 clearInterval(flashing)
 setTimeout("beginneon()",flashpause)
 return
 }
}
function beginneon(){
   if (document.all||document.getElementById)
   flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
Пояснения к скрипту:
var message - текстовая информация, которая и будет переливаться цветами;
var neonbasecolor - основной, статичный, цвет текста;
var neontextcolor - первый цвет волны;
var neontextcolor2 - следующий цвет волны;
var flashspeed - скорость цветной волны;
var flashingletters - количество букв, участвующих в формировании первой волны;
var flashingletters2 - соответственно, количество букв, участвующих в формировании следующей волны цвета.
Остается выбрать нужный участок текстовой информации в блоге, который предстоит оформить подобным образом, и заменить его этим скриптом. Данный эффект непосредственно в Blogger можно разместить как с помощью гаджета HTML/JavaScript, так и в теле создаваемого сообщения.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.