Erstellen eines CSS-Vorhang-Öffnungseffekts

Wenn Sie so alt sind wie ich, erinnern Sie sich vielleicht noch an das Anschauen von Let’s Make a Deal im alten Fernsehprogramm. Die Show läuft heutzutage anscheinend immer noch in einem neuen Format, aber das Original hat mich wegen einer einfachen Sache immer beeindruckt: der Enthüllung.

Es ist etwas Aufregendes, nicht zu wissen, was sich hinter einem Vorhang verbirgt, und darum ging es bei Let’s Make a Deal. Die Kandidaten hatten die Wahl zwischen drei Türen, die sich jeweils öffneten, um einen Preis zu enthüllen.

Es war aufregend!

Diese Technik, bei der sich Vorhänge öffnen, um einen Schatz zu enthüllen (selbst wenn es ein Bob’s Big Boy Geschenkgutschein ist), ist eine nette kleine Taktik, die wir mit ein wenig CSS selbst anwenden können. Hier ist die finale Demo

Sehen Sie den Pen OXJMmY von Geoff Graham (@geoffgraham) auf CodePen.

Das HTML

Das lässt sich im Grunde auf drei Elemente reduzieren

• Der Vorhang-Wrapper
• Linkes Vorhangpaneel
• Rechtes Vorhangpaneel

Wir können visualisieren, was wir in einem Diagramm tun

…und wenn sich die Vorhangpaneele öffnen, enthüllen sie einen Preis als viertes Element

Nutzen wir das als Blaupause für unser HTML.

<!-- The parent component -->
<div class="curtain">
	
  <!-- The component wrapper -->
  <div class="curtain__wrapper">
    
    <!-- The left curtain panel -->
    <div class="curtain__panel curtain__panel--left">

    </div> <!-- curtain__panel -->
    
    <!-- The prize behind the curtain panels -->
    <div class="curtain__prize">

    </div> <!-- curtain__prize -->
    
    <!-- The right curtain panel -->
    <div class="curtain__panel curtain__panel--right">
	    
    </div> <!-- curtain__panel -->
    
  </div> <!-- curtain__wrapper -->

</div> <!-- curtain -->

Das CSS-Layout

Nachdem wir unsere Elemente im HTML definiert haben, können wir mit dem Positionieren mit CSS beginnen.

Unser erstes Ziel ist es, die Vorhangpaneele so zu positionieren, dass sie nicht nur nebeneinander liegen, sondern auch vor dem eigentlichen Preis.

.curtain {
  width: 100%; /* Ensures the component is the full screen width */
  height: 100vh; /* We're using this for demo purposes */
  overflow: hidden; /* Allows us to slide the panels outside the container without them showing */
}
  
.curtain__wrapper {
  width: 100%;
  height: 100%;
}
      
.curtain__panel {
  background: orange;
  width: 50%; /* Each panel takes up half the container */
  height: 100vh; /* Used for demo purposes */
  float: left; /* Makes sure panels are side-by-side */
  position: relative; /* Needed to define the z-index */
  z-index: 2; /* Places the panels in front of the prize */
}

.curtain__panel--left {
  /* Styles for sliding the left panel */
}

.curtain__panel--right {
  /* Styles for sliding the right panel */
}
  
.curtain__prize {
  background: #333;
  position: absolute; /* Forces the prize position into the container start */
  z-index: 1; /* Places the prize behind the panels, which are z-index 2 */
  width: 100%;
  height: 100%;
}

Es könnte so aussehen, als hätten wir fast nichts getan, wenn wir hier aufhören und unsere Arbeit überprüfen würden. Tatsächlich sehen wir nur einen orangefarbenen Block.

Sehen Sie den Pen wWvJaO von Geoff Graham (@geoffgraham) auf CodePen.

Das ist gut! Wir sehen tatsächlich zwei Vorhangpaneele, die den gesamten Vorhang-Container ausfüllen, und ein Paneel für einen Preis, der hinter den Kulissen lauert.

Der Checkbox-Hack

Ich wäre nachlässig, die Tatsache zu vernachlässigen, dass wir den Checkbox-Hack hier in die Praxis umsetzen werden. Der Checkbox-Hack, falls Sie ihn nicht kennen, ist eine Methode, mit der wir die Darstellung von Elementen basierend auf dem bekannten Zustand einer einfachen Formular-Checkbox ändern können. Wir haben einen Artikel über die Methode, falls Sie tiefer in die Funktionsweise eintauchen möchten.

Die erste Regel für die Verwendung des Checkbox-Hacks ist, dass wir eine Checkbox in unserem Markup benötigen. Fügen wir sie dem HTML hinzu

<!-- The parent component -->
<div class="curtain">
	
  <!-- The component wrapper -->
  <div class="curtain__wrapper">
    
    <!-- The checkbox hack! -->
    <input type="checkbox" checked>
    
    <!-- The left curtain panel -->
    <div class="curtain__panel curtain__panel--left">

    </div> <!-- curtain__panel -->
    
    <!-- The prize behind the curtain panels -->
    <div class="curtain__prize">

    </div> <!-- curtain__prize -->
    
    <!-- The right curtain panel -->
    <div class="curtain__panel curtain__panel--right">
	    
    </div> <!-- curtain__panel -->
    
  </div> <!-- curtain__wrapper -->

</div> <!-- curtain -->

Stellen wir zunächst sicher, dass unsere Checkbox sowohl unsichtbar ist als auch den gesamten Platz unseres Vorhang-Components einnimmt. Wir möchten, dass der gesamte Vorhang anklickbar ist, und das wird uns das ermöglichen.

input[type=checkbox] {
  position: absolute; /* Force the checkbox at the start of the container */
  cursor: pointer; /* Indicate the curtain is clickable */
  width: 100%; /* The checkbox is as wide as the component */
  height: 100%; /* The checkbox is as tall as the component */
  z-index: 100; /* Make sure the checkbox is on top of everything else */
  opacity: 0; /* Hide the checkbox */
}

Beachten Sie, dass der Standardzustand der Checkbox in unserem HTML checked ist. Dies ermöglicht es uns, unsere Elemente basierend auf dem :checked Zustand zu stylen.

/* When the checkbox is checked... */
        
/* Slide the first panel in */
input[type=checkbox]:checked ~ div.curtain__panel--left {
  transform: translateX(0);
}
        
/* Slide the second panel in */
input[type=checkbox]:checked ~ div.curtain__panel--right {
  transform: translateX(0);
}

Das bedeutet auch, dass wir unsere Vorhangpaneele aktualisieren können, sodass sie beim Auschecken der Checkbox aus dem Container gleiten.

/* Slide the panel to the left out of the container */
.curtain__panel--left {
  transform: translateX(-100%);
}

/* Slide the panel to the right out of the container */
.curtain__panel--right {
  transform: translateX(100%);
}

Jetzt geht es voran! Das Klicken auf den Vorhang-Component verschiebt die Paneele vom Bildschirm und enthüllt das Preis-Paneel.

Sehen Sie den Pen xOxqOL von Geoff Graham (@geoffgraham) auf CodePen.

Die Animation der Änderung

Als Nächstes müssen wir den Übergang der Paneele animieren, sobald der Zustand der Checkbox per Klick geändert wurde. Andernfalls, wie Sie vielleicht bemerkt haben, sieht die Änderung weniger wie eine Schiebetür und mehr wie ein Augenschlag aus.

Fügen wir der Klasse .curtain__panel eine transition hinzu

.curtain__panel {
  background: orange;
  width: 50%; /* Each panel takes up half the container */
  height: 100vh; /* Used for demo purposes */
  float: left; /* Makes sure panels are side-by-side */
  position: relative; /* Needed to define the z-index */
  z-index: 2; /* Places the panels in front of the prize */
  transition: all 1s ease-out; /* Animates the sliding transition */
}

Wie cool sind wir?

Sehen Sie den Pen aZbJBw von Geoff Graham (@geoffgraham) auf CodePen.

Alles zusammenbringen

Nachdem wir nun alle funktionierenden Elemente vorhanden sind, können wir beginnen, Dinge anzupassen, indem wir den Vorhang- und Preis-Paneelen Inhalte hinzufügen.

Sehen Sie den Pen OXJMmY von Geoff Graham (@geoffgraham) auf CodePen.