Elmastudio

Contents

Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt

URL kopierenBeitrag als Markdown kopieren

JavaScript-Elemente sind der totale Trend im Webdesign. Und gekonnt eingesetzt kann man mit ihrer Hilfe Webseiten-Elemente praktisch und optisch ansprechend verpacken. Ich habe mich auf die Suche nach schlauen Lösungen mit JavaScript-Effekten gemacht. Schau dir meine Auswahl an, und lass dich inspirieren :-)

1. Vtravelled

Webdesign Inspiration: JavaScript Elemente
Tooltips der neusten Twitter-Tipps.
Webdesign Inspiration: JavaScript Elemente
Show/Hide on Klick-Effekt der Google Maps Ansicht.
Webdesign Inspiration: JavaScript Elemente
Horizontaler Accordion-Slider der Features Artikel im Footer.

2. Sleepover

Webdesign Inspiration: JavaScript Elemente
Animierte Sidebar-Navigation mit Smooth Scroll.

3. Casey Dunn Photography

Webdesign Inspiration: JavaScript Elemente
Animierte Thumbnails bei Übersicht der Fotogalerie.
Webdesign Inspiration: JavaScript Elemente
Slider bei Einzelansicht der Fotos.

4. Piipe

Webdesign Inspiration: JavaScript Elemente
Fancybox zur Ansicht der Unterseiten und Slider mit Fade-Effekt zur Detail-Ansicht der einzelnen Arbeiten.

5. Delibar

Webdesign Inspiration: JavaScript Elemente
Show/Hide on Klick Tab-Menü mit Suche, Lesezeichen, Neusten Artikeln etc.
Webdesign Inspiration: JavaScript Elemente
Animierter Content-Slider mit Tab-Menü.

6. Paramore Redd

Webdesign Inspiration: JavaScript Elemente
Featured Content Slider mit Navigation und animierten Projekt-Details.
Webdesign Inspiration: JavaScript Elemente
Tab-Menü zum Sortieren der Projekte.

7. Fresh 01

Webdesign Inspiration: JavaScript Elemente
Navigation mit Tooltips und Smooth Scroll.

Webdesign Inspiration: JavaScript Elemente
Wechselnde divs je nach Scroll-Location.

8. Veerle’s Blog

Webdesign Inspiration: JavaScript Elemente
Tab-Menü mit Icons in der Sidebar.

9. Creanto

Webdesign Inspiration: JavaScript Elemente
Unterseiten sichtbar mit Show/Hide on Mouseover-Effekt.

10. Brizk Design

Webdesign Inspiration: JavaScript Elemente
Projekt-Details als Accordion.
Webdesign Inspiration: JavaScript Elemente
Slider für Budget-Option im Kontaktformular.
Webdesign Inspiration: JavaScript Elemente
Twitter-Details mit Show/Hide on Mouseover-Effekt.

Wie gefallen dir diese JavaScript-Elemente? Nutzt du selbst gerne JavaScript oder kennst du weitere Webseiten, die JavaScript geschickt einsetzen? Ich freue mich sehr auf dein Feedback und deine Tipps!

Kategorien:
Schlagwörter: , , , , , , ,

Ellen Bauer

Ellen ist Mitgründerin von Elmastudio und Product Managerin bei Automattic. Sie spricht regelmäßig auf WordCamps über Block-Themes, WooCommerce und das Bauen von Websites mit KI. Als Content Creatorin schreibt und spricht sie über WordPress, Open Source, KI und persönliche Entwicklung und teilt dabei ihre eigenen Erfahrungen und Meinungen.

Gefällt dir, was wir hier machen? Dann abonniere unseren Newsletter oder YouTube-Kanal, das kostet dich nichts und hilft uns schon sehr. Wenn du einen Schritt weitergehen magst, lass unten ein kleines Dankeschön da. So bleibt Elmastudio für alle kostenlos, und wir schreiben weiter, wie seit 2009. Danke dir.Gefällt dir, was wir hier machen? Dann abonniere unseren YouTube-Kanal, das kostet dich nichts und hilft uns schon sehr. Wenn du einen Schritt weitergehen magst, lass unten ein kleines Dankeschön da. So bleibt Elmastudio für alle kostenlos, und wir schreiben weiter, wie seit 2009. Danke dir.

5 Kommentare

  1. Schorschi

    Wow super danke!
    Ich bin selber momentan dabei meine ziemlich veraltete graue Portfolio Seite komplett zu erneuern und wollte dabei gerne ein paar seriöse Javascript Features einbauen.
    Ich denke die habe ich jetzt gefunden :P Besonders gefallen mir deshalb Delibar (mit dazugehöriger Firmen Website: http://www.shinyfrog.net/ ) und 6. Paramore Redd

    LG Schorschi

    Antworten
  2. Ellen
    Author

    @Schorschi: Vielen Dank für deinen Kommentar. Es freut mich, dass dir der Artikel gefällt :-)

    Falls du noch nach weiterer JavaScript-Inspiration suchst, schau doch auch mal in meinen neuen Beitrag: „12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest“ rein ;-)

    Viele Grüße
    Ellen

    Antworten
  3. Dominique

    Ein paar schöne Ideen. Ich hab auch mal bei einer Seite beobachtet, wie zum Thema passende Posts als Slide-Out-Menü automatisch ausgeklappt wurden, wenn man den Footer erreicht hat.
    Leider weiß ich nicht mehr wo..

    Antworten
    1. Ellen
      Author

      Antwort an Dominique

      Hallo Dominique,

      vielen Dank für dein Feedback zum Artikel. Die von die beschriebene Slider-Variante hört sich auch super an, leider fällt mir so auch kein Plugin ein, welche dies lösen könnte. Wenn ich eines entdecke, werde ich es auf alle Fälle nachtragen :-)

      Viele Grüße,
      Ellen

      Antworten
      1. Dominique

        Antwort an Ellen

        nun habe ich diesen Slider wiedergefunden
        http://tympanus.net/codrops/2010/11/01/pull-out-content-panel/
        Das wurde mit jQuery gemacht. Auf der Seite gibt es haufenweise andere coole Sachen ;)

        Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Expand sidebar⌘B
DEEN