2 1 15 43 0 0 0

Hintergrundbilder bewegen

mit CSS

Ich möchte diese Beschreibung in der Rubrik HTML beibehalten, da auch mittels JavaScript im vorherigen Menü dieser Effekt erzeugt werden kann. Ich will es nicht stückeln für die Themengebiete.
Hier wird alles über reines CSS bewerkstelligt, wie man sehen kann.

10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25		 #fondoben { background-color: Black; background-image: url(../images_themen/wolkenband.png); 
  background-repeat: repeat-x; 
  background-position: bottom;
  opacity: 0.75; 
  /* Geschwindigkeit: 60 eingestellt wenn < schneller || > langsamer */
  -webkit-animation: wolken 60s; -webkit-animation-timing-function: linear; 
  animation: wolken 60s infinite; animation-timing-function: linear ; 
}
@-webkit-keyframes wolken {
    from {background-position: 0;}
    to {background-position: 1010px;}
}
@keyframes wolken {
    from {background-position: 0;}
    to {background-position: 1010px;}
}

Sollen die Wolken kontinuierlich auch bei Referenzierung auf andere Seiten weiterbewegt werden, ist dies nur über JavaScript wieder abzufangen - sie würden sonst auf den Startpunkt zurückspringen. Na das gäbe ein Gezappele.
background-position: 1010px; steht für die maximale Breite des Containers
und animation: wolken 60s infinite :
60s dauert es, um 1010px zu erreichen (). Eine höhere Dauer verlangsamt das Verschieben und eine geringere: na klar!
Mit „infinite“ wird die Dauerschleife initiiert.


Dokument geändert am: 17. Dez. 2017 12:00