Hallo, Besucher der Thread wurde 133 aufgerufen und enthält 0 Antworten

letzter Beitrag von Belarus am

[JS] Word Changer

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.
    • Threadstarter

    Hallo,


    hier möchte ich euch einmal zweigen wie Ihr mit wenig Quellcode einen so genannten Word-Changer erstellen könnt, welche für diverse Zwecke eingesetzt werden kann. Dieser Word-Changer kann z.B. in einem Nachrichtenportal, eine Entwicklerseite oder auch eine Portfolio-Seite genutzt werden. Beispielsweise bestehen die Worte: "Ich bin ein" auf welchen folglich Worte wie "Entwickler" oder "Fanatiker" nach und nach aus dem Array animiert eingeblendet und damit "Ich bin ein Entwickler" und "Ich bin ein Fanatiker" ausgegeben werden ;)


    Features

    • Animierter Word-Changer
    • Einstellbare Animierungsart- und Dauer
    • Individuell an Deinen Style anpassbar






    Demo


    Eine Live Demo in der WCS ist leider nicht vorhanden. Allerdings ist ein Codebeispiel vorhanden: Codepen.io: [JS] Word Changer ;)

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    <span>Ich bin ein</span>

    <span id="wordChanger"></span>
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
          var words = [

            'Entwickler',

            'Fanatiker',

            'Guru',

            'Mythos'

          ],

          i = 0;

          setInterval(function() {   

          $('#wordChanger').fadeOut(400, function() {

            // if i = last index ? i = 0 else i++

            $(this).text(words[ (i === words.length - 1) ? i = 0 : i += 1] ).fadeIn(400);

            });

          }, 2000);
    Alles anzeigen

Benutzung

  1. HTML und jQuery Quellcode in einer Box, einer Seite oder aber im Template einfügen
  2. HTML Code im ersten <span>-Element und im jQuery Quellcode zwischen var words = [ ........ ] anpassen.
    Beachte bitte, dass hinter dem letzten Eintrag der Auflistung kein Komma gesetzt werden darf!
  3. Text per CSS nach eigenen Wünschen gestalten.
  4. Fertig!


Im übrigen harmoniert der Word-Changer auch sehr schön als Seitentitel im TopBarMenu ;)

Lizenz

Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

Screenshots




Gruss,
Andreas