Scrolleffekte sind heutzutage der letzte Schrei. Wenn sich der Benutzer auf der Seite nach unten bewegt, bewegt sich der Inhalt mehr als nur den Bildschirm nach oben, er wird lebendig und wird interessanter. Leider gibt es keine einfache Möglichkeit, diese Effekte mit reinem CSS zu erreichen. Wenn Sie JavaScript nicht kennen, haben Sie kein Glück.
Hier kommt Stroll.js ins Spiel. Es ist eine sehr einfach zu implementierende Bibliothek, die das Anlegen von überwältigenden Scroll-Effekten zum Kinderspiel macht. Alles, was Sie tun müssen, ist ein paar kurze JavaScript-Zeilen einzufügen, den Rest erledigen Sie mit HTML und CSS. Lesen Sie weiter und ich zeige Ihnen, wie es funktioniert.
Triff Stroll.js
Stroll.js ist eine nette kleine JavaScript-Bibliothek, die der Scroll-Aktion für Listenelemente eine Reihe auffallender Animationen verleiht. Die Idee ist, dass Sie eine Gruppe von Elementen in einer scrollbaren Liste haben und Stroll.js verwenden, um das Durchsuchen dieser Liste interessanter zu machen.
Auf der Startseite des Projekts (oben gezeigt) finden Sie eine Reihe von Demos, die Sie ausprobieren können, um zu sehen, welche Arten von Effekten enthalten sind. Die Animationen selbst werden mit einfachen CSS3-Transformationen erstellt, sodass Sie die Bibliothek leicht mit Ihren eigenen Ideen erweitern und anpassen können.
Lass uns eine Demo bauen!
Jedes Mal, wenn ich auf ein cooles Projekt wie Stroll.js stoße, möchte ich sofort eintauchen, die Reifen kicken und sehen, wie alles funktioniert. Langweilige Dokumentationen zu lesen ist gut und schön, aber so etwas kann ich wirklich nicht spüren, bevor ich es selbst nicht probiere. Das werden wir heute tun.
Demo: Klicken Sie hier, um zu starten.
HTML
Um zu beginnen, wissen wir, dass wir eine Liste brauchen werden, denn darum geht es bei Stroll.js: Animieren von Listenblättern. Die Listenelemente in der Demo waren lediglich eine einfache Textzeile, aber ich möchte noch viel mehr darauf drängen, wie Stroll.js damit umgeht. Wir werden dafür sorgen, dass jedes Listenelement ein Bild, eine Überschrift und einen Absatz enthält.
Wenn Sie Zen-Codierung wie ich verwenden, geben Sie Folgendes in Ihren HTML-Editor ein (andernfalls geben Sie einfach den nächsten Teil manuell ein).
Wie Sie sehen, haben wir mit einer ungeordneten Liste begonnen und dann ein untergeordnetes Element mit Listenelementen gegeben, das die drei Elemente enthält, die wir gerade gewünscht haben. Wenn Sie die Tabulatortaste oder die von Ihrem Editor verwendete Verknüpfung drücken, wird dies in den folgenden HTML-Code erweitert:
Bilder
Für die Bildstile fügen wir einen Rand von 20 Pixeln hinzu, um ihnen etwas Atempause zu geben, und einen Grenzradius von 50% (siehe ma, keine Browser-Präfixe!), Um die Miniaturbilder perfekt abzurunden. Außerdem werden wir die Bilder so verschieben, dass der Text neben ihnen und nicht darunter angezeigt wird.
Typografie
Für den Typ müssen wir unsere h2- und Absatzstile definieren. Ich benutzte die Abkürzung, um dem Header eine kühne, serifenlose Behandlung und den Absatz eine normale Serifenbehandlung zu geben. Beachten Sie auch, dass der Absatz eine etwas hellere Farbe aufweist, um die visuelle Unterscheidung zu erleichtern.
Liste
Jetzt ist es Zeit für den größten Teil von CSS, das letzte Stück, das unsere Listenelemente perfekt aussehen lässt. Setzen Sie die Position auf relativ, die Breite auf 800px und die Höhe auf 510px. Wenden Sie dann einige Ränder und Füllungen an und stellen Sie sicher, dass der Listenstil auf Keine gesetzt ist.
Die Sache, die Sie wirklich richtig machen müssen, ist der Überlauf. Setzen Sie den Überlauf-x auf ausgeblendet und den Überlauf-y, um so zu scrollen, dass Ihre Liste tatsächlich scrollbar ist.
Nachdem wir nun die ungeordneten Listenstile ausgearbeitet haben, ist es an der Zeit, die Listenelementstile detailliert festzulegen und festzulegen. Stellen Sie erneut die Position (relativ), die Höhe (200px) und den Abstand (20px) ein. Stellen Sie dann die Farben für den Hintergrund und den Typ ein, stellen Sie den Überlauf auf auto und den z-Index auf zwei.
Der knifflige Teil hier ist der zweite Selektor. Ich verwende nth-child (ungerade), um die Farbe jedes anderen Listenelements zu ändern, wodurch sich jeder vom nächsten unterscheidet. Dies wird auf IE nicht gut unterstützt, aber auch Stroll.js wird nicht verwendet. Denken Sie jedoch immer daran, dass Sie Selectivizr verwenden können, um die Unterstützung für den Selector zu erhöhen. Wenn die Bildlaufeffekte nicht weitgehend unterstützt werden, ist dies keine große Sache (sie sind reine Augenweide), aber Sie sollten das andere visuelle Styling so cross-browser wie möglich gestalten.
Fortschrittskontrolle
Die meiste Arbeit ist erledigt! Unsere Liste sieht fantastisch aus. Alles, was wir noch tun müssen, ist, sie mit etwas JavaScript zum Leben zu erwecken. Es wird kein bisschen weh tun, versprochen.
JavaScript
Nun, ich habe zu Beginn dieses Projekts versprochen, dass Sie JavaScript nicht kennen müssen, um fortzufahren.Hier wirft ich jedoch JavaScript auf Sie! Was gibt? Die Wahrheit ist, dass Sie ein bisschen JS benötigen, aber eine Copy & Paste-Aktion funktioniert einwandfrei und lässt sich leicht an Ihr Projekt anpassen.
Werfen Sie diesen Code in am Ende des Körpers in Ihrem HTML.
Sehen? Das war nicht so schlimm. Zum Anpassen müssen Sie lediglich sicherstellen, dass Sie die richtige ID angeben. Wir benutzten? #Main? heute in unserem Projekt, aber ändern Sie dies gerne für Ihre eigenen Zwecke.
Es lebt!
Damit sind wir alle fertig! Um den Effekt zu ändern, müssen wir nur eine andere Klasse in der ungeordneten Liste anwenden. Für die Demo habe ich die Effekte Flip, Curl und Tilt verwendet.
Demo: Klicken Sie hier, um zu starten.
Was denkst du?
Wenn Sie darüber nachdenken, wie Sie Scroll-Events interessanter gestalten können, eröffnet sich ein völlig neuer Bereich interessanter Gestaltungsmöglichkeiten. Wie bei jedem Effekt können diese zum Guten oder Bösen verwendet werden. Wenn Sie sie zu weit ziehen oder missbrauchen, wird dies zu einer schwindelerregenden Seite führen, die niemand verwenden möchte. Verwenden Sie Stroll.js sparsam und es wird eine viel größere Wirkung haben.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie von Stroll.js halten. Mögen Sie das Scrollen von Animationen oder möchten Sie, dass Entwickler keine neuen Orte mehr finden, um mehr Animationen zu erstellen? Lass uns wissen!