Share
In diesem Tutorial, dem zweiten Teil einer zweiteiligen Serie, nehmen wir die fantastische vektorbasierte Illustration, die in Yulia Sokolovas „Wie man einen langen Hintergrund für eine Website erstellt“ erstellt hat, in eine Live-Site.
Wir werden die Dinge so zusammenstellen, dass, wenn Sie vom oberen Rand der Seite nach unten scrollen, ein "Alien Lander" erscheint, der seinen Weg zum Aufsetzen sucht. Am Anfang sehen wir ein UFO im Weltraum schweben.
Wenn wir nach unten scrollen, erreicht das UFO die Atmosphäre und wird zu einem "außerirdischen Kometen"..
Und schließlich, wenn es durch die Baumgrenze geht, wird es zu einem „kleinen grünen Mann“, der auf dem Boden landet.
Sehen Sie sich die Live-Demo an!
In diesem Projekt verwenden wir SVG-Bilder, damit wir deren flüssige Neuskalierung und ihre geringe Dateigröße nutzen können.
Bevor wir mit dem Programmieren beginnen, benötigen Sie das in Teil 1 dieser Tutorial-Serie erstellte Image, das in vier SVG-Dateien unterteilt ist:
Sie können diese SVG-Bilder selbst aus Ihrer bevorzugten Grafik-App exportieren, wenn Sie möchten, oder Sie finden alle vier Bilder in den Quelldateien von GitHub für die Verwendung bereit.
Erstellen Sie einen neuen Ordner für Ihr Projekt und erstellen Sie darin einen Unterordner mit dem Namen "css" und einen weiteren mit dem Namen "images"..
Kopieren Sie Ihre vier SVG-Bilder und fügen Sie sie in den neuen Ordner "images" ein.
Erstellen Sie im Ordner "css" eine Datei mit dem Namen "style.css"..
Erstellen Sie im Hauptordner eine neue Datei mit dem Namen "index.html"..
Ihre Ordnerstruktur sollte jetzt so aussehen:
Fügen Sie in der Datei "index.html" den folgenden grundlegenden HTML-Code hinzu, um das Wesentliche in das Stylesheet zu laden und das Stylesheet zu laden:
Alien Lander scrollen
Es mag kontrapunktisch erscheinen, aber wir werden unser Hintergrundbild tatsächlich mit einem hinzufügen img Element und nicht als CSS-Hintergrundbild. Wir machen das, weil:
Nun, da Sie wissen, warum wir diesen Ansatz verfolgen, beginnen wir mit der Codierung!
Fügen Sie in Ihrer "index.html" -Datei diesen Code hinzu:
Wenn Sie jetzt eine Vorschau Ihrer Datei in einem Browser anzeigen, sollte das Bild das Ansichtsfenster ausfüllen. Es gibt jedoch immer noch etwas weißen Raum um die Kanten.
Dies liegt daran, dass Browser einen kleinen Rand in der Karosserie Element standardmäßig Um dies zu überschreiben, fügen Sie in der Datei "style.css" dieses CSS hinzu:
body margin: 0;
Es gibt auch einen anderen Browser-Standard, den wir überschreiben müssen, den des Anzeige Eigenschaft für Bilder, die auf festgelegt werden in der Reihe. Wenn Sie zum unteren Rand Ihrer Seite scrollen, sehen Sie, dass sich aufgrund dieses Standardwerts derzeit ein kleines weißes Feld unter dem Bild befindet. Ändern Sie es, indem Sie Folgendes hinzufügen:
img display: block;
Jetzt sollte das Bild "background.svg" das Fenster bündig mit den Kanten füllen. Wenn Sie die Breite des Fensters ändern, wird das SVG-Bild selbst neu skaliert, um es an die neue Größe anzupassen. Die Höhe des Site-Layouts ändert sich ebenfalls, um das korrekte Seitenverhältnis für das Hintergrundbild „background.svg“ beizubehalten.
Damit sich das soeben platzierte Bild als Hintergrundbild verhält, benötigen wir eine Möglichkeit, den Rest unseres Inhalts über den Vordergrund zu legen. Wir können dies durch Hinzufügen von a erreichen div Element, das als Container fungiert und sein Element ändert Position und z-index Eigenschaften.
Fügen Sie in Ihre Datei "index.html" nach dem gerade hinzugefügten Bild dieses neue div ein:
Und in "style.css" fügen Sie dieses CSS hinzu:
.Vordergrund Position: absolut; oben: 0; links: 0; Höhe: 100%; Breite: 100%; z-Index: 1;
Lassen Sie uns durchgehen, was wir mit dem obigen Code tun.
Zuerst durch Einstellung Position zu absolut Wir nehmen das Element aus dem regulären Dokumentenfluss heraus (wodurch es sonst unter dem Hintergrundbild platziert würde), sodass wir es an einem beliebigen Ort platzieren können.
Dann setzen wir die oben und links Eigenschaften zu 0 Dadurch wird das Element an den oberen Rand des Fensters verschoben und horizontal an unserem Hintergrundbild ausgerichtet.
Danach geben wir das Element ein Höhe und Breite von 100%. Dadurch wird sichergestellt, dass das Element nicht zusammenbricht und jeglichen Inhalt darin ausgeblendet wird.
Zum Schluss setzen wir die z-index zu 1 Dadurch wird das Element nach vorne gerückt, sodass es vor unserem Hintergrundbild (das standardmäßig eingestellt ist) sitzt z-index von auto). Dadurch wird verhindert, dass der Inhalt des Elements durch das Hintergrundbild verdeckt wird.
In unseren Vordergrund-Container können jetzt Inhalte eingefügt werden.
Wir wollen, dass unser UFO unten auf dem Boden „landet“, indem wir drei Panels erstellen, eines für jede Landestufe. Wir fügen dann das entsprechende SVG-Bild für jedes Feld, z. B. die Datei "ufo.svg", als Hintergrundbild mit fester Position hinzu. Das Bild bleibt dann während des Bildlaufs in Position, während sich der Hintergrund dahinter bewegt, wodurch die Illusion des Abstiegs erzeugt wird.
In deinem "Vordergrund" div, füge dieses neue hinzu div:
Fügen Sie nun folgenden Code zu Ihrem CSS hinzu:
.ufo_section height: 100%; Hintergrund: URL (… /images/ufo.svg); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: 40% Auto; Hintergrundaufsatz: feststehend;
In der ersten Zeile unseres obigen Codes geben wir das Element a an Höhe von 100% um sicherzustellen, dass der Inhalt sichtbar ist. Dann fügen wir unser Bild "ufo.svg" als Hintergrund hinzu. Wir setzen ein Hintergrund Wiederholung zu keine Wiederholung Wir möchten, dass nur ein UFO erscheint und wir machen dann Hintergrundposition platzieren Sie das Bild horizontal und vertikal in der Mitte.
Mit unserer Hintergrundgröße Bei dieser Eigenschaft legen wir die Breite als prozentualen Wert fest und ermöglichen die automatische Berechnung der Höhe. Diese Breite wird aus dem ursprünglichen Vektorbild gezeichnet, in dem die Breite des UFO ungefähr 40% der Breite der Gesamtdarstellung beträgt.
Durch die Einstellung der Breite unseres Bildes "ufo.svg" als Prozentsatz, wenn das Fenster die Größe ändert und das Bild "background.svg" sich mit ändert, passt das UFO-Bild auch seine Breite an, um die beabsichtigten Proportionen beizubehalten.
In der letzten Zeile setzen wir Hintergrundanhang zu Fest, Das bedeutet, dass das Bild beim Scrollen fixiert bleibt, was uns die Illusion des Abstiegs gibt.
Aktualisieren Sie Ihre Seite und scrollen Sie jetzt - Sie sollten das UFO in vertikaler Richtung zwischen den Planeten sehen.
Wenn Sie auf Ihrer Website nach unten scrollen, werden Sie feststellen, dass das UFO verschwindet, wenn Sie weit genug nach unten gehen. Dies geschieht, weil wir über die Höhe von rollen ufo_section Panel, so können wir zu diesem Zeitpunkt den Hintergrund nicht mehr sehen.
Wir werden drei solcher Panels übereinander stapeln, so dass der Hintergrund des folgenden Panels verschwindet, wenn wir an einem vorbei scrollen und sein Hintergrund verschwindet erscheint, So entsteht der Effekt, dass ein Bild durch das nächste ersetzt wird.
Wir wiederholen also den oben beschriebenen Vorgang, um die Images „alien_comet.svg“ und „alien_landing.svg“ einzufügen.
Fügen Sie Ihrem HTML-Code das Folgende direkt nach Ihrem hinzu ufo_section div und noch in deinem Vordergrund div:
Dann fügen Sie Ihrem CSS diese neuen Klassen hinzu:
.comet_section height: 100%; Hintergrund: URL (… /images/alien_comet.svg); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: 15% Auto; Hintergrundaufsatz: feststehend; .landing_section height: 100%; Hintergrund: URL (… /images/alien_landing.svg); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: 15% Auto; Hintergrundaufsatz: feststehend; Position: relativ;
Wir verwenden hier den gleichen Code und die gleichen Techniken, wobei nur die Namen der Bilddateien geändert wurden und die Breite auf der Hintergrundgröße Eigenschaft auf festgelegt fünfzehn% passend zu den schmaleren Bildern, die wir gerade hinzugefügt haben.
Ihre "style.css" -Datei ist nun fertig und sollte den folgenden Code enthalten:
body margin: 0; img display: block; .foreground position: absolut; oben: 0; links: 0; Höhe: 100%; Breite: 100%; z-Index: 1; .ufo_section height: 100%; Hintergrund: URL (… /images/ufo.svg); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: 40% Auto; Hintergrundaufsatz: feststehend; .comet_section height: 100%; Hintergrund: URL (… /images/alien_comet.svg); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: 15% Auto; Hintergrundaufsatz: feststehend; .landing_section height: 100%; Hintergrund: URL (… /images/alien_landing.svg); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: 15% Auto; Hintergrundaufsatz: feststehend; Position: relativ;
Gehen Sie jetzt zurück zu Ihrer Website, scrollen Sie nach unten und Sie sollten sehen, wie das UFO in den Kometen verwandelt wird, und etwas weiter unten in den "kleinen grünen Mann"..
Im Moment werden Sie feststellen, dass wir beim Scrollen einige Probleme lösen müssen.
Da das Bild „background.svg“ keine feste Größe hat, wissen wir nicht genau die Pixelhöhe, die jedes Panel vor dem Laden haben sollte. Wir können jedoch im Vorfeld entscheiden, wie hoch die Höhe jedes Paneels als Prozentsatz der Höhe von „background.svg“ sein sollte..
Mit jQuery können wir diesen Prozess implementieren:
Wenn wir gerade dabei sind, fügen wir ein paar zusätzliche leere divs hinzu, um als Abstandhalter zwischen den einzelnen Bereichen zu fungieren und ihre Höhe auch mit jQuery festzulegen. Durch Hinzufügen von Leerzeichen zwischen den Bedienfeldern wird ein reibungsloser Übergang erzielt, wodurch das Problem gelöst wird, dass das Bild „alien_comet.svg“ angezeigt wird, bevor das Bild „ufo.svg“ verschwunden ist.
Aktualisieren Sie Ihren HTML-Code, so dass zwischen jedem vorhandenen div ein Spacer-Div steht, z.
Laden Sie im Kopfbereich in jQuery, indem Sie Folgendes hinzufügen:
Vor dem Schluss
Accentsconagua
Wir möchten, dass diese Funktion ausgelöst wird, wenn die Seite zum ersten Mal geladen wird, und wenn die Größe geändert wird. Fügen Sie daher nach dem Öffnen den folgenden Code hinzu Skript Etikett:
$ (document) .ready (function () set_section_heights ();); $ (window) .resize (function () set_section_heights (););
In der set_section_heights () Funktion. Als erstes müssen wir herausfinden, wie hoch unser Hintergrundbild derzeit ist, und es als Variable speichern. Fügen Sie dazu diesen Code hinzu:
var doc_height = $ (". background"). height ();Mit dem ersten Teil des Codes, $ (". Hintergrund"), jQuery findet das Element mit dem Klassennamen Hintergrund. Der angehängte .Höhe() Die Funktion erhält dann die Pixelhöhe dieses Elements als Ganzzahl. Dies zeigt uns, wie hoch unser Image „background.svg“ ist und speichert diese Zahl in der Variablen doc_height.
Jetzt richten wir ein Objekt ein, in dem wir definieren können:
Wir durchlaufen dieses Objekt und verwenden die darin enthaltenen Werte, um die Größe der Abschnitte in unserem Vordergrund zu ändern.
Beginnen wir mit einem einzigen Eintrag im Objekt:
var section_heights = "ufo_section": 0,25
Hier haben wir den Index (den Wert links) auf gesetzt ufo_section um den Klassennamen unseres ersten Abschnitts zu finden.
Dann haben wir den Wert auf gesetzt 0,25 Das ist eine andere Möglichkeit, 25% auszudrücken. In Kürze werden wir diesen Wert mit der im Feld gespeicherten Zahl multiplizieren doc_height die Höhe des Hintergrundbildes. Damit sagen wir, wir wollen das ufo_section Panel soll 25% der aktuellen Höhe von "background.svg" sein.
Zum Beispiel, wenn die Höhe von "background.svg" war 1000px die höhe der ufo_section würde als herauskommen 250px:
1000 * 0,25 = 250
Nachdem wir nun durchgesehen haben, wie dieses Objekt funktionieren wird, fügen wir einige Einträge für die anderen Elemente hinzu, für die wir Höhen festlegen möchten. Aktualisieren Sie Ihr Objekt wie folgt:
var section_heights = "ufo_section": 0,25, "spacer_one": 0,03, "comet_section": 0,36, "spacer_two": 0,06, "landing_section": 0,298
Hinweis: Ich habe diese Werte auf Basis von Versuch und Irrtum ausgewählt. Fühlen Sie sich also nach Beendigung dieses Tutorials mit den Zahlen herum, um die Auswirkungen zu sehen.
section_heights ObjektWenn unser Objekt vollständig ist, können wir es durchlaufen und die Größe der Panels ändern.
Zuerst brauchen wir eine $ .each () Funktion zum Durchlaufen der section_heights object und extrahieren Sie den Index und den Wert (jeweils den Namen und die Höhe der Klasse) aus jedem darin enthaltenen Eintrag.
Fügen Sie diesen Code nach Ihrem ein section_heights Objekt:
$ .each (section_heights, function (index, value) console.log ("Index:" + index, "| Value:" + value););Damit Sie sehen können, wie die obige Iterationsfunktion den ausgibt Index und Wert Variablen verwenden wir console.log () für jeden Eintrag in der Konsole eine kleine Nachricht an die Konsole zu schreiben section_heights Objekt.
Laden Sie Ihre Site neu, öffnen Sie die Chrome Web Developer Tools (oder eine entsprechende Version in Ihrem bevorzugten Browser) und sehen Sie sich die Konsole an. Sie sollten das sehen:
Links von jeder Nachricht nach Index: du kannst das ... sehen Index für jeden Eintrag, d. h. die Klassennamen der Elemente, deren Größe geändert werden soll.
Rechts von jeder Nachricht nach Wert: du kannst das ... sehen Wert für jeden Eintrag, d. h. der Bruchteil der Gesamthöhe, die jedes Paneel haben sollte.
Anstatt diese Daten nur auf der Konsole zu protokollieren, verwenden wir sie, um die Größe unserer Vordergrundabschnitte festzulegen. Löschen Sie die console.log () zeile und ersetze es mit diesem:
$ ("." + index) .height (Math.floor (Wert * doc_height));Brechen wir auf, was diese Linie macht.
Zuerst haben wir $ ("." + Index). Wir verwenden dies, um das Element zu finden, dessen Größe geändert werden soll. Zum Beispiel beim ersten Eintrag in unserem Objekt die Index ist auf ufo_section gesetzt. In diesem Fall wird der erste Teil unseres Codes ausgewertet $. (".ufo_section"). Mit diesem Code wird jQuery aufgefordert, die Seite mit der Klasse nach dem Element zu durchsuchen ufo_section.
Als nächstes fügen wir hinzu .Höhe (…). Mit diesem Code legt jQuery die Höhe des gefundenen Elements fest und ändert es in den Wert, der zwischen den Klammern übergeben wird.
Zwischen den Klammern sehen Sie value * doc_height. Hier führen wir die zuvor erwähnte Multiplikation durch, um die beabsichtigte Plattenhöhe zu berechnen. Zum Beispiel hat der erste Eintrag unseres Objekts den Wert 0,25. Diese Nummer wird mit der im Feld gespeicherten Zahl multipliziert doc_height Variable.
Um die Multiplikation dieser beiden Variablen werden Sie sehen Math.floor (). Dies rundet das Ergebnis unserer Multiplikation auf die nächste ganze Zahl.
Also alles zusammen, wenn der Wert von doc_height ist 5197, Der erste Eintrag in unserem Objekt würde das mit multiplizieren 0,25 gib uns ein Ergebnis von 1299.25.
Math.floor () rundet diesen Betrag auf 1299. Dies bedeutet, dass unser Code jetzt ausgewertet wird: $. (".ufo_section") .height (1299);
Mit dieser Zeile findet jQuery das Element mit der Klasse ufo_section und stellen Sie die Höhe auf 1299px.
Das bringt Ihre HTML und JavaScript zusammen. Ihre ausgefüllte "index.html" -Datei sollte nun folgenden Code enthalten:
Alien Lander scrollen 