Wie Sie Ihrem Logo den "Slip Scroll"-Effekt verleihen

() translation by (you can also view the original English article)

Im heutigen Tutorial werden wir JavaScript verwenden, um einen einfachen, flexiblen Parallaxen-Effekt zu erzeugen, bei dem ein Logo scheinbar die Farben mit dem Hintergrund wechselt, wenn der Benutzer scrollt.

Slip scroll effect — Der Slip-Scroll-Effekt in Aktion

Wir werden ein "Standard"-Element erstellen, das seine Position beibehält (position: fixed), und eine Reihe von "beweglichen" Elementen, deren Position von diesem "Standard"-Element abhängt. Wir werden JavaScript verwenden, um dies jedes Mal zu tun, wenn der Benutzer scrollt.

Hinweis: Um alle Bereiche abzudecken, habe ich die Erklärung in Video- und schriftlicher Form bereitgestellt.

Das Video ansehen

Abonnieren Sie Tuts+ Web Design auf Youtube

Lesen Sie die Anleitung

Basis-Auszeichnung

Wir beginnen mit der Erstellung einiger enthaltender Elemente. Wir machen einen ihrer Hintergründe dunkel und einen hell, damit wir ein kontrastreiches Bild in ihnen enthalten können. Außerdem machen wir unser erstes Bild zum "Standardbild", indem wir ihm die Klasse default zuweisen, während die anderen Bilder die Klasse moveable erhalten.

<div class="container dark">
  <img src="img/acme-light.svg" class="default">
</div>

<div class="container light">
  <img src="img/acme-dark.svg" class="moveable">
</div>

Basisstile

Stellen wir nun sicher, dass unsere Bilder nicht außerhalb ihrer Container scrollen, indem wir overflow: hidden einstellen. Wir werden auch voran gehen und sagen, dass diese Container relative Position haben, so dass die absolut positionierten Elemente zu diesen Containern statt direkt auf das feste Element ausrichten, wenn wir unser JavaScript schreiben.

Aus Gründen der Scrollbarkeit, geben wir diesen Containern eine min-height von etwa 400px. Und unsere Logos weg von den Kanten zu halten, geben wir ihnen einige padding von 1em.

.container {
  overflow: hidden;
  position: relative;
  min-height: 400px;
  padding: 1em;
}

Jeder Behälter braucht also eine kontrastreiche Farbe:

.dark {
  background: #333;
}

.light {
  background: #fff;
}

Und schließlich, wie versprochen, stellen wir unsere Standard- und beweglichen CSS so ein, dass eine mit der Seite verbunden ist, wenn der Benutzer scrollt, und die andere sich mit ihr bewegt, ohne an andere Elemente zu stoßen:

.default {
  position: fixed;
}

.moveable {
  position: absolute;
}

Das sollte für das Markup und das Styling ausreichen. Wenn Sie die Seite anzeigen, sollten Sie das Standardlogo sehen, das nach unten scrollt und sich hinter den anderen Containern versteckt, während alle beweglichen Logos als normale Elemente oben links in ihren jeweiligen Containern erscheinen sollten.

Einführung in JavaScript

Jetzt kommt der spaßige Teil: die Arbeit mit JavaScript.

Zuerst laden wir jQuery und unser benutzerdefiniertes Skript am Ende unserer index.html:

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2	<script src="js/slipScroll.js"></script>
3	</body>
4	</html>

Erstellen und öffnen Sie eine Datei namens js/slipScroll.js.

In dieser Datei erstellen wir als Erstes eine Funktion namens setLogo und fügen diese Funktion in ein jQuery-Scroll-Ereignis ein, damit dieses Ereignis jedes Mal ausgelöst wird, wenn der Benutzer einen Pixel scrollt. Wir wollen auch sicherstellen, dass wir dieses Ereignis auslösen, wenn der Benutzer zuerst auf der Seite ankommt (bevor er scrollt):

var setLogo = function() {

};

$(document).scroll(function() {
  setLogo();
});

setLogo();

Die Dinge zum Laufen bringen

Jetzt kommt der Clou. Nehmen wir an, dass jede einzelne Instanz von .moveable auf der Seite seine CSS-top-Position ändern sollte, wie weit das Standardbild vom oberen Rand der Seite entfernt ist, abzüglich der Entfernung des Containers dieses .moveable-Elements vom oberen Rand der Seite.

var setLogo = function() {

  $('.moveable').each(function() {
    $(this).css('top',
      $('.default').offset().top -
      $(this).closest('.container').offset().top
    );
  });

};

Aktualisieren Sie Ihre Seite, und voila! Sie haben soeben einen pseudo-parallaxen Bildlaufeffekt von Grund auf in nur wenigen Zeilen Code erstellt.

Schlussfolgerung

Ich möchte Sie ermutigen, mit dieser Lösung herumzuprobieren. Versuchen Sie, mit der JavaScript-Funktion selbst zu spielen, um zu sehen, welche Art von seltsamen Offsets Sie erhalten, wenn Sie ein paar Pixel hinzufügen oder entfernen. Versuchen Sie, verschiedene Elemente (z. B. eine Navigation) anstelle von Bildern für Ihren scrollbaren Inhalt zu verwenden.

Ich hoffe, Sie haben viel gelernt, und wenn Sie Fragen haben, können Sie gerne unten einen Kommentar hinterlassen.