So verleihen Sie Ihrem Logo den Effekt „Slip Scroll“

Im heutigen Tutorial verwenden wir JavaScript, um einen einfachen, flexiblen Parallax-Effekt zu erzeugen, bei dem ein Logo scheinbar die Farbe ändert und der Hintergrund beim Scrollen des Benutzers aktiviert ist.

Der Slip-Scroll-Effekt in Aktion

Wir erstellen ein "Standardelement", das seiner Platzierung entspricht (Position: feststehend) und eine Reihe von beweglichen Elementen, deren Position von diesem Standardelement abhängig ist. Wir werden JavaScript verwenden, um dies bei jedem Bildlauf des Benutzers zu ermöglichen.

Hinweis: Um alle Grundlagen abzudecken, habe ich die Erklärung in Video und in schriftlicher Form bereitgestellt. 

Schau das Video

Abonnieren Sie Tuts + Web Design auf Youtube

Lesen Sie das Tutorial

Basisaufschlag

Wir beginnen mit der Erstellung einiger Elemente. Machen wir einen ihrer Hintergründe dunkel und einen hellen Hintergrund, damit wir ein kontrastierendes Bild enthalten können. Machen wir auch weiter und machen unser erstes Image zum Standardbild, indem wir ihm eine Klasse von geben Standard, während die anderen Bilder die Klasse von bekommen beweglich.

Basis-Styles

Lassen Sie uns nun sicherstellen, dass unsere Bilder nicht durch Einstellen außerhalb ihrer Container verschoben werden Überlauf versteckt. Wir gehen auch weiter und sagen, dass diese Container eine relative Position haben, sodass sich die absolut positionierten Elemente an diesen Containern ausrichten und nicht direkt am fixierten Element, wenn wir unser JavaScript schreiben. 

Geben Sie diesen Containern ein: min-Höhe von rund 400px. Und um unsere Logos von den Kanten fernzuhalten, geben wir ihnen ein paar Polsterung von 1em.

.Container Überlauf: versteckt; Position: relativ; min-Höhe: 400px; Polsterung: 1em;  

Jeder Container benötigt eine kontrastreiche Farbe:

.dunkel Hintergrund: # 333;  .light Hintergrund: #fff;  

Und schließlich, wie versprochen, setzen wir unser standardmäßiges und bewegliches CSS so, dass der eine beim Scrollen des Benutzers mit der Seite hängen bleibt und der andere sich mitbewegt, ohne auf andere Elemente zu stoßen:

.Standardeinstellung Position: fest;  .beweglich Position: absolut; 

Das sollte sich um das Markup und Styling kümmern. Wenn Sie die Seite anzeigen, sollte das Standardlogo nach unten scrollen und sich hinter den anderen Containern verstecken, während alle beweglichen Logos als normale Elemente oben links in den jeweiligen Containern angezeigt werden sollten.

Einführung in JavaScript

Nun zum Spaß, damit es mit JavaScript funktioniert.

Zuerst laden wir jQuery und unser benutzerdefiniertes Skript unten in unserem index.html:

Erstellen und öffnen Sie eine Datei mit dem Namen js / slipScroll.js.

In dieser Datei erstellen wir als Erstes eine Funktion mit dem Namen setLogo und werfen Sie diese Funktion in ein jQuery-Scroll-Ereignis, sodass dieses Ereignis jedes Mal ausgelöst wird, wenn der Benutzer ein Pixel scrollt. Wir möchten auch sicherstellen, dass wir dieses Ereignis auslösen, wenn der Benutzer zum ersten Mal auf der Seite erscheint (bevor sie einen Bildlauf durchführen):

var setLogo = function () ; $ (document) .scroll (function () setLogo ();); setLogo (); 

Dinge zum Laufen bringen

Nun zur Magie. Nehmen wir an, dass jede einzelne Instanz von .beweglich auf der Seite sollte sich das CSS ändern oben Die Position ist jedoch so weit entfernt, dass das Standardbild vom oberen Rand der Seite entfernt ist .beweglich Der Container des Elements befindet sich oben auf 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 gerade einen Pseudo-Parallax-Scrolling-Effekt in nur wenigen Codezeilen von Grund auf erstellt.

Fazit

Ich möchte Sie dazu ermutigen, an dieser Lösung zu basteln. Versuchen Sie, mit der JavaScript-Funktion selbst zu spielen, um zu sehen, welche seltsamen Versätze Sie erhalten, wenn Sie ein paar Pixel hinzufügen oder entfernen. Verwenden Sie verschiedene Elemente (Navigation?) Anstelle von Bildern für Ihren scrollbaren Inhalt.

Ich hoffe, dass Sie viel gelernt haben und gerne Kommentare hinterlassen, wenn Sie Fragen haben.