Zur Navigation

Ergänzung und Endlosschleife

1 Sabine1 (Gast)


Guten Tag
vor einiger Zeit habe ich eine Texteffekt entdeckt, welche mir sehr gut gefällt. Und zwar diesen hier:
http://nirvana.bplaced.net/
Ich würde liebend gerne wissen, wie es möglich ist, dass man diesen Texteffekt so ausbaut, dass man auch mehrere Wörter nacheinander angezeigt haben kann und dass dies dann alles in einer Endlosschleife wiedergegeben wird.
Auf der Suche nach einer Lösung bin ich hier auf dieses Forum gestoßen und hier wurde hier auch schon für einen anderen Texteffekt so eine Lösung wie ich es haben möchte gegeben.
Mein Problem ist, dass ich mich wie Javaskript kein bisschen auskenne und bin daher auf Hilfe angewiesen. Ich kann überhaupt nicht einschätzen, ob man das so machen kann, wie ich es mir wünsche und wenn ja, ob das viel oder wenig Arbeit ist. Vielleicht ist es ja eine Kleinigkeit für jemanden, der sich auskennt und daher meine Bitte um Hilfe.
Das eine Skript, in welchem die Wörter hinterlegt sind es ziemlich kurz gehalten:

odoo.default({ el:'.js-odoo', from: 'NOVEMBER', to: 'DEZEMBER', animationDelay: 1000 });
das andere Skript ist leider nicht besonders übersichtlich.
Vielen Dank schon mal an jedermann, der sich mit meinem Anliegen beschäftigt!

24.04.2017 10:42

2 Jörg

Zu dem odoo.js findet man irgendwie keine passende Dokumentation. Ich habe die Datei mal "entminifiziert" - es scheint nicht so, dass das Script die Möglichkeit bietet, die Animation über mehrere Wörter ablaufen zu lassen. Ich würde von daher eine andere Script-Lösung suchen, die etwas mehr an Möglichkeiten bietet.

Auf der Suche nach einer Lösung bin ich hier auf dieses Forum gestoßen und hier wurde hier auch schon für einen anderen Texteffekt so eine Lösung wie ich es haben möchte gegeben.

Um welchen Thread handelt es sich denn, um diesen:

https://joergs-forum.de/texteffekt-t-4685-1

24.04.2017 11:47

3 Sabine1 (Gast)

Hi Jörg

Danke, dass du dich mit meiner Problematik auseinandergesetzt hast!
Ja, es handelt sich um den von dir verlinkten Tread



Schönen Tag noch!

25.04.2017 08:43

4 Jörg

Mit dem dort genannten Plugin "Shuffle Letters Effect" sollte das dann wohl gehen, die Vorgehensweise habe ich in dem Thread in Beitrag 7 beschrieben.

[gelöscht]

Du musst halt vorher noch jquery und das Plugin einbinden, sowie einen Container im HTML einbauen, in welchem die Wörter angezeigt werden sollen:

<div id="container"></div>

25.04.2017 11:27 | geändert: 29.04.2017 17:26

5 Sabine1 (Gast)

Hallo Jörg, ich habe mich eingehend mit deiner Antwort beschäftigt und nach Kräften versucht, das Ganze zu verstehen und mich zu informieren, was ich zu tun habe, aber das überfordert mich total. Danke für deine Bemühungen. Wünsche dir ein tolles Wochenende.

29.04.2017 08:37

6 Jörg

Ich sehe gerade auch erst diesen Kommentar:

<!-- diese 404 Fehlerseite können Sie für 1,19 $ kaufen (nur diese Demo ist verschlüsselt). info@***.de  -->

Wenn der Quellcode auf der Demoseite unverschlüsselt geblieben wäre, hätte man die Seite schön als Ausgangspunkt für eigenen Texteffekt nehmen können. Dann wäre der Aufbau einer solchen Seite auch für einen JavaScript-Anfänger leichter verständlich gewesen. Meine Erläuterungen in dem anderen Thread betrafen ja nur die Teile, die noch nicht wie gewünscht funktionierten. In dem Quellcode hätte man auch den grundlegenden Aufbau sehen können.

Ich habe zwar beigetragen zu dem Script, aber eben nur zum Teil - deswegen habe ich den Tipp oben, wie man den Quelltext unverschlüsselt einsehen kann, wieder gelöscht.

29.04.2017 17:54 | geändert: 29.04.2017 18:01

7 Sabine1 (Gast)

irgendwie verstehe ich deinen Beitrag überhaupt nicht. Habe ich etwas verpasst???

30.04.2017 11:45

8 Sabine1 (Gast)

Ich habe nun das shuffle-Skript in die Seite eingebaut
http://nirvana.bplaced.net/

Im Moment habe ich aber überhaupt keine Ahnung, wie ich das Skript vom Texteffekt

 
odoo.default({ el:'.js-odoo', from: 'NOVEMBER', to: 'DEZEMBER', animationDelay: 1000 });

mit dem folgenden shuffle-Skript kombinieren (oder was auch immer) kann.

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



Zuerst hatte ich gedacht, dass sich das Skript
 
odoo.default({ el:'.js-odoo', from: 'NOVEMBER', to: 'DEZEMBER', animationDelay: 1000 });

Relativ einfach ergänzen lässt wie beispielsweise so (was leider nicht funktioniert)
 
odoo.default({ el:'.js-odoo', from: 'NOVEMBER', to: 'DEZEMBER', to: 'MAI', to: 'APRIL', AnimationRepeat: true, animationDelay: 1000 });

30.04.2017 17:13

9 Jörg

Tut mir leid - ich war etwas "angefressen" wegen des anderen Threads, wo wir bereits eine funktionierende Lösung erarbeitet hatten. Die hätte man gut als Vorlage nehmen können, aber der Code auf den Beipielseiten wurde zwischenzeitlich verschlüsselt und zum Verkauf angeboten, so dass man den nicht einfach frei weiterverwenden kann.

Das Script in dem anderen Thread basiert auf einer anderen JavaScript-Bibliothek als die auf nirvana.bplaced.net - deswegen kann man die beiden Lösungen leider nicht miteinander kombinieren.

Ich habe aber gerade dieses jquery Plugin gefunden:

https://sean.is/building/jquery-airport

Das scheint mehrere Wörter hintereinander ablaufen lassen zu können, und das auch in einer Endlosschleife?

Der Beispielcode ist ja auf der Seite angegeben. Damit das ganze funktioniert, musst du auch noch das Plugin downloaden, und die in dem Zip-Paket enthaltenen JavaScript-Dateien in die Seite einbinden.

Du kannst ja mal probieren, ob du das bei dir eingebaut bekommst, und wenn du damit irgendwo nicht weiterkommst, gib bescheid :)


Edit:

ich seh grad, du hast die andere Lösung doch schon auf nirvana.bplaced.net zum Laufen bekommen :)

30.04.2017 22:27 | geändert: 30.04.2017 22:32

10 Sabine1 (Gast)

Hallo Jörg, das AIRPORT-Skript finde ich ganz interessant. Danke für den Hinweis darauf. Habe dieses auch noch in die Seite eingebunden. So schaut es aus:
http://nirvana.bplaced.net/index2.html
aber nun stellt sich mir die Frage, wie ich dieses Skript oder das shuffleletters-Skript so ändere, damit ich den Texteffekt ganz oben auf der Seite (das mit dem odoo-Skript) mit beliebig vielen Wörtern und eine Endlosschleife bekomme. Bei den anderen beiden Skripten ist das ja schon der Fall, aber was nun?

02.05.2017 12:58