Share
Es ist seit einiger Zeit eines der größten Schlagworte für Webdesign, also versuchen wir es heute mit etwas Parallax. Wir werden ein einfaches responsives Layout erstellen und dann mit Hilfe von skrollr.js einen subtilen Parallax-Effekt auf den Header anwenden.
Dieses Tutorial wird einige bemerkenswerte Aspekte abdecken.
Alles klar! Beginnen wir unser Projekt mit einigen nackten Knochen-Dateien. Dies ist, was Sie benötigen, um mit zu beginnen:
Unsere index.html ist im Moment leer, dann haben wir ein img-Verzeichnis mit unserem Kaffeebild darin, ein css-Verzeichnis mit einer Reset-Datei sowie unser Fluid-Raster und eine leere styles.css, die geduldig auf unsere Eingabe warten. Zuletzt haben wir ein js-Verzeichnis mit der von GitHub heruntergeladenen Datei skrollr.js.
Unser index.html wird mit einigen sehr vertrauten Elementen beginnen:
Sinnlos Pap
Ich werde Sie nicht mit all diesen Kleinigkeiten langweilen, aber es ist erwähnenswert, dass das Viewport-Meta-Tag vorhanden ist. Wir haben dem Dokument einen (unsinnigen) Titel gegeben, der mit einigen Favicons verknüpft ist - und darauf haben wir hingewiesen Nur eine CSS-Datei: styles.css.
Ein kleines Stylesheet, um sie alle zu beherrschen.
Als ich zum ersten Mal über die Dateien und Ordner sprach, erwähnte ich drei Stylesheets. normalize.css (um unsere Stile verantwortungsbewusst zurückzusetzen), fluid_skeleton.css (die ich von der Skelett-Boilerplate angepasst habe) und die aktuellen styles.css. Warum haben wir in unserer HTML-Datei nur einen Link dazu gesetzt??
Nun, wir werden dies als Einführung in Sass verwenden - ohne tatsächlich einen Sass zu verwenden.
Durch die Verwendung der Dateierweiterung .scss anstelle von .css können wir sie alle in eine Datei ziehen und die gesamte Partie minimieren. Beginnen Sie, indem Sie die CSS-Dateien wie folgt umbenennen:
Das war einfach, richtig? Beachten Sie die Unterstriche in den ersten beiden, die verhindern, dass diese Dateien in ihre eigenen CSS-Entsprechungen kompiliert werden. Stattdessen importieren wir sie in unsere styles.scss, genau wie bei einer normalen css @import-Regel:
/ * importiert * / @import "normalisieren"; @import "fluid_skeleton";
Wenn wir jetzt kompilieren, erhalten wir eine Datei styles.css, die aus allen Regeln in unseren .scss-Dateien aufgebaut ist. Wir müssen diese einzige Datei nur auf unserem Webserver bereitstellen, sodass auf unserer Website zwei Anfragen und mehrere Kbs gespeichert werden. Gut gemacht :)
Um die Dateien tatsächlich wie oben beschrieben zu kompilieren, benötigen wir eine kompilierende Anwendung (es sei denn, Sie möchten die Befehlszeile verwenden?). Es gibt ein paar Anwendungen, die die Arbeit für Sie erledigen werden. Ich benutze CodeKit (weil es großartig ist), aber CompassApp wird Sie genauso gut bedienen, und es ist auch unter Windows verfügbar.
Das Einrichten unseres Projekts ist so einfach wie das Ziehen des Projektordners in den Compiler. CodeKit überwacht jetzt alle Dateien in diesem Ordner. Wann immer ich auf "Speichern" klicke, egal welche SCSS-Datei ich gerade bearbeite, wird CodeKit alle Teile neu kompilieren, unser aktualisiertes CSS herausfiltern und, wenn unsere Seite in einem Browser geöffnet ist, das auch für uns aktualisieren.
Auch wenn Sie nicht weiter in Sass hineinschauen möchten, ist dies ein idealer Workflow.
Lassen Sie uns nun die Datei index.html auffüllen. Danach können wir wirklich mit dem Styling beginnen. Wie bereits erwähnt, verwende ich fluid_skeleton.css als Basis für das responsive Grid. Dies ist eine großartige, unkomplizierte Basis, von der aus ein einfaches Layout gestartet werden kann. Alles, was es erfordert, ist, dass wir seine Gitterstruktur verwenden, um unser Layout zu erstellen.
Wir brauchen:
Accentsconagua
.acht zum Beispiel insgesamt sechzehn.Zum Beispiel können wir ein schnelles vierspaltiges Layout erstellen:
Das Stylesheet schreibt vor, dass diese Divs alle 100% breit sind und ordentlich aufeinander gestapelt sind, bis der Darstellungsbereich 767px breit ist. Zu diesem Zeitpunkt verschiebt sich alles und diese vier Spalten werden sich wie vorgesehen auf dem Bildschirm ausbreiten.
Dieses schnelle Wireframe sollte Ihnen einen Eindruck davon vermitteln, wie wir unser strukturelles Markup gestalten werden.
Wenn Sie nach einem schnellen Kopieren / Einfügen suchen, hilft Ihnen dies:
Weitere Informationen zur Zusammenstellung von Skeleton finden Sie unter Erstellen eines Responsive Layouts mit Skeleton: Starting out.
Es ist immer einfacher zu sehen, was Sie tun, wenn Sie etwas Dummy-Text haben, mit dem Sie arbeiten können. Werfen Sie also eine Überschrift und einen Link in den Kopfbereich oben:
Sinnlos Pap
von Ian Yates
Dann richten Sie Ihre Aufmerksamkeit auf die Spalten und die Fußzeile. Ich habe eine Fülle von Fülltext von T'Lipsum "Ein Yorkshire Lorem Ipsum Generator für Yorkshire Folks" (weil ich ein stolzer Yorkshireman bin) besiegt!
Um Ihnen eine Idee zu geben, beginnt der Hauptteil (unser Bereich mit zwölf Spalten) folgendermaßen:
Mek ist ein Brew Ladys
Ein Pint'o mild. Sagen Sie diesem Gipfel jetzt, dass Sie nicht als Chuffin 'nora eeh erscheinen. Ey up ist der Bezirk deines Gottes. Seien Sie bitte reet nah dann michael palin bloomin "eck gerritetten. Ich werde dieses weiche Stiefmütterchen lernen. Jedes Tierchen weicher südlicher Stiefmütterchen-Edelmann, aber ein Bursche Mardy Gammler Shu 'Thi Göre Gesicht wie ein Arschhieb. Ee von Kaugummi Mardy Bum Michael Palin. Gottes eigene Grafschaft Th'art nesh dich. Es scheint, als gottes eigene Grafschaft, wo der Müll ist.
Stecken Sie einige Links in die Fußzeile und wir sind hier fertig!
Bevor wir weiter gehen, möchte ich ein paar Schriftarten verwenden. Gehen Sie zu Google Web Fonts und werfen Sie einen Blick auf PT Sans und PT Serif. Sie sind ein großartiges Duo, also fügen Sie beide Ihrer Sammlung hinzu und sammeln Sie den Stylesheet-Link.
Um Zeit zu sparen, ist dies der Link, den ich gegeben habe, nachdem ich jeweils die 400- und 700-Gewichtsversion ausgewählt habe:
@import url (http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
Sie können dies unter unseren anderen Importen in styles.scss einfügen. Beim Kompilieren wird der Inhalt dieser CSS-Datei nicht wirklich in unser reduziertes CSS gezogen, aber die @ import-Regel bleibt erhalten und die Schriftart wird trotzdem verwendet.
Jetzt setze ich PT Sans als unsere Basisschriftart, wobei die Schriftgröße auf 100% des Standardwerts des Browsers mit einer Zeilenhöhe von 1,5 mm eingestellt wird:
html font: 100% / 1.5em 'PT Sans', serifenlos;
Vieles von dem Styling, das wir auf diese Seite anwenden, ist ziemlich allgemein. Farben und Größen für die Typografie, Auffüllen der Bänder usw. Ziehen Sie die Quelldateien auseinander, und Sie werden den Inhalt von styles.scss selbsterklärend finden.
Konzentrieren wir uns jedoch einen Moment auf den Kopfbereich. Im Mobile-First-Zustand möchten wir ihm einen braunen Hintergrund geben. Erst wenn der Darstellungsbereich größer ist, wird das Kaffeebild eingefügt (um mobilen Benutzern die Bandbreite zu sparen). So sehen die Styles für das Header-Band jetzt aus:
header.band background: # 4b371f; Farbe weiß; Text ausrichten: Mitte; Auffüllen: 10% 0 15% 0;
Die Auffüllung oben und unten wurde als Prozentsatz der Browserbreite angewendet. Dies bedeutet, dass der Kopfbereich an Höhe zunimmt, wenn das Browserfenster erweitert wird. Dies ist ein ziemlich schöner Effekt und hält die Falte (wo auch immer dies derzeit ist) proportional zur Browserfenstergröße.
Lassen Sie uns nun die Überschrift gestalten, die wir darin haben.
h1, h2, h3 Schriftfamilie: 'PT Serif', Serife; Schriftgewicht: 700; Text ausrichten: Mitte; header.band h1 font-size: 3em; Zeilenhöhe: 1em; Rand unten: 1em;
Wir verwenden die serifenlose Variante von PT für unsere Überschriften, die sich gut mit der Körperkopie in Sans zusammenfügt.
Zum Schluss stylen wir unseren Anker, um ihn hervorzuheben:
a.button Hintergrund: # e33f0c; Text ausrichten: Mitte; Polsterung: .5em 1em; Farbe weiß; Schriftdicke: fett; Textdekoration: keine; Box-Schatten: 0 0.2em 0 # ab3009; Text-Transformation: Großbuchstaben; Buchstabenabstand: 0.1em; / * Übergang Cross-Browser-Sachen * / -webkit-Übergang: Hintergrund 0.2s Comfort-Out; / * Safari 3.2+, Chrome * / -moz-Übergang: Hintergrund 0.2s-Comfort-Out; / * Firefox 4-15 * / -o-Übergang: Hintergrund 0.2s-Comfort-Out; / * Opera 10.5-12.00 * / Übergang: Hintergrund 0.2s Comfort-Out; / * Firefox 16+, Opera 12.50+ * / a.button: hover Hintergrund: # ab3009;
Unkompliziertes Zeug, alles auf Em-Basis, um sicherzustellen, dass es bei Bedarf wachsen und schrumpfen kann - und wenn Sie Sass wirklich umarmen, können Sie alle Stylings noch schlanker machen! Für den Moment sollten Sie Folgendes haben:
Nachdem wir unser grundlegendes mobiles Erlebnis aufgebaut haben, können wir jetzt die Dinge für größere Bildschirme verschönern. Wie Sie Ihre Medienabfragen anordnen, bleibt Ihnen überlassen. Da dies jedoch ein ziemlich unkompliziertes Stylesheet ist, füge ich alle meine zusätzlichen Regeln in einer Medienabfrage am Ende von styles.scss zusammen.
Lassen Sie uns einige Regeln hinzufügen, die sich auf Bildschirmen mit mehr als 767 Pixeln auswirken werden. Dieser Haltepunkt ist ziemlich willkürlich und passte genau zu dem Entwurf, als ich ihn zum ersten Mal baute. Welchen besseren Weg, um einen Haltepunkt zu wählen?!
@media only screen und (min-width: 767px)
Es gibt nicht viele Stile, die hier hinzugefügt werden müssen. Wir möchten lediglich die Schriftgröße im gesamten Dokument erhöhen, unsere Schaltfläche etwas hervorheben und dem Hintergrundbereich ein Hintergrundbild hinzufügen:
@media only screen und (min-width: 767px) body font-size: 1.125em; / * 18px / 16px * / Zeilenhöhe: 1.7em; header.band Hintergrundbild: URL (… /img/background.jpg); Hintergrundgröße: 100%; header.band h1 font-size: 3.25em; / * 52/16 * / a.button padding: .75em 1.5em;
Auf größeren Bildschirmen sollten wir jetzt so etwas wie…
Wenn Sie jetzt die Seite nach unten scrollen, verschwindet unsere Kopfzeile so, wie Sie es erwarten würden. Kommen wir nun zur Grundlage dieser ganzen Übung. Parallaxe. Sie sollten skrollr.js bereits von GitHub heruntergeladen und im Ordner js abgelegt haben.
Als Nächstes müssen wir in unserer HTML-Datei darauf verweisen. Platzieren Sie diesen Link vor dem Schließen unten
Dies ist ein Vanille-JavaScript-Spielzeug, daher müssen wir jQuery nicht vorher ziehen. Als nächstes müssen wir skrollr anrufen, was wir so machen:
Es gibt eine Reihe von Optionen, mit denen wir herumspielen können. Alle haben Einstellungen, die wir zwischen diese geschweiften Klammern einfügen können, aber im Moment lassen wir die Dinge so, wie sie sind.
In der derzeitigen Entwicklungsphase verlangt skrollr von uns, dass wir unsere Markierungen ein wenig abschlachten, indem wir Regeln für unsere Elemente hinzufügen. Alexander Prinzhorn, Hersteller von Skrollr, ist mit einem Projekt beschäftigt, das die Stile vom Markup unterscheidet, aber es ist noch in Arbeit.
Wie auch immer, ich mache es schlimmer als es ist, wir müssen einfach unser Keyframe-Styling zu den Datenattributen der Elemente hinzufügen, auf die wir abzielen. Lassen Sie uns zum Beispiel die Hintergrundbildposition unserer Kopfzeile verschieben, abhängig von der Position der Bildlaufleiste.
Wir fügen unser erstes Keyframe-Styling so hinzu:
Skrollr verwendet Daten- und dann einen Wert, der die Pixelposition der Bildlaufleiste darstellt. Wir fügen dann etwas Stil hinzu, genau wie wir es mit CSS tun würden. Wir haben buchstäblich soeben angegeben, dass die Bildlaufleiste eingeschaltet ist 0px (oben auf der Seite) möchten wir die Hintergrundposition dieses Elements sein 0px 0px.
Wir können dann beliebig viele andere Keyframes hinzufügen. Lassen Sie uns also direkt nach dem ersten ein weiteres Datenattribut hinzufügen.
data-500 = "Hintergrundposition: 0px -250px;"
Das sagt dann; wenn sich die Bildlaufleiste bewegt hat 500px runter, wir wollen das Hintergrundposition sein 0px -250px (dh: 250px aufwärts). Skrollr animiert den Prozess zwischen diesen beiden Keyframes, sodass der Übergang reibungslos verläuft.
Bingo! Unser erster Parallaxeffekt.
Wir haben einen sehr einfachen Parallaxe-Effekt erzielt, der bei jedem Bildlauf des Benutzers ein dynamisches Element hinzufügt. Wir können uns bewerben welche CSS-Regeln wir auch wollen mit skrollr, geben wir unserer Kopfregion ein letztes Gedeih.
Denken Sie an dieses Element, das die Überschrift und den Link enthält?
Wir werden zwei Keyframes hinzufügen. eine für den Anfangszustand (0px) und eine für den, wenn die Bildlaufleiste 180px erreicht.
Diese bestimmen, wie Sie sehen, die Deckkraft, eine weitere bekannte CSS-Eigenschaft. Wenn sich unsere Bildlaufleiste nach unten bewegt, bevor die Kopfzeile die Seite ganz verlassen hat, wird der Inhalt innerhalb dieses div glatt ausgeblendet. Ein einfacher Effekt, der jedoch das Benutzererlebnis dieser Seite auf subtile Weise beeinflusst. Dinge wie diese sollten verantwortungsvoll eingesetzt werden!
13. Zusätzliche Einstellungen
Skrollr wird mit mehreren zusätzlichen Optionen geliefert, je nachdem, wie sicher Sie sich fühlen. Alle diese Einstellungen können mithilfe von Schlüssel-Wert-Paaren an skrollr übergeben werden:
Beispielsweise weist diese Anweisung skrollr an, die Höhe des Dokuments nicht zu erzwingen. Standardmäßig erzwingt Skrollr, dass das Dokument mindestens so hoch ist wie der höchste von Ihnen definierte Keyframe. In unserem Fall wurde unsere am weitesten entfernte Bildlaufleiste mit 500px angegeben, während unsere Seite waaa-aay größer ist. Wir mussten also nicht darüber nachdenken, den Höhenzwang außer Kraft zu setzen.
Möglicherweise möchten Sie auch das sanfte Scrollen entfernen. Testen Sie unseren Parallax-Effekt noch einmal. Sie sehen, wie sich die Hintergrundbildposition beschleunigt und verlangsamt? Dies verhindert ein Ruckeln, aber Sie möchten möglicherweise, dass der Effekt nicht so erscheint. Zu machen Tweening linearer, fügen Sie Folgendes hinzu:
Sie könnten dies auch hinzufügen pro Element indem man sich wieder auf die (sehr eleganten) Datenattribute stützt:
Relativer Modus
Erwähnenswert ist auch der relative Modus, mit dem Keyframes festgelegt werden können relativ zum Element, nicht das Dokument, wie wir es getan haben. Auf diese Weise könnten wir beispielsweise die Höhe, die Ränder usw. unseres Headers ändern, ohne unsere Keyframe-Einstellungen neu bewerten zu müssen.
Die Verwendung des relativen Modus ändert die erforderliche Syntax innerhalb der Datenattribute, auf die ich hier nicht näher eingehen möchte, aber es lohnt sich, einen Blick darauf zu werfen.
Weitere Informationen über die Möglichkeiten von skrollr finden Sie in den Beispielen und der Dokumentation.
14. Mobiler Support
Hier ist etwas, was ich nicht wusste, bis ich die Dokumentation zu skrollr gelesen habe:
Mobile Browser versuchen, Batterie zu sparen, wo immer sie können. Aus diesem Grund verzögern mobile Browser die Ausführung von JavaScript, während Sie scrollen. Insbesondere iOS macht dies sehr aggressiv und stoppt JavaScript vollständig.
Damit Skrollr auch auf mobilen Plattformen funktionieren kann, musste Alexander eine bestimmte zusätzliche Magie bauen, die nach etwas Browser-Schnüffeln eingezogen wird. Wie Sie gesehen haben, verschlechtert sich unser Effekt sehr anmutig, so dass ich mich nicht darüber störe, dass Smartphone-Benutzer etwas Parallax verpassen. Wenn Sie jedoch sicherstellen möchten, dass Ihr Projekt Mobile unterstützt, benötigen Sie ein zusätzliches Element.
- Nachdem Sie das Skript skrollr eingefügt haben, müssen Sie eine kleine Browserüberprüfung durchführen, die wie folgt aussieht:
Sie werden feststellen, dass dies dann fügt
skrollr.mobile.min.jsWenn die Bedingungen erfüllt sind (z. B. ein mobiles Gerät wird verwendet), vergewissern Sie sich, dass der Pfad gemäß Ihrem Projekt korrekt ist. Sie finden dieses zusätzliche Skript im Quelldownload auf GitHub.- Zum Schluss stellen Sie sicher, dass zuerst Element nach der Eröffnung
tag hat .Das ist es! Du musst nicht verstehen Warum das funktioniert, es funktioniert einfach. Wenn Sie mehr über die mobile Unterstützung erfahren möchten, lesen Sie die Dokumentation.
Fazit
Skrollr ist nicht nur eine Parallaxe ... Sache, es macht viel mehr als das, was wir gezeigt haben. Mit etwas Glück konnten Sie nun ein bisschen Razzmatazz (was auch immer das ist) auf Ihren eigenen statischen Webseiten implementieren. Fühlen Sie sich frei, Ihre Fragen in den Kommentaren zu stellen!
Weitere Ressourcen
- skrollr.js auf GitHub
- @Prinzhorn auf Twitter
- Erstellen Sie eine Parallax-Scrolling-Website mit Stellar.js auf Webdesigntuts+
- Fröhliches Scrollen mit skrollr.js
- T'Lipsum Ein Yorkshire Lorem Ipsum Generator für Yorkshire Folks
- fluid_skeleton.css
- CodeKit
- Trent Waltons Gedanken zu Parallax Scrolling im Web
