Texteffekt

Seite 12

1 Anunnaki (Gast)

Hallo Leute
neulich habe ich folgenden Artikel mit einem wunderschönen Texteffekt gefunden:
http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/

nun möchte ich es so haben, dass ich beliebig viele Texteelemente nacheinander mit diesem Texteffekt erscheinen lasse. Also egal ob drei Sätze nacheinander oder neun.
Dazu habe ich das folgende gefunden (siehe Antwort 1), aber leider weiß ich nicht wie ich das in meinem Beispiel umsetzen soll:
http://stackoverflow.com/questions/7705610/javascript-shuffle-letters
wo zum Beispiel definierte ich die einzelnen Sätze usw.

Könnte mir bitte jemand mitteilen, wie ich das ganze in meinem Beispiel einfügen muss?
Mein Beispiel ist dieses:
http://anunnaki.serverma.de/demo/index2.html

vorab schon mal vielen herzlichen Dank!

2 Jörg Kruse

Du könntest die Texte in einem Array ablegen und dieses dann in einer Schleife durchlaufen lassen:

$(function(){
  /* ... */
  var arrTexts = [ 'Eins zwei drei', 'vier fünf sechs', 'sieben acht neun' ];
  var interval = 4000;
  $.each(arrTexts, function(index, text) {
    // Leave a 4 second pause
    setTimeout(function(){
      // Shuffle the container with custom text
      container.shuffleLetters({
        "text": text
      });
    }, interval);
    interval += 4000;
  });
});

Der Timeout muss dabei bei jedem Schleifendurchlauf um den entsprechenden Intervall erhöht werden

3 Anunnaki (Gast)

Hallo Jörg
vielen Dank für deine Antwort!
Ich werde mich mal daran versuchen
dir noch einen schönen Tag

4 Anunnaki (Gast)

Hallo Jörg

Danke für deine Antwort!
Da ich mich mit JavaSkript gar nicht auskenne (habe Grundkenntnisse in HTML und CSS und möchte diese ausbauen und danach JavaSkript lernen), habe ich nicht gewusst, was Du mit folgenden gemeint hast:

  /* ... */

Ich habe dann dafür folgendes eingesetzt:

  var container = $("#container");

mein Skript sieht dann folgendermaßen aus:

$(function(){
  var container = $("#container");
  var arrTexts = [ 'Eins zwei drei', 'vier fünf sechs', 'sieben acht neun' ];
  var interval = 4000;
  $.each(arrTexts, function(index, text) {
    // Leave a 4 second pause
    setTimeout(function(){
      // Shuffle the container with custom text
      container.shuffleLetters({
        "text": text
      });
    }, interval);
    interval += 4000;
  });
});

leider funktioniert das Ganze noch nicht so, wie ich das haben möchte.
Der Text, der in HTML in der variable Container hinterlegt ist, wird nicht mit dem Effekt wiedergegeben.
Siehe hier:
http://anunnaki.serverma.de/demo/index3.html

Und nach Möglichkeit hätte ich das ganze Gerne so, dass das Ganze in einer Endlosschleife wiederholt wird.
Wäre super, wenn du mir mitteilen könntest, was ich ändern muss. Danke schon mal.

5 Jörg Kruse

Zitat von Anunnaki
Da ich mich mit JavaSkript gar nicht auskenne (habe Grundkenntnisse in HTML und CSS und möchte diese ausbauen und danach JavaSkript lernen), habe ich nicht gewusst, was Du mit folgenden gemeint hast:
  /* ... */

Ja, das war ein Platzhalter für den oberen Teil deines Codes

Siehe hier:
http://anunnaki.serverma.de/demo/index3.html

Die Seite liefert bei mir eine "Not found"-Fehlermeldung?

6 Anunnaki (Gast)

oh, tut mir leid. Habe anscheinend vergessen die Dateien hoch zu laden. Habe das nun aber getan.
Habe auch noch ein weiteres Beispiel erstellt. Uns war dieses hier:
http://anunnaki.serverma.de/demo/index4.html
Bei diesem Beispiel hätte ich dann eben gerne, dass das Ganze in eine Endlosschleife wiederholt wird.

7 Jörg Kruse

Ein Lösung für eine Endlosschleife über ein Array mittels rekursiver Funktion findet sich auf stackoverflow:

http://stackoverflow.com/questions/6051471/jquery-infinite-loop-through-array-each#answer-6051567

Übertragen auf deinen Code:

$(function(){
  var container = $("#container");
  var arrTexts = [ 'Eins zwei drei', 'vier fünf sechs 456', 'sieben (7) acht neun', 'und jetzt das Ganze noch einmal' ];
  (function recurse(counter) {
    var text = arrTexts[counter];
    container.shuffleLetters({
      "text": text
    });
    delete arrTexts[counter];
    arrTexts.push(text);
    setTimeout(function() {
      recurse(counter + 1);
    }, 4000);
  })(0);
});

8 Anunnaki (Gast)

Guten Morgen Jörg

Danke für deine Hilfe!!!
Nun funktioniert alles so, wie ich es haben möchte.
Echt klasse von dir, dass du mir so sehr geholfen hast!
Ich wünsche dir eine gute Zeit!
Nochmals danke!

... 1 Monat später ...

9 Anunnaki (Gast)

Ich habe einen neuen Texteffekt gefunden, der eine alte Anzeigetafel an einem Bahnhof oder Flughafen simuliert. Und zwar diesen hier: https://github.com/jayKayEss/Flapper
ich habe das ganze auf das nötigste reduziert und ein bisschen herumgespielt, aber das Ganze ist nicht so wie ich mir das wünsche.
Wie beim Texteffekt damals (der Texteffekt, um den es beim Start dieses Beitrages ging) würde ich es gerne so haben, dass ich beliebig viele Wörter nacheinander anzeigen kann und dass das Ganze in eine Endlosschleife abgespielt wird. Das mit der Endlosschleife kann dieses Skript schon, aber wie man beliebig viele Wörter nacheinander anzeigen kann, weiß ich nicht. Daher wollte ich dich fragen, ob du mir die Lösung verraten könntest.

Hier mein Link: http://anunnaki.serverma.de/Flapper/

Prima wäre es außerdem, wenn das nächste Wort gleich erscheinen würde, wenn das aktuelle Wort verschwindet.

10 Jörg Kruse

Analog zur Lösung in Beitrag 7 könntest du wieder die rekursive Funktion verwenden:

var arrTexts = [ 'EINS', 'ZWEI', 'DREI', 'VIER', 'FUENF', 'SECHS', 'SIEBEN', 'ACHT', 'NEUN' ];
(function recurse(counter) {
    var text = arrTexts[counter];
    $header_display.val(text).change();
    $demos.val(9).change();
    delete arrTexts[counter];
    arrTexts.push(text);
    setTimeout(function() {
        recurse(counter + 1);
    }, 4000);
})(0);

Seite 12

nach oben weiter >

Texteffekt

Verwandte Themen