jQuery – die 7 Weltwunder

Square

Um den Vorlesungsstoff über jQuery zu vertiefen, baute ich in einem Übungsprojekt über die 7 Weltwunder mehrere Elemente mit jQuery ein. Ich programmierte zum Beispiel eine interaktive Landkarte. Dazu erstellte ich mit Adobe Illustrator eine svg-Datei und animierte die Punkte mit den Befehlen on.(‚mousenter‘) sowie on.(‚mouseleave‘). Weiter codierte ich sogenannte flipping cards – kleine Boxen, die sich auf Klick drehen, um den Inhalt auf der Rückseite freizugeben. Auf der Seite gibt es zudem noch einen Scrollbalken kombiniert mit der Navigation, eine Bildergalerie und verschiedene kleine Schönheitsanimationen, die ich mit AOS (Animate on Scroll) geschrieben habe.

Die interaktive Karte: Bei hover über die Punkte erscheint eine Box.

 

Die flipping cards: Bei Klick auf das Bild, erscheint die Rückseite der Karte. Wenn man mit der Maus aus dem Textfeld fährt, dreht sich die Karte zurück.