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.
Facebook Chat: Emoticons, Tipps & Tricks zur Verbesserung der Konversation
Seit Facebook im Jahr 2008 seine Instant-Messaging-Anwendung auf seiner Website veröffentlicht hat, nutzen viele seiner Nutzer die Chat-Funktion, um mit ihren Facebook-Freunden in Kontakt zu bleiben. Es ist eine einfache Funktion, aber dennoch benutzerfreundlich. Vergleicht man, was es jetzt ist und was es vor drei Jahren war, würden nicht viele sagen, dass es sich viel verändert hat; Es ist immer noch eine kleine Leiste in der unteren rechten Ecke, die sich ausdehnt, damit Sie sehen können, wer online ist, wenn Sie darauf klicken.Das
(Tech- und Design-Tipps)
6 Schritte, um als freier Schriftsteller auf Kurs zu bleiben
Dieser Artikel ist Teil unserer "Guide to Freelancing-Serie" - bestehend aus Ratgebern und Tipps, die Ihnen helfen, sich selbstständig zu machen. Klicken Sie hier, um mehr von dieser Serie zu lesen. Freiberufliches Schreiben ist ein außergewöhnlicher Beruf. Es erfordert Fleiß, Konzentration, Hingabe und eine Verpflichtung für andere, es gut zu machen. Im
(Tech- und Design-Tipps)
de.hideout-lastation.com
Volle Seite