Photo Swivel

Der folgende Beitrag ist ein Gastbeitrag von Alex Young (@the_alexyoung). Alex hat eine einfache Technik entwickelt, um das Motiv eines Fotos zu „drehen“, indem einfach mehrere übereinander liegende Fotografien, die aus verschiedenen Blickwinkeln aufgenommen wurden, ein- und ausgeblendet werden. Viel Spaß!

Webdesigner und -entwickler haben uns schon immer mit unterhaltsamen und ansprechenden Möglichkeiten fasziniert, wie wir mit ihren Websites interagieren. Ich liebe es, neue Techniken zu entdecken, die sich diese Designer/Entwickler ausgedacht haben. Eine Technik, die mein Interesse besonders geweckt hat, ist etwas, das ich auf der Website von Warby Parker gesehen habe. Sie konnten einen coolen Effekt erzielen, bei dem ein Model der Maus des Benutzers folgt und dabei die verschiedenen Blickwinkel der Brillengestelle zeigt.

Ich habe diese Technik hauptsächlich für die Präsentation von Sonnenbrillen gesehen, aber ich bin gespannt, was Sie für andere reale Anwendungen entwickeln können.

Bevor wir beginnen, benötigen Sie ein paar Dinge. Genauer gesagt, sieben Dinge. Sie benötigen sieben Fotos von etwas, das aus sieben verschiedenen Blickwinkeln aufgenommen wurde.

HTML-Setup

Was wir einrichten, ist ein Container namens „faces“ und dann ein Bereich, den wir zur Anzeige der Fotos verwenden werden – „face-area“. Wir haben auch ein div, um jedes der sieben einzelnen Bilder aufzunehmen.

<div id="faces">

  <div id="face-area">

    <div id="image-1" style="display: none;">
      <img src="/images/look-left-3.jpg">
    </div>

    <div id="image-2" style="display: none;">
      <img src="/images/look-left-2.jpg">
    </div>

    <div id="image-3" style="display: none;">
      <img src="/images/look-left-1.jpg">
    </div>

    <div id="image-4" style="display: none;">
      <img src="/images/look-center.jpg">
    </div>

    <div id="image-5" style="display: none;">
      <img src="/images/look-right-1.jpg">
    </div>

    <div id="image-6" style="display: none;">
      <img src="/images/look-right-2.jpg">
    </div>

    <div id="image-7" style="display: none;">
      <img src="/images/look-right-3.jpg">
    </div>

Nun erstellen wir ein div, das genau das tut, was der Name vermuten lässt. Es wird auf den anderen divs liegen. Wir können dieses div in 7 kleine Spalten unterteilen und diese gleichmäßig darauf verteilen. Diese 7 Spalten werden verwendet, um zu erkennen, wann die Maus über eine bestimmte Spalte schwebt. Durch das Hinzufügen von „data-number“ zu jedem div können wir später in jQuery auf jedes einzelne verweisen.

    <div id="the_faces_overlay">
      <div class="the_faces" data-number="1"></div>
      <div class="the_faces" data-number="2"> </div>
      <div class="the_faces" data-number="3"></div>
      <div class="the_faces" data-number="4"></div>
      <div class="the_faces" data-number="5"></div>
      <div class="the_faces" data-number="6"></div>
      <div class="the_faces" data-number="7"></div>
    </div> 

  </div><!-- END #face-area -->

</div> <!-- END #faces --> 

CSS-Setup

Der Großteil des CSS ist selbsterklärend. Eine Sache, die ich erwähnen muss und die wichtig ist: Stellen Sie sicher, dass die 7 Spalten perfekt zusammenpassen und den gesamten span des div abdecken.

body {
  background: #333 
}

#faces {
  height: 333px;
  width: 500px;
  margin: 0 auto;
  border: 8px solid white;
}

#face-area {
  height: 500px;
  width: 333px;
  position: relative;
}

#the_faces_overlay {
  position: absolute;
  width: 500px;
  top: 0;
  left: 0;
}

#faces .the_faces {
  height: 333px;
  width: 14.2857143%;
  float: left;
  margin: 0;
  padding: 0;
}

jQuery-Setup

Wir müssen darauf reagieren, wenn über eine der Spalten geschwebt wird. Hier kommen die „data-numbers“ ins Spiel. Wenn wir später weitere Spalten hinzufügen wollten, müssten wir kein zusätzliches JavaScript schreiben.

// Reveal the "center" image
var centerImage = $("#image-4").show();

// Bind hovers to each column
$(".the_faces").each(function() {

  $(this).on("mouseover", function() {
  
    $("#image-" + $(this).attr("data-number")).show();
  
  }).on("mouseout",function() {
  
    $("#image-" + $(this).attr("data-number")).hide();

  });
  
});

// Reset center image
$("#face-area").on("mouseleave", function() {
  centerImage.show();
}).on("mouseenter", function() {
  centerImage.hide();
});

Tada!

Check out this Pen!

Da haben Sie es! Jetzt haben Sie Ihr eigenes, aufsehenerregendes Modell. Nutzen Sie es, um Ihre eigenen Produkte zu präsentieren. Es gibt unzählige Anwendungsmöglichkeiten dafür. Lassen Sie mich wissen, was Sie sich einfallen lassen.

Hinweis des Herausgebers: Das wäre eine lustige Demo, um Touch-Unterstützung hinzuzufügen, nicht wahr? Folgen Sie einem Wisch oder so etwas.