Thema: CSS - Animierte Box mit Keyframes ➧ Artikel anzeigen
6 Kommentare
- BRICK PIMP schrieb am Montag, den 29 März 2021
#1
- Sehr cool! Danke! :)
- johi ✶✶✶✶✶ schrieb am Montag, den 6 September 2021
#2
- Hallo Herr Zenk,
ich bin begeisterter Fan Ihrer Seite und versuche meine html5, css, php und javascript Grundkenntnisse durch Ihre Anleitungen zu erhalten und etwas zu erweitern (-; Dabei konnte ich schon einige Miniprojekte umsetzen und verschiedene Anregungen nutzen.
Bei dieser animierten Box mit keyframes komm ich mit dem Codeschnipsel aber nicht zurecht. In der Klasse animatedBox wird ja im Wesentlichen der Monitor gestylt. Wo und wie passiert denn das Umschalten des Programms und der Input der bewegten Inhaltsbilder?
Viele Grüße
Johannes
P.S. Klasse Seite und wirklich toll umgesetzte Ideen. Da macht es Spaß täglich ein bisschen was zu machen, um dranzubleiben. Vielen Dank!
- Werner schrieb am Montag, den 6 September 2021
#3
- Hallo Johannes,
bei meinen Seiten sollte man auch immer in den Quelltext schauen 😉 (in dieser Demo wird ein kleines JavaScript verwendet). Ich habe die Demo im Laufe der Zeit aktualisiert und erweitert, ohne jedoch den angezeigten Code anzupassen, dieser stellt nur die Grundversion dar.
- johi ✶✶✶✶✶ schrieb am Mittwoch, den 8 September 2021
#4
- Vielen Dank Herr Zenk, mit einem Blick in den Quelltext hat es dann auch super funktioniert (-;
Ich hab es in mein WP Projekt mittels Shortcode [include filepath='/xyz.php'] eingbaut und es läuft super. Jetzt habe ich aber gemerkt, dass das Burger Menu (Toggle) nicht mehr öffnet seit ich die xyz.php reingeladen habe. Kann es sein, dass es einen Konflikt mit dem eventListener "click" gibt oder haben Sie sonst noch eine Idee, wie es zu diesem Konflikt kommen kann.
VG
Johannes
- Werner schrieb am Mittwoch, den 8 September 2021
#5
- Ich würde mal in die Browserkonsole schauen ob da ein JavaScript Fehler vorliegt.
Oft werden diese "Burger Menüs" mit einem "Checkbox-Hack" gemacht: » werner-zenk.de/tools/css_menue_generator.php
Ich glaube kaum das eine ID oder JS-Variable im Burger Menu bereits verwendet wird.
Der eventListener "click" ist hier eindeutig:
const monitor = document.getElementsByClassName("monitorBild")[0];
monitor.addEventListener("click", () => { ...
Und bezieht sich auf dem ersten gesetzten CSS-Klassennamen: "monitorBild".
Ich hasse eigentlich diese "Burger Menüs", hatte früher auch mal eines mit unzähligen Einträgen. Und war stundenlang damit beschäftigt dieses anzupassen ... seitdem gibt es nur diese 8 Kategorien als Navigation 😀
- johi schrieb am Mittwoch, den 8 September 2021
#6
- Guten Abend Herr Zenk,
wieder ein guter Tipp. In der Konsole vom Edge (komischer Weise nicht im Chrome!?!) wurde sinngemäß angezeigt "Identifier monitor is already defined". Habe die const monitor auf var monitor umgestellt, dann cache gelöscht und jetzt läuft es. Danke!!!!
VG Johannes
6 Kommentare