falkit
Mar 31, 2016
view2403
view4
0
Goto Top

CSS backgroundchangeFadeInOut im zweiten Durchlauf weniger Bilder

GermanQuestionCSSDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 300476

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

Printed on: April 19, 2024 at 21:04 o'clock

4 Comments
Latest comment
Goto Top
Member: Sheogorath
Sheogorath Mar 31, 2016 at 14:39:11 (UTC)
Goto Top
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
Member: DirkEinstedt
DirkEinstedt Aug 10, 2016 at 16:58:23 (UTC)
Goto Top
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.
Member: Sheogorath
Sheogorath Aug 10, 2016 at 17:12:24 (UTC)
Goto Top
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
Member: DirkEinstedt
DirkEinstedt Aug 10, 2016 at 18:21:59 (UTC)
Goto Top
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
GermanQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment