3D Inset Parallax-Effekt

Der folgende Beitrag stammt von Joshua Bader. Joshua hat festgestellt, dass bestimmte 3D-Effekte im Web von einer Anpassung der Perspektive profitieren könnten, während die Webseite gescrollt wird. Ich überlasse es ihm, es zu erklären.

Leute lieben es, flache Dinge so erscheinen zu lassen, als wären sie dreidimensional. Es gibt zwei Möglichkeiten, diesen Effekt in einer 2D-Umgebung zu erzielen: Form und Bewegung.

Indem wir einer flachen Form das Aussehen von Kanten oder Seiten verleihen, können wir Schaltflächen oder andere Objekte so erscheinen lassen, als wären sie vom Bildschirm angehoben oder in ihn versenkt. Dies ist sogar hier auf CSS-Tricks zu sehen.

Der Bewegungseffekt ist etwas kniffliger. In einer dreidimensionalen Welt bewegen sich Objekte, die näher sind, schnell, während die weiter entfernten Objekte langsam sind. Je weiter ein Objekt entfernt ist, desto langsamer bewegt es sich. Das nennt man den Parallax-Effekt. Der Parallax-Effekt wird seit einigen Jahren an allen möglichen Orten eingesetzt.

Die erste Methode, Form, funktioniert, weil sie Dinge erscheinen lässt, als würden sie hervorstechen oder von Ihnen weg gedrückt werden. Die zweite Methode, Bewegung, funktioniert, weil sie Dinge so erscheinen lässt, als wären sie in Bezug zueinander positioniert. Aber was, wenn wir sie kombinieren würden? Ein Objekt, das in den Bildschirm eingesunken aussieht, wie ein Regal, und dessen Kanten schrumpfen und wachsen, unter Verwendung des Parallax-Effekts, wodurch das Objekt so erscheint, als wäre es wirklich in 3D-Raum.

Zuerst müssen wir etwas Markup auf unserer Seite hinzufügen und den Elementen, die wir beeinflussen möchten, die Klasse inset geben. Jedes Block-Level-Element ist in Ordnung. Hier ist ein einfaches Formular mit Eingabefeldern, auf die der Effekt angewendet wird.

<form>

  <label>
    First Name:
    <input class="inset" type="text" placeholder="Enter First Name" />
  </label>

  <label>
    Last Name:
    <input class="inset" type="text" placeholder="Enter Last Name" />
  </label>

  <label>
    Email Address:
    <input class="inset" type="text" placeholder="Enter Email Address" />
  </label>

  <label>
    Address:
    <input class="inset" type="text" placeholder="Enter Address" />
  </label>

  <label>
    Phone Number:
    <input class="inset" type="text" placeholder="Enter Phone Number" />
  </label>

</form>

Als nächstes müssen wir unsere inset-Elemente stylen. Indem wir dem Element leicht unterschiedliche farbige Rahmen geben, können wir dem Element die Illusion von Tiefe verleihen. Das liegt daran, dass die Verbindung zwischen den Rahmen ein Winkel ist und mit den unterschiedlichen Farben der Eindruck entsteht, als würde Licht auf verschiedene „Seiten“ eines 3D-Bereichs treffen. Das ist die von uns erwähnte „Form“-Methode.

.inset {
  width: 100%;
  box-sizing: border-box;
  background: #f9f9f9;
  border-style: solid;
  border-width: 30px;
  border-top-color: #e5e5e5;
  border-right-color: #eee;
  border-bottom-color: #e5e5e5;
  border-left-color: #eee;
}

Nachdem die Form, die wir manipulieren wollen, gestylt ist, können wir etwas einfaches jQuery verwenden, um die ursprüngliche Rahmenbreite des Elements, die Fensterhöhe, die Scroll-Position, die Position des Zielelements auf dem Bildschirm zu ermitteln und diese Position in einen Prozentsatz für den oberen und unteren Rand umzuwandeln.

var origBorderWidth = parseInt($('.inset').css('border-top-width')),
win = $(window),
windowHeight = win.height();

$('.inset').each(function() {
  var self = $(this),
    scrollHeight = win.scrollTop(),
    elementPosition = self.position(),
    positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100);
    positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);
});

Sobald wir all diese Zahlen als Variablen haben, können wir die oberen und unteren Rahmenbreiten jedes Elements basierend auf seiner Position auf dem Bildschirm ändern.

var origBorderWidth = parseInt($('.inset').css('border-top-width')),
win = $(window),
windowHeight = win.height();

$('.inset').each(function() {
  var self = $(this),
    scrollHeight = win.scrollTop(),
    elementPosition = self.position(),
    positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100);
    positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);

  self.css({
    'border-top-width' : origBorderWidth - (origBorderWidth * (positionPercentTop / 100)) + 'px',
    'border-bottom-width' : origBorderWidth * (positionPercentBottom / 100) + 'px'
  });
});

Nun kommt der spaßige Teil – Neuberechnung der oberen und unteren Rahmenbreiten jedes Elements, während die Seite gescrollt wird. Dies gibt uns den gewünschten Parallax-Bewegungseffekt.

var origBorderWidth = parseInt($('.inset').css('border-top-width')),
  win = $(window);

function set3D() {
  var windowHeight = win.height();

  $('.inset').each(function() {
    var self = $(this),
      scrollHeight = win.scrollTop(),
      elementPosition = self.position(),
      positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100);
      positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);

    self.css({
      'border-top-width' : origBorderWidth - (origBorderWidth * (positionPercentTop / 100)) + 'px',
      'border-bottom-width' : origBorderWidth * (positionPercentBottom / 100) + 'px'
    });
  });
};

win.on('load scroll resize', function() {
  set3D();
});

Da haben Sie es. Um den Effekt zu sehen, behalten Sie ein einzelnes Element im Auge, während es beim Scrollen auf und ab der Seite bewegt wird. Sie werden sehen, wie sich seine obere und untere Rahmenbreite je nach Position auf der Seite ändert. Es ist subtil, aber effektiv.

Check out this Pen!