Sie nutzen einen veralteten Browser. Für eine schnellere und sichere Verbindung aktualisieren Sie den Browser kostenfrei.


Einen Augenblick Geduld...

  • Designstudien

  • Es ist immer wieder auch eine kleine Herausforderung animierte Objekte auf webbasierten Oberflächen darzustellen. Ich habe mich hier mal mit einigen dieser teils nur mit CSS und Javascript umgesetzen Animationen beschäftigt.
    Klickt dazu auf die Überschrift oder das jeweilige Bild links vor dem Text.


    Drehende Ringe

    • Drehende Ringe
    • Diese beiden, sich drehenden, Ringe sind faszinierend. Sie werden "lediglich" mit CSS generiert. Eine Animation, die ich mir als beständig drehendes Logo oder auch Ladesymbol auf einer Webseite gut vorstellen kann.

      Um diesen Effekt hier zu sehen verwendet bitte eine horizontale Auflösung von mindestens 768 pix. Unten links auf dieser Webseite wird dazu die Auflösung eures Monitors, bzw. Displays unter Fenster Hor angezeigt.
      Hinweis: der Internet Explorer ist nicht kompatibel.

    Die Matrix - WOW

    • Matrix - WOW
    • Willkommen in der Welt der MATRIX.
      Wie ich finde, ein grandioser Effekt. Mich begeistert dieses Thema immer noch - der Pilotfilm dazu lief bereits im Jahr 1999.

      Diese Designstudie könnt ihr auch hier auf eurem Smartphone betrachten - auch im Vollbild. Es gibt keine Einschränkung bezügl. einer horizontalen Mindestauflösung, o.ä. - lediglich Javascript sollte aktiviert sein.

    Analoge Uhr

    • Analoge Uhr
    • Analoge Uhren im digitalen Zeitalter haben immer etwas nostalgisches. In Verbindung mit modernem Design können sie aber durchaus ein Hingucker sein. Es kommt ein bisschen darauf an, wo sie eingesetzt werden...
      Diese Uhr ist 'lediglich' mit CSS und Javacsript umgesetzt worden.

      Um die Uhr in voller Größe zu sehen verwendet bitte eine horizontale Auflösung von mindestens 540 pix. Unten links auf dieser Webseite wird dazu die Auflösung eures Monitors, bzw. Displays unter Fenster Hor angezeigt. Hinweis: der Internet Explorer ist nicht kompatibel.

    Passwortgenerator

    • Passwortgenerator
    • Ein praktischer Passwortgenerator, der das Generieren von Passwörtern abnimmt. Das Praktische nach dem Generieren ist, dass man sich das Passwort in die Zwischenablage kopieren kann, um es anschl. per copy & paste im benötigten Feld einzufügen. Außerdem kann es aus der Zwischenablage heraus in ein Dokument, in dem ihr sämtl. Passwörter speichert, eingefügt werden.
      Der Passwortgenerator funktioniert mit allen Auflösungen - auch mit mobilen Endgeräten. Probiert es aus.
      Und bitte keine Sorge, er kopiert das Passwort nirgends hin - das sollt NUR IHR anschließend sehen und kennen. Das Generieren findet ausschließlich lokal auf eurem PC, bzw. dem mobilen Endgerät statt. Hinweis: der Internet Explorer ist nicht kompatibel.

    Impossible Turn

    • Impossible turn
    • Ein interessanter Effekt, der mit einem pseudo 3D-Effekt arbeitet und die Schatten des Rahmens entsprechend darstellt.
      Er wird nur mit CSS erzeugt. Ein Javascript ist dafür nicht notwendig.

      Um diesen Effekt hier zu sehen verwendet bitte eine horizontale Auflösung von mindestens 768 Pixeln. Unten links auf dieser Webseite wird dazu die Auflösung eures Monitors, bzw. Displays unter Fenster Hor angezeigt.

    Kalender & Uhr

    • Kalender & Uhr
    • Ein (Abreiss-) Kalender und eine Uhr im 24-Stunden-Format inkl. Balkenuhr - auch eine Art beides lediglich per CSS und Javascript auf eine Webseite einzubinden. Kein schlechter Effekt um ihn parallel zu anderen Inhalten auf einer Webseite zu zeigen.

      Kalender & Uhr funktionieren mit sämtlichen Auflösungen und somit unabhängig vom verwendeten Gerät.

    Coole SciFi-Animation

    • Kalender & Uhr
    • Wer auf Science Fiction steht wird hier bedient. Dies ist eine tolle Animation mit interaktiver Möglichkeit entsprechende grafische Animationen im Style zu beeinflussen. Es ist quasi eine Animation für geometrische Körper.
      Es lässt sich die Geschwindigkeit mit Slidern und Schaltflächen, sowie die Anzahl der berechneten Punkte steuern. Außerdem gibt es Presets, die den Einstieg in neue Muster erleichtern.
      Als Science Fiction-Fan stehe ich auch auf diese Art von Animationen. Probiert es aus. Programmiert mit purem CSS und Javascript und unabhängig vom verwendeten Gerät. Hinweis: der Internet Explorer ist nicht kompatibel.

    Weitere Inhalte folgen.