Elmastudio

Inhalt

Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt

URL kopierenAls Markdown kopierenÄlterer Beitrag: 20 berühmte Firmen, Organisationen und Online-Magazine, die WordPress verwendenNeuerer Beitrag: 20 WordPress-Plugins mit praktischen Funktionen für deine Sidebar

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!

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.

Hat dir das gefallen? Dann abonniere unseren Newsletter oder folge uns auf YouTube. Das kostet nichts und hilft uns mehr als alles andere. Wir machen das seit 2009, und wir machen weiter.Hat dir das gefallen? Dann folge uns auf YouTube. Das kostet nichts und hilft uns mehr als alles andere. Wir machen das seit 2009, und wir machen weiter.

Newsletter abonnierenAuf YouTube folgen

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

  2. Ellen
    Autor:in

    @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

  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..

    1. Ellen
      Autor:in

      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

      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 ;)

© Elmastudio 2026. Theme: Architrave

5 Kommentare anzeigen
 Seitenleiste ausklappen⌘BSeitenleiste einklappen⌘B
Inhalt⌥C
FokusmodusFokusmodus beenden