простой текст анимации в JavaScript/DHTML/холст

Скажем, у меня есть некоторый текст следующим образом:простой текст анимации в JavaScript/DHTML/холст

сделать это, сделать это,

то это, то, что

Я использую CSS для добавления тени.

Я могу также использовать CSS, чтобы добавить желтое свечение позади «сделать это», как описано здесь: http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/

То, что я хочу, это повторяющаяся анимация:

1 второе: сделать «сделать это»свечение, все остальное падающая тень
1 второе: сделать„сделать это“свечение, все остальное падающая тень
1 второе: сделать„ то это“свечение, все остальное падающая тень
1 секунда: сделать «тогда это» свечение, все остальное - тень Это должно повториться в бесконечном цикле.

Как написать эту анимацию?

источник

2010-09-25 Joseph Turian

был мой ответ полезным? – bogatyrjov

Вы можете использовать:

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Jevgenis Animation</title> 
     <script type="text/javascript"> 
      var c = -1; 
      var els = new Array("el1", "el2", "el3", "el4"); 
      function nextEffect() { 
      for(i = 0; i <= 3; i++) 
       document.getElementById(els[i]).style.textShadow = "2px 2px #FF3333"; 
      c = c >= els.length - 1 ? 0 : c + 1; 
      var e = document.getElementById(els[c]); 
      e.style.textShadow = "0 0 3px #FF3333"; 
      } 
     </script> 
     <style type="text/css"> 
      .shadow { text-shadow: 2px 2px #FF3333 } 
     </style> 
     </head> 
     <body onload="setInterval('nextEffect()', 1000);"> 
     <span id="el1" class="shadow">do this</span> 
     <span id="el2" class="shadow">do that</span> 
     <span id="el3" class="shadow">then this</span> 
     <span id="el4" class="shadow">then that</span> 
     </body> 
    </html>

тестировал, отлично работает в FF, Opera, Chrome, Safari.

Для IE, вероятно, вы должны реализовать что-то подобное:

el1 { filter: 
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45) 
progid:DXImageTransform.Microsoft.Glow(Color=#bbbbbb,Strength=2) 
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')}

источник

2010-09-25 22:29:14 bogatyrjov

Вот как я подошел к этому:

Вы можете сделать переменную var animStep = 0, а затем использовать самоповторяющуюся функцию, как ANIMATE проверить и приращение animStep, которое действует для отслеживания состояния анимации.

Рассмотрим следующий псевдокод:

Animate 4 Frames{ 
    Frame 1: Do this glows, and everything else has a shadow 
    Frame 2: Do that glows, and everything else has a shadow 
    Frame 3: Then this glows, and everything else has a shadow 
    Frame 4: Then that glows, and everything else has a shadow 
}

Теперь давайте превратить это в реальный код, который прост:

var animStep = 0; 
ANIMATE = function(){ 
    if(animStep == 0){ 
     //First frame -- where 'Do this' glows, everything else has shadow 
    }else if(animStep == 1){ 
     //Second frame -- where 'Do that' glows 
    }else if(animStep == 2){ 
     //Third frame -- where 'then this' glows 
    }else if(animStep == 3){ 
     //Last frame -- where 'then that' glows 
    } 
    animStep++; 
    animStep = animStep == 4 ? 0 : animStep 
    setTimeout(ANIMATE,1000); 
} 
ANIMATE();

Это позволит анимировать, вы просто должны сказать ему, что делать.

Я сделал пример here, что делает что-то подобное

источник

2013-01-12 19:26:53

простой текст анимации в JavaScript/DHTML/холст

ответ

Смежные вопросы