Animation erstellen mit durchlaufen eines Arrays

Garavani

Hallo Leute,

ich versuche gerade eine Animation zu erstellen mit Hilfe eines (web)Fonts.

dazu habe ich eine Schrift erstellt, deren Buchstaben mit den einzelnen Bildern belegt sind.
Das klappt auch alles wunderbar.

lediglich mit dem Durchlaufen meines Arrays habe ich (Anfänger) Probleme.

So mein div in der page:
<div class="container"><h1 id="step">A</h1></div>

So sieht meine Animationsfunktion bisher aus (wird z.B. durch Klick oder on document ready ausgelöst):

function stepAnimation() {
steps = new Array("A","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","g","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9",":");
while(show = steps.shift()) {
$('#step').delay(200).text(show);
}
}

oder auch:

function stepAnimation() {
var steps = new Array("A","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","g","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9",":");
var show = "";
for(var i = 0; i < steps.length; i++) {
show = steps[i];
}
document.getElementById('step').innerText = show;
}

Bei beiden (und auch anderen Versionen) funktioniert das ganze scheinbar irgendwie, aber wohl zu schnell,
da ich stets nach dem Start nur das Endbild (also ":" aus dem Array) zu sehen bekomme.
Ich muss irgendwie eine Pause zwischen die einzelnen Bilder bekommen, damit die Animation auch sichtbar fürs Auge abläuft.
Das delay in der oberen jquery Variante ging auch nicht.
Ich mag jquery gern, ist mir also auch recht.

Kann mir jemand helfen?
Oder erkläre ich mich schlecht?

Danke Euch sehr

Garavani

Bandit

Ungetestet:

Code

var i = 0;
var steps = new Array("A","C","D","E","F","G","H","I","J","K","L","M",
                      "N","O","P","Q","R","S","T","U","V","W","X","Y",
                      "Z","a","b","c","d","e","g","i","j","k","l","m", 
                      "n","o","p","q","r","s","t","u","v","w","x","y",
                      "z","0","1","2","3","4","5","6","7","8","9",":") ;
function stepAnimation() 
{
  if (i < steps.length)
  {
     document.getElementById('step').innerText = steps[i];
     i++;
  }
}
while (i < steps.length)
  setTimeout("stepAnimation()", 200);

Alles anzeigen

Garavani

Hey Bandit!

Danke für die schnelle Antwort.
Habs ausprobiert, hat sich ein paar mal übel aufgehängt der arme Safari…
Hängt wohl da in einer Schleife fest.

Hab den Code ja 1:1 reinkopiert, mich ein bisschen gewundert, weil die Funktion ja dann unten offen ist…
oder bin ich einfach zu doof. Vermutlich.

Danke aber anyway.
Werde noch weiter probieren!

Garavani

PS:
Hier der ganze code der Seite.
Bitte nicht auf den anderen Murks achten

<!DOCTYPE html>
<html>
<head>
<head><title>SUPREMA LETTRES</title>
<style>
body {
background-color: #ffffff;
}
.container {
width: 100%;
max-width:1900px;
margin:0 auto;
}
h1 {
text-align: center;
color:#3c3c3c;
font: 50px/1.05 'SupranimatedRegular';
display: block;
padding-left: 5px;
}
@font-face {
font-family: 'SupranimatedRegular';
src: url('fonts/supranimate-webfont.eot');
src: url('fonts/supranimate-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/supranimate-webfont.woff') format('woff'),
url('fonts/supranimate-webfont.ttf') format('truetype'),
url('fonts/supranimate-webfont.svg#SupranimatedRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body { -webkit-font-smoothing: antialiased; }
</style>
<script src="edge_includes/jquery-1.7.1.min.js"></script>
<script src="edge_includes/jquery.fittext.js"></script>
<script type="text/javascript" language="JavaScript">

var i = 0;var steps = new Array("A","C","D","E","F","G","H","I","J","K","L","M", "N","O","P","Q","R","S","T","U","V","W","X","Y", "Z","a","b","c","d","e","g","i","j","k","l","m", "n","o","p","q","r","s","t","u","v","w","x","y", "z","0","1","2","3","4","5","6","7","8","9",":") ;function stepAnimation() { if (i < steps.length) { document.getElementById('step').innerText = steps[i]; i++; }}while (i < steps.length) setTimeout("stepAnimation()", 200);

</script>

</head>

<body>

<div id ="Supremextra" style="position: fixed; left: 5%; bottom: 15%; height: 33px; width: 120px;"><img src="images/Suprema.png"></div>
<div id ="arrowLast" style="position: fixed; margin-left: 0px; right: 50%; bottom: 5%; height: 47px; width: 50px;><img src="images/Arrow_left_pos.png"> </div>
<div id ="arrowNext" style="position: fixed; margin-left: 24px; left: 50%; bottom: 5%; height: 47px; width: 50px; cursor:pointer;" onclick="stepAnimation()"><img src="images/Arrow_right_pos.png"></div>
<script type="text/javascript">
$("#step").fitText(0.33);
</script>

</body>
</html>

Bandit

Ähm, ja, die Schleife darf nicht sein, versuche es mal so:

Code

var i = 0;
var steps = new Array("A","C","D","E","F","G","H","I","J","K","L","M",
                      "N","O","P","Q","R","S","T","U","V","W","X","Y",
                      "Z","a","b","c","d","e","g","i","j","k","l","m", 
                      "n","o","p","q","r","s","t","u","v","w","x","y",
                      "z","0","1","2","3","4","5","6","7","8","9",":") ;
function stepAnimation() 
{
  if (i < steps.length)
  {
     document.getElementById('step').innerText = steps[i];
     i++;
     setTimeout("stepAnimation()", 200);
  }
}
setTimeout("stepAnimation()", 200);

Alles anzeigen

synaptic

offtopic:
bandit, seit wann kannst du javascript hrhrhrh

Bandit

Zitat von synaptic

offtopic:
bandit, seit wann kannst du javascript

Ein paar Kleinigkeit bekomme ich ja hin, aber das hält sich in Grenzen.

Tags