CSS backgroundchangeFadeInOut im zweiten Durchlauf weniger Bilder

Moin,
nachdem ich heute morgen schon einen Thread (LINK) aufgemacht habe, in dem mir geraden wurde anstelle von javascript lieber css zu nehmen, habe ich die Funktion die ich brauche nun in CSS erneut gebaut.
Den Code habe ich online gefunden, kopiert und geringfügig angepasst.

Es werden 8 Bilder nacheinander eingeblendet, woraufhin das ganze von vorne startet.

Nachdem alle Bilder das erste mal zu sehen waren, sollen allerdings die Bilder 1 und 2 nicht mehr angezeigt werden - und hier komme ich nicht weiter.

Der Code sieht wie folgt aus:

HTML:

<!DOCTYPE html>
<html>
<header>
<link href="CSS/main.css" rel="stylesheet">  
</header>


<body>


<div id="home" class="panel">  
	<div class="layer">test</div>  
		<div class="inner">	  
			<div id="backgroundchange">  
			    <div class="backgroundimg" id="back1"></div>  
			    <div class="backgroundimg" id="back2"></div>  
			    <div class="backgroundimg" id="back3"></div>  
			    <div class="backgroundimg" id="back4"></div>  
			    <div class="backgroundimg" id="back5"></div>  
			    <div class="backgroundimg" id="back6"></div>  
			    <div class="backgroundimg" id="back7"></div>  
			    <div class="backgroundimg" id="back8"></div>  
			</div>
		</div>
	</div>
</div>

</body>
</html>

CSS:

html, body {
    height: 100%;
    margin: 0;
}


.layer {
    background-color: rgba(220,160,140);
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.panel {
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;  
    color: black;
    height: 100%;
    min-width: 100%;

    text-align: center;
    display: table;
    margin: 0;
    background: #fff;
    padding: 0 0;
}

.panel .inner {
    display: table-cell;
    vertical-align: middle;
}

.backgroundimg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

}

#back1 {
    background: url("http://192.168.5.200/Bilder/8.jpg") no-repeat center center fixed;  
background-size: 100% auto;
}

#back2 {
    background: url("http://192.168.5.200/Bilder/7.jpg") no-repeat center center fixed;  
background-size: 100% auto;
}

#back3 {
    background: url("http://192.168.5.200/Bilder/6.jpg") no-repeat center center fixed;  
background-size: 100% auto;
}

#back4 {
    background: url("http://192.168.5.200/Bilder/5.jpg") no-repeat center center fixed;  
background-size: 100% auto;
}

#back5 {
    background: url("http://192.168.5.200/Bilder/4.jpg") no-repeat center center fixed;  
background-size: 100% auto;
}

#back6 {
    background: url("http://192.168.5.200/Bilder/3.jpg") no-repeat center center fixed;  
background-size: 100% auto;
}

#back7 {
    background: url("http://192.168.5.200/Bilder/2.jpg") no-repeat center center fixed;  
background-size: 100% auto;
}

#back8 {
    background: url("http://192.168.5.200/Bilder/1.jpg") no-repeat center center fixed;  
background-size: 100% auto;
}

@keyframes backgroundchangeFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes backgroundchangeFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
#backgroundchange div:nth-of-type(1) {
  animation-delay: 16s;
  -webkit-animation-delay: 16s;

}
#backgroundchange div:nth-of-type(2) {
  animation-delay: 14s;
  -webkit-animation-delay: 14s;
}
#backgroundchange div:nth-of-type(3) {
  animation-delay: 12s;
  -webkit-animation-delay: 12s;
}
#backgroundchange div:nth-of-type(4) {
  animation-delay: 10s;
  -webkit-animation-delay: 10s;
}

#backgroundchange div:nth-of-type(5) {
  animation-delay: 8s;
  -webkit-animation-delay: 8s;
}

#backgroundchange div:nth-of-type(6) {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}

#backgroundchange div:nth-of-type(7) {
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
}

#backgroundchange div:nth-of-type(8) {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

#backgroundchange div {
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 18s;

-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 18s;
}

Im Moment ist es auch so, dass wenn ich anstelle von infinite eine 1 eintrage, als letztes wieder Bild 1 angezeigt wird. Warum ist mir nicht ganz klar, wäre aber am Ende egal, da die es abgesehen von Bild 1 und Bild 2 unendlich lange laufen soll.

Ich hoffe mir kann jemand sagen, wie ich nach dem ersten Durchlauf zwei Bilder rauswerfen kann.

Danke

Falk

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 300476

Url: https://administrator.de/contentid/300476

Ausgedruckt am: 22.11.2024 um 11:11 Uhr

4 Kommentare

Neuester Kommentar

Moin,

du hast es fast gelöst :D

wenn du 1 einträgst wird die animation einmal durchlaufen lassen logisch also, dass sie wieder beim Start ankommt. Deswegen wieder Bild 1. ;)

um nun 2 Bilder raus zu werfen solltest du dich eines tricks bedienen.

bau einfach die keyframes funktion doppelt, lass die beiden bilder raus, die du rauswerfen willst und lege es auf eine andere CSS klasse.

dann kannst du deinem backgroundchange element noch eine id verpassen und die Klasse mittels

function switchclass() {
  var e = document.getElementById("backgroundchangeid")  
  e.class = "newbackgroundchangeclass"  
}
setTimeout(switchclass, 18000)

umbauen.

Alternativ(, sauberer und einfacher) kannst du deinen HTML content umbauen:

Lagere die beiden bilder die du rauswerfen willst in ein separates div aus, baue die animation um sodass du 2 hast. eine für deine unendliche slideshow und eine für deine ausgelagerten Bilder. Dann blendest du die bilder nach der animation einfach aus, während die darunter liegende dauerslideshow weiter läuft.

Ausblenden:

function hidePictures() {
  var e = document.getElementById("frontpictures")  
  e.style= "display: hidden:"  
}
setTimeout(hidePictures, 4000)

Viel Spaß
Gruß
Chris

Hi FalkIT (cleverer Name übrigens),

der richtige Weg wäre leider ein Mix aus CSS und Javascript. Die Frage(n), die Du Dir stellen solltest, ist:

Möchte ich die Anzahl der Bilder, die verschwinden sollen, später einmal ändern?
Möchte ich eventuell die Bilder ändern, die ich verschwinden lassen möchte?

Selbst, wenn Du dieses Projekt nur für Testzwecke erledigst, solltest Du es von Anfang an richtig anpacken.
Mit CSS und Javascript kannst Du das. Man hat Dir wahrscheinlich gerate CSS zu benutzen, da Animationen
und Slideshows heutzutage mit CSS wesentlich flüssiger laufen. Allerdings sollten DOM-Interaktionen, wie das
Wegnehmen von Bildern, mit Javascript erledigt werden. Dann bist Du wenigstens flexibel und musst nicht gleich
deinen ganzen Code ändern, nur weil Du einmal ein paar Veränderungen haben möchtest.

Zunächst solltest Du Dir angewöhnen, mit der jQuery Library zu arbeiten. Dafür einfach folgenden Link in den Head:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>  

Um nun eine CSS3-Animation hinzuzufügen und nach dem Ende zu entfernen:

<script>
$(window).load( function()
  {
  //Element auswählen
  var ButtonElement = $('button' );     /* <button></button> Element auswählen  
  var Slideshow = $('#slide');              /* <div id="slide"></div> Element auswählen  

  ButtonElement .click( function ()   /* Ein Klick löst diese Funktion aus */
    { 
    Slideshow.addClass( 'backgroundchangeFadeInOut' );   /* Animation-KIasse hinzufügen */  

    Slideshow.one( 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',     
    function(e)
      {
      //Animation ist zu Ende
      Slideshow.removeClass( 'backgroundchangeFadeInOut' );  

      //Bilder rauswerfen
      $('#ID_BILD_1').remove();  
      $('#ID_BILD_2').remove();  
      });
    });
  });
</script>

Der obige Code ist für ungeübte schwer zu verstehen, aber wenn es erst einmal soweit ist, dann hast Du tausende Möglichkeiten mehr.
Hier noch einmal ein paar Seiten, auf denen Du dich schlauer lesen kannst:

http://www.w3schools.com/jquery/
https://www.coding-lab.de/
https://learn.jquery.com/

Hoffe ich konnte ein wenig helfen.
PS:

Die schnellste Lösung ist nicht immer die Beste. Oftmals auch ein Projekt wegspeichern und nach Monaten
wieder rausholen und nachbearbeiten.

Hallo DirkEinstedt,

Zunächst mal: Schicker Code ;)

Ich muss dir nur leider in dem Punkt widersprechen, dass man sich angewöhnen solle, irgendwelche Librarys wie jQuery zu benutzen. Das ist zwar aus Entwicklersicht angenehmer, bringt aber eine Menge Overhead mit sich.

jQuery hat aktuell ~94KB. Davon effektiv verwendet werden in diesem Beispiel aber nicht mal 5KB. Für die allermeisten Seiten sind diese Bibliotheken viel zu groß, da die meisten Funktionen davon gar nicht benutzt werden. Deswegen sollte man sich mithilfe von grunt und seinen Freunden lieber eine eigene, kleine auf den eigentlichen Funktionsumfang angepasste JavaScript Datei bauen, die dann ggf. auch nur noch 5kb groß ist.

Das ganze Sauber abgelegt auf dem eigenen Webspace, packt man nun noch ein Webservermodul wie PageSpeed davor, welches das JavaScript für Mobiltelefone Inline positioniert und ansonsten als asynchron markiert. So erlangt man die best-mögliche Performance. Natürlich auch sauber minimizen ;)

Mehr Infos dazu habe ich vor einiger Zeit hier zusammengetragen: https://www.shivering-isles.com/the-science-of-loading-javascript/

Gruß
Chris

Nun gut,

in dem Punkt geb ich Dir recht. Hatte nur gedacht, dass ~94KB jetzt nicht das allzu große Problem ist,
bzw. konnte nicht ahnen, dass bereits so fundierte Grundkenntnisse vorhanden sind. Dann ist es natürlich
klar, dass der Weg zu der eigenen Datei bzw. Plain Javascript Code ohne Frameworks/Libs geht. .

Gruß

Dirk

Frage Entwicklung CSS

Mehr von FalkIT

Hide - Show divs innerhalb einer Worpress Seite (mit Elementor, Javascript, css)FalkIT - 3 Kommentare

Pfsense HA mit nur einer IP-AdresseFalkIT - 13 Kommentare

Kaufempfehlung: Dual WAN RouterFalkIT - 8 Kommentare

VoIP über Glasfaser - LWL - Singlemode - AstlinuxFalkIT - 8 Kommentare

Heiß diskutiert