Intern ❘ Inhaltsverzeichnis ❘ Glossar ❘ Bausteine ❘ Linkliste ❘ Tutorials ❘ Kommentare
Thema: Bilder mit Hover-Effekt ➧ Artikel anzeigen
- Werner schrieb am Sonntag, den 1 August 2021 #21
- Vielen Dank Maik, die Effekte sind wundervoll.
Ich habe die Links im Kommentar entfernt, weil die Website urhebergeschütztes Material (Filme etc.) enthält. Bitte nicht böse sein deswegen, ich möchte keine Abmahnung erhalten!
- Maik Haas ✶✶✶✶✶ schrieb am Sonntag, den 1 August 2021 #22
- @Werner
kein Problem,wegen den Links 😉
Ich habe noch einige andere tolle Effekte, z.B. Konsolen-Controller,Neumorphic Light Button,PS1-Konsole,Joystick-Animation mit Javascript-Effekt (Steuerung mit den Pfeil-Tasten und Leertaste) oder eine Tastatur mit Javascript-Effekt.
Teile mir mit,an was du interessiert bist und wie ich dir die Links zukommen lassen kann. 👍
Maik
- Werner schrieb am Sonntag, den 1 August 2021 #23
- Hallo Maik,
die "PS1-Konsole" und "Joystick mit Javascript-Tastenfunktion" habe ich schon auf deiner Website gefunden 👍
Ich muss jeden Kommentar einzeln freischalten, du kannst da ruhig weitere Links hier eintragen.
Dieses Script: Bilder-Farbrotation mit Gradient hatte ich ursprünglich von deiner Seite, habe es nur ein wenig angepasst und mit diversen Funktionen versehen.
Einen schönen Sonntag
- Maik Haas ✶✶✶✶✶ schrieb am Sonntag, den 1 August 2021 #24
- @Werner
Vielen Dank,das ich dir weitere Animationen zukommen lassen darf. 👍
1. 3D Hexagon
2. 3D Würfel
3. Batman Logo
4. Briefumschlag mit Öffnen und Schließen Hover-Effekt
5. Drucker-Animation
6. Fahrendes Auto Animation
7. Flugzeug und Papierflieger Animation
8. Verschiedene Game-Controller
9. Gameboy mit Javascript-Farbwechsel
10. Glühlampen Effekte (besonders die Demo 4)
11. Goldmünze mit Brightness Hover-Effekt
12. Die Simpsons in CSS (Stylesheets für 13 Charaktere)
13. Mannschaftstabelle
14. Schreibtische
15. Tastatur mit Javascript Tasten-Effekt
16. Tuniertabelle für KO-Runde
17. Würfeluhr mit Javascript Zeit
18. Zeichnung einer VHS-Hülle mit eingesteckter Videokassette
19. 3D-Erde mit Rotationseffekt
20. Neumorphic Light Button
21. Verkehrsampel
22. Planet Saturn
23. Regenbogen Spotlight
So das wären erstmal alle.Wenn man alle diese Animationen und Effekte sieht,kommt man aus dem Staunen nicht mehr raus: 👍
Gruß
Maik
- Werner schrieb am Sonntag, den 1 August 2021 #25
- WOW, ich staune, das sind sehr schöne Effekte dabei 😀
Bei: Die Simpsons in CSS (Stylesheets für 13 Charaktere) hätte ich jedoch mehrere Charaktere zur Demo angezeigt.
- Maik Haas ✶✶✶✶✶ schrieb am Sonntag, den 1 August 2021 #26
- @Werner
was die Simpsons angeht,hast du schon Recht,aber ein Charakter hat so viele Codezeilen in CSS,das mir das zu Zeitaufwändig war.
Außerdem ist bei CSS das Problem,wenn bestimmte Codebezeichnungen sich wiederholen,das man mit Pseudonymen arbeiten muss,sonst überschreibt CSS nämlich ganze Codeblöcke. 😉
Gruß
Maik
- Werner schrieb am Sonntag, den 1 August 2021 #27
- Dieses PHP-Script bindet alle Charaktere ein:
1
2
3
4
5
6
7
8
9<?php
foreach (glob('The_Simpsons/css/*.css') as $filename) {
echo '<link rel="stylesheet" href="' . $filename . '">';
}
foreach (glob('The_Simpsons/html/*.txt') as $filename) {
include_once $filename;
}
?>
Wenigstens Homer Maggie, March, Lisa, Bart, Flanders und Burns funktionieren damit.
- Maik Haas schrieb am Sonntag, den 1 August 2021 #28
- @Werner
prima,das du eine Lösung gefunden hast. 👍
Bei der Verkehrsampel gibt es allerdings ein Problem.
Ich nutze den JCE-Editor und in der Vorschau,wird mir die Ampel so angezeigt,wie sie auch sein sollte.
Im Beitrag allerdings,ist der Standpfosten und die seitlichen Protektoren (links und rechts) nicht zu sehen,und ich konnte nicht herausfinden,woran das liegen könnte.
Gruß
Maik
- Werner schrieb am Sonntag, den 1 August 2021 #29
- Entferne in der CSS-Angabe den Wert:
.protector {
z-index: -1;
Dann werden zumindest die Protektoren angezeigt.
Wäre ein iFrame nicht die einfachere Lösung?
- Maik Haas schrieb am Sonntag, den 1 August 2021 #30
- @Werner
das mit dem Entfernen bzw. Auskommentieren von "z-index: -1;" funktioniert zwar,aber über dem Rotlicht ist dann der Halbkreis nicht mehr zu sehen.
Hier hast du mal den Link zum Original:
codepen.io/Jab2870/pen/xnIHp
Gruß
Maik