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.
So erstellen Sie ein medienähnliches Floating-Action-Menü
Die Popularität von Floating-Action-Menüs ist auf dem Vormarsch, vor allem seit Medium.com das Feature in Mode gebracht hat. Kurz gesagt, das Floating-Menü erscheint , wenn Sie Text auf einer Webseite auswählen . Das Menü wird in der Nähe der Auswahl angezeigt und zeigt verschiedene Aktionen an, mit denen Sie den ausgewählten Text schnell formatieren, hervorheben oder freigeben können.In dies
(Tech- und Design-Tipps)
13 Alternative Webbrowser für Smartphones
Mit dem Aufkommen von Smartphones und der Verfügbarkeit von High-Speed-Internet wird die Begeisterung für Handy-Anwendungen mit einzigartigen und nützlichen Funktionen verstärkt. In Anbetracht dieser Begeisterung ist eine der wichtigsten Anwendungen für den Zugriff auf Webseiten und Websites der Webbrowser.Wir
(Tech- und Design-Tipps)
de.hideout-lastation.com
Volle Seite