animation simple texte en JavaScript/DHTML/toile

Disons que j'ai un texte comme suit:animation simple texte en JavaScript/DHTML/toile

font ceci, fais cela,

alors ce, alors que

J'utilise CSS pour ajouter une ombre portée.

Je peux aussi utiliser les CSS pour ajouter une lueur jaune derrière « faire », comme décrit ici: http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/

Ce que je veux est une animation répétitive:

1 seconde: faire « faire cette » lueur, tout le reste est ombre
1 seconde: faire « faire » lueur, tout le reste est ombre
1 seconde: faire « alors cette » lueur, tout le reste est ombre
1 seconde: faire "alors que" briller, tout le reste est l'ombre portée Cela devrait répéter sur boucle sans fin.

Comment écrire cette animation?

Source

2010-09-25 Joseph Turian

était ma réponse utile? – bogatyrjov

Ne hésitez pas à utiliser:

<!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>

testé, fonctionne très bien dans FF, Opera, Chrome, Safari.

Pour IE, vous devriez probablement mettre en œuvre quelque chose de similaire:

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')}

Source

2010-09-25 22:29:14 bogatyrjov

Voilà comment je me suis approché ceci:

Vous pouvez faire une var animStep = 0 variable, utilisez alors une fonction d'auto-répétition, comme ANIMATE pour vérifier et incrémenter animStep, qui agit pour suivre l'état de l'animation.

Considérons le pseudo-code suivant:

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 
}

Maintenant, nous allons transformer en code réel, ce qui est simple:

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();

vous risquez de rendre Animer, il vous suffit de lui dire quoi faire.

J'ai fait un exemple here qui fait quelque chose semblable

Source

2013-01-12 19:26:53

animation simple texte en JavaScript/DHTML/toile

Répondre

Questions connexes