Ergebnis 1 bis 6 von 6

Thema: Animation erstellen mit durchlaufen eines Arrays

  1. #1
    Youngster
    Registriert seit
    15.05.2012
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Animation erstellen mit durchlaufen eines Arrays

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: Animation erstellen mit durchlaufen eines Arrays

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

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    15.05.2012
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Animation erstellen mit durchlaufen eines Arrays

    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 class="container"><h1 id="step">A</h1></div>


    <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; cursorointer;" onclick="stepAnimation()"><img src="images/Arrow_right_pos.png"></div>
    <script type="text/javascript">
    $("#step").fitText(0.33);
    </script>

    </body>
    </html>

  4. #4
    Bandit
    Gast

    Standard AW: Animation erstellen mit durchlaufen eines Arrays

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

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Animation erstellen mit durchlaufen eines Arrays

    offtopic:
    bandit, seit wann kannst du javascript hrhrhrh
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Bandit
    Gast

    Standard AW: Animation erstellen mit durchlaufen eines Arrays

    Zitat Zitat von synaptic Beitrag anzeigen
    offtopic:
    bandit, seit wann kannst du javascript
    Ein paar Kleinigkeit bekomme ich ja hin, aber das hält sich in Grenzen.

Ähnliche Themen

  1. [suche] Flash-Animation erstellen
    Von Dark_Dog im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 0
    Letzter Beitrag: 13.07.2011, 12:10
  2. Ersten Wert eines arrays in eine Variable übergeben
    Von Whesley im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 05.05.2008, 14:15
  3. [C++] Alle Elemente eines Arrays mit -2 füllen.
    Von DarkSyranus im Forum Forum für alle anderen Programmiersprachen
    Antworten: 6
    Letzter Beitrag: 27.01.2008, 15:50
  4. animation/cartoon erstellen - nichts geht T_T hilfe
    Von chikara im Forum Flash Forum
    Antworten: 3
    Letzter Beitrag: 05.03.2007, 13:13
  5. Erstellen eines forums Help!!
    Von DeeJay-Luke im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.10.2003, 17:36

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •