funktioniert auch.
In meiner Demo gibt es ein Fledermaus-Bild in der Fußzeile für einen nicht so gruseligen Effekt, aber Sie können jedes andere Bild wählen, das Sie mögen.
Scrollen Sie weiter, bis Sie die Fußzeile sehen Lorem ipsum dolor sitzen am ...
2. Verstecken Sie die Fußzeile Wenden Sie die Regel z-index:-1 auf die Fußzeile an, um sie hinter allen anderen Elementen auf der Seite zu platzieren.
Farbe sowohl die um die Fußzeile zu überdecken .
body, html {Hintergrundfarbe: #fff; } Fußzeile {Breite: 100%; Höhe: 200px; Position: fixiert; unten: 0; Hintergrundfarbe: # DD5632; Z-Index: -1; } 3. Passen Sie den unteren Rand an Legen Sie den margin-bottom der entspricht der Höhe der Fußzeile (in meinem Beispiel 200px).
Auf diese Weise wird unten genügend Platz für die Fußzeile vorhanden sein, wenn der Benutzer die Seite scrollt.
Körper {Höhe: 1000px; Rand: 0; Rand unten: 200px; } Das ist es. Der Footer-Reveal-Effekt für eine vollständige Webseite ist fertig. Sehen Sie sich die unten stehende Codepen-Demo an.
Einzelne Seitenelemente Diese Technik kann für ein einzelnes HTML-Element (mit einer Fußzeile) verwendet werden, das für einen ordnungsgemäßen Seitenrolleneffekt ausreicht . Die Methode ist ein bisschen hacky, wie es derzeit in Chrome und IE nicht funktioniert, aber es hat einen anständigen Fallback.
1. Erstellen Sie einen langen Artikel Zuerst erstellen wir einen langen Artikel mit einer Fußzeile. Um semantischen Code zu fördern, wählte ich und
Artikel 1 Lorem ipsum dolor sitzen am ...
Unten sehen Sie das grundlegende Styling des Artikels und der Fußzeile.
Artikel {Breite: 500px; Hintergrundfarbe: # FEF9F3; Auffüllen: 20px 40px; } Artikel> Fußzeile {Höhe: 100px; Hintergrundfarbe: # FE0178; } Körper {Schriftfamilie: Kormoran Garamond; } Mein Artikel sieht momentan so aus. Natürlich können Sie auch andere grundlegende Stilregeln verwenden.
2. Machen Sie die Fußzeile klebrig
Die vorherige Fußzeile wurde repariert, diese wird klebrig sein . Wenden Sie die position:sticky Regel auf die Fußzeile an, damit sie sich innerhalb der Grenzen des Artikels bewegt, aber ihre Position auf dem Bildschirm beibehält, während der Benutzer nach oben und unten scrollt.
Artikel> Fußzeile {Höhe: 100px; Hintergrundfarbe: # FE0178; Position: -webkit-klebrig; Position: klebrig; unten: 80px; } Die bottom:80px Regel fixiert die Position der Fußzeile 80px über dem unteren Rand des Artikels .
Sie können den Wert nach Ihrem Geschmack anpassen, da er den Punkt bestimmt, an dem die Fußzeile erscheint oder verschwindet, während der Benutzer nach unten oder oben scrollt.
Geben Sie den gleichen Wert für den unteren Rand des Artikels an , sodass unten genügend Platz vorhanden ist, um die vollständige Fußzeile anzuzeigen.
Artikel {Breite: 500px; Hintergrundfarbe: # FEF9F3; Auffüllen: 20px 40px; Rand unten: 80px; } 3. Fügen Sie einen teilweise transparenten Hintergrund hinzu Jetzt brauchen wir eine Öffnung neben dem Ende des Artikels, durch die wir sehen können, wie der Sticky Footer nach unten und oben scrollt.
Um dies zu erreichen, ersetzen Sie die background-color des Artikels durch ein lineares Farbverlaufs- background-image, das von der Oberseite des Artikels bis zum oberen Rand der Fußzeile mit der Hintergrundfarbe des Artikels und dem restlichen Teil nach unten gefärbt ist wird transparent gemacht .
Artikel {Breite: 500px; Auffüllen: 20px 40px; background-image: linear-gradient (nach unten, # FEF9F3 calc (100% - 120px), transparent 0); Rand unten: 80px; } Die CSS-Funktion calc(100%-120px) berechnet die gesamte Höhe des Artikels minus der Fußzeile . In meinem Beispiel ist es 120px (100px für Höhe & plus; 20px für Padding).
4. Platzieren Sie die Fußzeile zurück
Schließlich platzieren wir die Fußzeile hinter dem Artikel mit der CSS-Regel z-index: -1 .
Artikel> Fußzeile {Höhe: 100px; Hintergrundfarbe: # FE0178; Position: -webkit-klebrig; Position: klebrig; unten: 80px; Z-Index: -1; } Und das ist es, das individuelle Seitenelement mit dem On-Scroll-Reveal-Effekt ist fertig. Schauen Sie sich den Codepen Stift unten an. Sie finden beide Anwendungsfälle auch auf unserer Github-Seite.
20 kostenlose Business Newsletter Vorlagen zum Download
Werbung ist ein wesentlicher Bestandteil jeder Art von Geschäft und E-Mail-Marketing ist eine der besten Möglichkeiten, um direkte Besucherzahlen auf Ihrer Website zu erhalten. Mit einem E-Mail-Newsletter können Sie Ihre neuesten Produkte und Services, neue Blogposts, Verkäufe und andere Updates mit Ihren Abonnenten teilen.Das
(Tech- und Design-Tipps)
5 Smart Road Technologien der Zukunft
Trotz der vielen technologischen Fortschritte bei Fahrzeugen, mobilen Geräten und Autos sehen wir wenig Veränderung auf Asphaltstraßen. Es gibt viele Dinge, die wir auf Straßen tun können, die dazu beitragen können , das Fahrerlebnis zu verbessern und zu verbessern, insbesondere in Bezug auf die Verkehrssicherheit. Es g
(Tech- und Design-Tipps)
de.hideout-lastation.com
Volle Seite