|
|||
Bilder automatisch wechseln
Hallo, bin neu hier und hab eine Frage:
Wie kann ich mit CSS Bilder auf einer Seite wechseln lassen? Das erste Bild ist als Hintergrund in einem div-Container. Dieses soll alle 5 Sek. durch ein anderes ersetzt werden. Muss ich dafür Javascript o. ä. verwenden? Gruß Heinz |
Sponsored Links |
|
|||
Was du suchst, nennt sich Slider.
Da gibt es dutzende, wenn nicht sogar hunderte, in verschiedenen Varianten. Mit <img>-Tags, als background-images, usw. und es gibt auch reine CSS-Lösungen. Die Javascript-Slider sind aber oftmals die schöneren, funktionieren in mehr Browsern und bieten mehr Möglichkeiten. Einfach mal nach Slider googlen und gucken, welcher dir am meisten zusagt. |
Sponsored Links |
|
|||
Ja, es sollen einfach alle paar Sek. Hintergrundbilder getauscht werden.
Einen üblichen Slider auf Skriptbasis wollte ich eigentlich vermeiden. Eine CSS Lösung, die ich evt. nachvollziehen kann, wäre das Ziel. Gruß Heinz |
|
|||
Hallo
Solche animierten Bilderwechsel können mit CSS mittels @keyframes erzeugt werden. Die Animationen können endlos laufen. Wenn fünf Hinergrundbilder vorhanden sind, die alle 8 Sekunden wechseln sollen wird das erste sofort eingeblendet, nach 8 Sekunden ausgeblendet und bleibt 32 Sekunden ausgeblendet. Danach beginnt der Vorgang von vorne. Das zweite Bild wird nach 8 Sekunden eingeblendet, bleibt 8 Sekunden sichtbar und bleibt 24 Sekunden ausgeblendet. Danach beginnt der Vorgang von vorne. Das dritte Bild wird nach 16 Sekunden eingeblendet, bleibt 8 Sekunden sichtbar und bleibt 16 Sekunden ausgeblendet. Danach beginnt der Vorgang von vorne. Und so weiter. Damit sind aber auch andere Lösungen denkbar. So können alle Bilder zu einem einzigen großen Bild zusammengesetzt werden und das große Bild wird so verschoben, dass zeitgesteuert immer nur eins sichtbar ist. Siehe https://www.mediaevent.de/tutorial/c...keyframes.html und https://www.mediaevent.de/css/backgr...e-mehrere.html Für eine andere Anfrage habe ich vor einiger Zeit einmal eine zeitgesteuere Animation mit Vordergrundbildern erstellt. Das Prinzip ist aber das gleiche. Nachfolgend der zugehörige Quelltext: Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Animation 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> /*Meine persönlichen Grundeinstellungen für alle Seiten*/ @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-family: Sans-Serif; font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/ } body { margin: 0; } } /* ==================================================== */ /* ***Ab hier beginnen die Angaben zur Problemlösung*** */ /*Spezielle Einstellungen*/ @media all { } h1 { margin-top: 13rem; } img { position: absolute; top: 1rem; left: 1rem; } /*Animation*/ .animated1 { -webkit-animation-duration: 16s; animation-duration: 16s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes zoomIn1 { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 12% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 25% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 75% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes zoomIn1 { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 12% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 25% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 75% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .zoomIn1 { -webkit-animation-name: zoomIn1; animation-name: zoomIn1; } .animated2 { -webkit-animation-duration: 4s; /* Dauer der Animation */ animation-duration: 4s; -webkit-animation-delay: 4s; /* Startverzögerung */ animation-delay: 4s; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes zoomIn2 { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 40% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { opacity: 1; } } @keyframes zoomIn2 { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 40% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { opacity: 1; } } .zoomIn2 { -webkit-animation-name: zoomIn2; animation-name: zoomIn2; } /* *** Ende der Angaben zur Problemlösung*** */ /* ===================================================== */ </style> </head> <body> <img class="animated1 zoomIn1" src="http://lorempixel.com/300/200/transport" alt="Beispielbild"> <img class="animated2 zoomIn2" src="http://lorempixel.com/300/200/technics" alt="Beispielbild"> <h1>Information</h1> <p>Der CSS-Quelltext ist ziemlich sperrig, da ich mich dabei nach animate.css gerichtet und ihn nicht weiter optiermiert habe.</p> <p>Zunächst wird ein Bild eingeblendet und kurz danach durch ein zweites ersetzt. Nach ungefähr 10 Sekunden erscheint wieder das erste Bild, welches dauerhaft stehen bleibt.</p> </body> </html> Gruss MrMurphy Geändert von MrMurphy (15.11.2016 um 06:16 Uhr) |
|
|||
Zitat:
Danke, schau mal ob ich das verarbeitet bekomme. Gruß Heinz |
|
|||
Slider
Setze jetzt diesen Code ein:
Zitat:
Zitat:
Zitat:
setzte ich in den Ordner root - scrips ... Nach dieser Anleitung: http://michaelsoriano.com/create-rot...ss-and-jquery/ Funktioniert nicht?! Es wird einfach nur das letzte Bild angezeigt. Wie kann ich den body image Hintergrund alles paar Sekunden wechseln? Kann nur Html und CSS. Hilfe wäre gut und nachvollziehen kann ich es eh nicht mehr! Danke. Gruß Heinz Geändert von Heinz_H (06.12.2016 um 00:34 Uhr) |
|
|||
Das wäre auch in Ordnung.
Die Hintergrundbilder wechseln automatisch alle 5 Sekunden. Bekomms aber auch nicht hin ... Gruß Heinz |
|
|||
Zitat:
Ansonsten: Schau auch mal in die Fehlerkonsole, dort sollten dir solche Dinge sofort auffallen. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrund wird nicht angezeigt | maxx | CSS | 6 | 14.10.2012 19:27 |
Hilfe!!! mein Homepagelayout funktioniert nicht! | maxx | CSS | 5 | 14.10.2012 08:21 |
Bilder automatisch verkleinern | greenslot | Serveradministration und serverseitige Scripte | 4 | 16.11.2011 12:41 |
Bilder mit Hover wechseln --> KNIFFLIG! | lkwpeter123 | CSS | 3 | 23.05.2011 17:36 |
Bilder im Text automatisch unterbringen | Steakfred | Offtopic | 1 | 12.05.2008 21:38 |