XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bilder automatisch wechseln (http://xhtmlforum.de/showthread.php?t=73067)

Heinz_H 12.11.2016 19:36

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

dazzle89 14.11.2016 09:09

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.

cloned 14.11.2016 10:20

Es muss nicht sein, dass er einen Slider sucht. Wenn er das Hintergrundbild wechseln lassen will, dann ist das nicht wirklich ein slider sondern mit einfachem Javascript getan.

Heinz_H 15.11.2016 01:21

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

MrMurphy 15.11.2016 05:54

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>

Insgesamt solltest du aber bedenken das zeitgesteuert wechselnde Bilder die Besucher nur nerven. Die Webseitenersteller begehen Zeitdiebstahl an ihren Besuchern und Hintergrundbilder, die nur schmückendes Beiwerk sind, erhalten eine Aufmerksamkeit, die sie nicht verdienen.

Gruss

MrMurphy

Heinz_H 16.11.2016 00:56

Zitat:

Zitat von MrMurphy (Beitrag 550151)
Hintergrundbilder, die nur schmückendes Beiwerk sind, erhalten eine Aufmerksamkeit, die sie nicht verdienen.

Verstehe, Effekthascherei auf Webseiten ist nervig.
Danke, schau mal ob ich das verarbeitet bekomme.

Gruß
Heinz

Heinz_H 05.12.2016 19:45

Slider
 
Setze jetzt diesen Code ein:

Zitat:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.2.74.js"></script>
<script>
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
pager: '#smallnav',
pause: 1,
speed: 1800,
timeout: 3500
});
});
</script>
Zitat:

<div id="slideshow">
<img src="/images/b1.jpg" class="bgM"/>
<img src="/images/b2.jpg" class="bgM"/>
<img src="/images/b3.jpg" class="bgM"/>
<img src="/images/b4.jpg" class="bgM"/>
<img src="/images/b5.jpg" class="bgM"/>
</div>
Zitat:

#slideshow, img.bgM {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:-9999;
}
Und die http://malsup.github.io/jquery.cycle.all.js

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

Heinz_H 06.12.2016 01:10

Das wäre auch in Ordnung.

Die Hintergrundbilder wechseln automatisch alle 5 Sekunden.

Bekomms aber auch nicht hin ...


Gruß
Heinz

cloned 06.12.2016 08:58

Zitat:

Zitat von Heinz_H (Beitrag 550249)
Setze jetzt diesen Code ein:

Code:

<script type="text/javascript" src="scripts/jquery.cycle.all.2.74.js"></script>
Und die http://malsup.github.io/jquery.cycle.all.js

setzte ich in den Ordner root - scrips ...

Die Dateien müssen schon gleich heißen.
Ansonsten: Schau auch mal in die Fehlerkonsole, dort sollten dir solche Dinge sofort auffallen.

Heinz_H 06.12.2016 09:30

Danke. Habs umbenannt und der Ordner scripts hieß auch scrips ...
Läuft abr immer noch nicht. Es wird nur das letzte Bild angezeigt.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:18 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023