4.2.12

Bilder Vorwärts und Rückwärts blättern mit CSS


Fast schon ein kleine Tradition auf diesem Blog, dass ich am Sonntag eine Skizze von etwas poste, was mir die Woche über so durch den Kopf gegangen ist.
Heute habe ich einen simplen Vorwärts - Rückwärts Schalter mit CSS gebaut, um damit durch einen Stapel Bilder durchzublättern. Die Bilder sind alle mit position: absolute; übereinander gestapelt und mit opacity:0; ausgeblendet. Jeder Klick auf die Pfeile ">>" oder "<<" springen um ein Bild vor oder zurück. Der 'Schalter' funktioniert über die Pseudoklasse :checked und gibt jeweils einem Bild die volle 'Sichtbarkeit' mit opacity:1.

Vorwärts & Rückwärts blättern nur mit CSS

Hovert das Bild - Klickt auf die Pfeile!

pic1
pic2
pic3
pic4
pic5

Schalter

Um das Prinzip hinter dem Schalter deutlicher zu machen, habe ich dafür noch mal eine eigene Skizze gebaut. Ich gebe zuerst Markup und CSS.
Markup für 'Schalter'
<div id="wrapper">
   <input type="radio" id="box1" name="nav" checked="checked" />   
   <input type="radio" id="box2" name="nav"/>   
   <input type="radio" id="box3" name="nav"/>  
   <input type="radio" id="box4" name="nav"/>   
   <input type="radio" id="box5" name="nav"/>   
 <div class="holder">
 <label for="box1"><div class="switch" id="eins" ></div></label>
 <label for="box2"><div class="switch" id="zwei" ></div></label>
 <label for="box3"><div class="switch" id="drei" ></div></label>
 <label for="box4"><div class="switch" id="vier" ></div></label>
 <label for="box5"><div class="switch" id="fünf" ></div></label>
</div>
</div>
CSS
#wrapper {
  position: relative;
  top: 100px;
  left: 200px;
  width: 150px;
  overflow: hidden;
}
#wrapper .switch {
  position: relative;
  left:50px ;
  height: 50px;
  width: 50px;
  float: left;
}
#wrapper .holder {
  position: relative;
  width: 800px;
}
#wrapper #eins {
  background: yellow;
}
#wrapper #zwei {
  background: orange;
}
#wrapper #drei {
  background: red;
}
#wrapper #vier {
  background: blue;
}
#wrapper #fünf {
  background: black;
}
#wrapper #box1:checked ~ div, #wrapper #box2:checked ~ div, 
#wrapper #box3:checked ~ div, #wrapper #box4:checked ~ div, 
#wrapper #box5:checked ~ div{
    -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 1s;
}
#wrapper #box1:checked ~ div { margin-left: 0px }
#wrapper #box2:checked ~ div { margin-left: -50px }
#wrapper #box3:checked ~ div { margin-left: -100px }
#wrapper #box4:checked ~ div { margin-left: -150px }
#wrapper #box5:checked ~ div { margin-left: -200px }
Demo


Aufbau
Die Demo besteht aus fünf Radio-Buttons und fünf dazugehörigen Labels, die jeweils einen eigenen div Container tragen. Der Übersichtlichkeit wegen habe ich jedem Container eine Farbe gegeben. Jeder Container hat eine Breite von 50px und alle zusammen liegen in einem weiteren Container von 150px Breite. Durch ein Klick auf ein Radio-Button [beziehungsweise dem dazugehörigen Label] wird der Außenabstand um jeweils 50px nach links verschoben. Damit sind immer drei Container[=Label] sichtbar: Ein Klick auf 'Rechts' führt damit zum nächsten Button rechts - ein Klick auf Links zum vorherigen Button links. Damit ihr die Verschiebung verfolgen könnt, habe ich eine transition von 1s auf die Bewegung gelegt.
Pseudoelemente
Die Demo mit den Bildern oben hat eine Anzeigerichtung "<<" und ">>". Die Grundlage dafür ist dieser 'Schalter' - die Elemente selber sind Pseudoelemente mit ::before und ::after. Jeder 'Zustand' einer einzelnen Checkboxen hat eine Definition, wo die Pseudoelemente sitzen. Ich geb's zu, das ist von mir leider nicht elegant gelöst. Was besseres ist mir noch nicht eingefallen, ich arbeite dran.

Bilder Vorwärts und Rückwärts blättern

Markup
<div id="wrapper">
   <input type="radio" id="box1" name="nav" checked="checked" />   
   <input type="radio" id="box2" name="nav"/>   
   <input type="radio" id="box3" name="nav"/>  
   <input type="radio" id="box4" name="nav"/>   
   <input type="radio" id="box5" name="nav"/>
 <div id="pic1">
<img src="http://goo.gl/zCRLx" alt="pic1" /></div>
<div id="pic2">
<img src="http://goo.gl/rBx9C" alt="pic2" /></div>
<div id="pic3">
<img src="http://goo.gl/MGnZl" alt="pic3" /></div>
<div id="pic4">
<img src="http://goo.gl/u1bPS" alt="pic4" /></div>
<div id="pic5">
<img src="http://goo.gl/WZQ9j" alt="pic5" /></div>
<div class="holder">
   <label for="box1"><div class="switch" id="eins" ></div></label>
   <label for="box2"><div class="switch" id="zwei" ></div></label>
   <label for="box3"><div class="switch" id="drei" ></div></label>
   <label for="box4"><div class="switch" id="vier" ></div></label>
   <label for="box5"><div class="switch" id="fünf" ></div></label>
</div>
</div>
CSS
input#box1, input#box2,input#box3,input#box4,input#box5 {
    display: none;
}
label { cursor: pointer }
#wrapper {
  position: relative;
  text-align:center;
  width: 640px;
  height:426px;
  overflow: hidden;
  margin: 0 auto;
}
#wrapper .switch {
  position: relative;
  left:50px ;
  height: 50px;
  width: 50px;
  float: left;
  color: rgba(0,0,0,0.3);
   -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 1s;
}
#wrapper .switch:hover {
  opacity: 1;
    -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 1s;
}
#wrapper .holder {
  position: relative;
  width: 800px;

}
#pic1 img,
#pic2 img,
#pic3 img,
#pic4 img,
#pic5 img  {
  position: absolute;
  top: 0;
  left:0;
  opacity: 0;
     -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 1s;
}
#wrapper #box1:checked ~ div#pic1 img,#wrapper #box2:checked ~ div#pic2 img, 
#wrapper #box3:checked ~ div#pic3 img,#wrapper #box4:checked ~ div#pic4 img, 
#wrapper #box5:checked ~ div#pic5 img   {
    opacity: 1;
     -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 1s;
}

#wrapper #box1:checked ~ div { margin-left: 0px }
#wrapper #box2:checked ~ div { margin-left: -50px }
#wrapper #box3:checked ~ div { margin-left: -100px }
#wrapper #box4:checked ~ div { margin-left: -150px }
#wrapper #box5:checked ~ div { margin-left: -200px }

#box1:checked ~ div #zwei::after {
  top: 140px;
  left: 400px;
  position: absolute;
  display: block;
  font-size: 90px;
  content:">>";
  z-index: 2;
}

#box2:checked ~ div #eins::before {
  top: 140px;
  left: 30px;
  position: absolute;
  display: block;
  font-size: 90px;
  content:"<<";
  z-index: 2;
}
#box2:checked ~ div #drei::after {
  top: 140px;
  left: 400px;
  position: absolute;
  display: block;
  font-size: 90px;
  content:">>";
  z-index: 2;
}
#box3:checked ~ div #zwei::before {
  top: 140px;
  left: 30px;
  position: absolute;
  display: block;
  font-size: 90px;
  content:"<<";
  z-index: 2;
}
#box3:checked ~ div #vier::after {
  top: 140px;
  left: 400px;
  position: absolute;
  display: block;
  font-size: 90px;
  content:">>";
  z-index: 2;
}
#box4:checked ~ div #drei::before {
  top: 140px;
  left: 30px;
  position: absolute;
  display: block;
  font-size: 90px;
  content:"<<";
  z-index: 2;
}
#box4:checked ~ div #fünf::after {
  top: 140px;
  left: 400px;
  position: absolute;
  display: block;
  font-size: 90px;
  content:">>";
  z-index: 2;
}
#box5:checked ~ div #vier::before {
  top: 140px;
  left: 30px;
  position: absolute;
  display: block;
  font-size: 90px;
  content:"<<";
  z-index: 2;
}

Einsatz?

Die Skizze sollte in allen modernen Browsern funktionieren, auch im IE9. Hier im Blog funktioniert das mit dem Internet Explorer aber nicht ... warum-auch-immer. Das ganze geht auch mobile, etwa mit dem iPad - dort sogar sehr gut. Das ist nur eine Übung von mir um mein Verständnis für CSS3 und seine Möglichkeiten zu erweitern, nicht für den produktiven Einsatz gedacht. Mir erschließt sich vieles erst, wenn ich selber damit rumbaue - in einem Web-Log drüber zu schreiben gibt mir einen 'äußeren' Rahmen. Das ihr damit 'praktisch' etwas anfangen könnt, ist nicht Sinn und Zweck der Skizzen. Das ist bestenfalls ein Abfallprodukt.
Labels:
Neuerer Post Älterer Post