Webdesign - Animierte Tag-Cloud oder Schlagwortwolke

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Schlagwortwolke für die Codeschnipsel:


Weiße Wolke Weiße Wolke Dunkle Wolke Dunkle Wolke Dunkle Wolke Weiße Wolke Änderungsdatum Accordion-Effekt Animierte_Überschrift Brief_schreiben Breadcrumb-Navigation Copyright-Hinweis CSS-Dateien_zusammenfassen Datum_als_Kalenderblatt Diashow Eselsohr Fade-Effekt Figure-Element Hover Kalenderblatt Lupeneffekt Smooth-Scroll-Funktion Tooltip-Anzeige Weiterleitungen

Wie wird eine Tag-Cloud oder Schlagwortwolke aufgebaut?

17Aug2014

Animierte Tag-Cloud oder Schlagwortwolke


Eine Schlagwortwolke ist eine Darstellung von wichtigen Worten die in einem Text oder wie hier auf einer Website vorkommen. Die wichtigsten Schlagwörter werden dabei durch eine größere oder dickere Schrift besonders hervorgehoben. Es gibt im Internet viele Generatoren für Tag-Clouds, Word Clouds oder Schlagwortwolken, aber ich werde mir selber eine Schlagwortwolke erstellen.
Im letzten Artikel habe ich dafür bereits eine besondere Animation erarbeitet. Jetzt geht es um die Tag-Cloud selber.
Ich möchte in der Schlagwortwolke wichtige Unterseiten der Rubrik "Codeschnipsel" visualisieren. Die einzelnen Ziele zu den Unterseiten werden dabei mit Klassen, zum Beispiel class="tagcloud0", verknüpft, über die man die Wichtigkeit einstellen kann.

Das HTML (HyperText Markup Language) für die Schlagwortwolke ist relativ einfach aufgebaut.

<div id="wolke">
    <h3>
        Schlagwortwolke für unsere Codeschnipsel:
    </h3>

    <hr class="linie">

    <img src="/bilder/wolke.png" alt="Weiße Wolke"
      width="140" height="167" id="wolke1">
    <img src="/bilder/wolke.png" alt="Weiße Wolke"
      width="140" height="167" id="wolke2">
    <img src="/bilder/wolkedunkel.png" alt="Dunkle Wolke"
      width="140" height="167" id="wolke3">
    <img src="/bilder/wolkedunkel.png" alt="Dunkle Wolke"
      width="140" height="167" id="wolke4">
    <img src="/bilder/wolkedunkel.png" alt="Dunkle Wolke"
      width="140" height="167" id="wolke5">
    <img src="/bilder/wolke.png" alt="Weiße Wolke"
      width="140" height="167" id="wolke6">

    <span class="tagcloud1">
        <a href="letztes-aenderungsdatum.php">
            Änderungsdatum
        </a>
    </span>
    <span class="tagcloud4">
        <a href="accordion-effekt.php">
            Accordion-Effekt
        </a>
    </span>
    <span class="tagcloud0">
        <a href="animierte-ueberschrift.php">
            Animierte_Überschrift
        </a>
    </span>
    <span class="tagcloud1">
        <a href="brief-schreiben.php">
            Brief_schreiben
        </a>
    </span>
    <span class="tagcloud4">
        <a href="breadcrumb-navigation.php">
            Breadcrumb-Navigation
        </a>
    </span>
    <span class="tagcloud3">
        <a href="letztes-aenderungsdatum.php">
            Copyright-Hinweis
        </a>
    </span>
    <span class="tagcloud8">
        <a href="css-dateien-zusammenfassen.php">
            CSS-Dateien_zusammenfassen
        </a>
    </span>
    <span class="tagcloud0">
        <a href="datum-als-kalenderblatt.php">
            Datum_als_Kalenderblatt
        </a>
    </span>
    <span class="tagcloud9">
        <a href="slideshow.php">
            Diashow
        </a>
    </span>
</div>

Das zugehörige CSS3 (Cascading Style Sheet) für die Animation habe ich im vorherigen Artikel bereits beschrieben und nur die Zeiten erhöht. Hier geht es nur noch um die Visualisierung der Texte.

#wolke {
    position: relative;
    overflow: hidden;
    height: 28em;
    font: 1em/2 'Comic Sans MS';
    background: linear-gradient(#1f4778,#4584b4);
    border-radius: 30px;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    margin: 2em 27px 0;
    padding: 0 2em 2em;
    text-align: justify;
    text-shadow: 2px 2px 1px #101010, 1px 1px 0 #505050;
}

#wolke h3 {
    font-size: 1.3em;
    color: #497cab;
    margin: 1em 20%;
}

#wolke a:link {
    text-decoration: none;
    position: relative;
    margin: 0 .5em;
}

#wolke .tagcloud0 a {
    font-size: 1em;
    color: #ddd;
}

#wolke .tagcloud1 a {
    font-size: 1.1em;
    color: #ccc;
}

#wolke .tagcloud2 a {
    font-size: 1.2em;
    color: #bbb;
}

#wolke .tagcloud3 a {
    font-size: 1.3em;
    color: #aaa;
}

#wolke .tagcloud4 a {
    font-size: 1.4em;
    color: #999;
}

#wolke .tagcloud5 a {
    font-size: 1.5em;
    color: #888;
}

#wolke .tagcloud6 a {
    font-size: 1.6em;
    color: #777;
}

#wolke .tagcloud7 a {
    font-size: 1.7em;
    color: #666;
}

#wolke .tagcloud8 a {
    font-size: 1.8em;
    color: #555;
}

#wolke .tagcloud9 a {
    font-size: 1.9em;
    color: #444;
}

#wolke a:hover {
    color: #333;
    text-shadow: -1px -1px 0 #202020, 1px 1px 0 #fff;
}

Und so sieht die Tag-Cloud oder Schlagwortwolke dann komplett aus.

Zum Seitenanfang springen Λ