HTML + CSS + JS realisiert den Scroll-Gradienteneffekt der Navigationsleiste

HTML + CSS + JS realisiert den Scroll-Gradienteneffekt der Navigationsleiste

Erster Blick auf die Wirkung:

Bildbeschreibung hier einfügen

erreichen:

1. Definieren Sie die Textbeschriftung der Navigationsleiste:

<div Klasse="Sie">
        <sapn class="logo"> Nordlichter. </sapn>
        <ul Klasse="biao">
        <li><a href="#"><a href="#">Startseite</a></li>
        <li><a href="#">Persönliches Profil</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Nachrichtenbrett</a></li>
        <li><a href="#">Freundeslinks</a></li>
        </ul>
    </div>

2. Der Gesamtstil der Navigationsleiste:

.tou{
             Position: fest;
             oben: 0;
             links: 0;
             Polsterung: 25px 100px;
             Breite: 100 %;
             Anzeige: Flex;
             Inhalt ausrichten: Abstand dazwischen;
             Elemente ausrichten: zentrieren;
            Übergang: 0,5 s;
         }

Übergang
3. Der Stil des Northern Lights-Logos:

 .Logo{
             Position: relativ;
             Schriftgröße: 22px;
             Schriftstärke: 900;
             Buchstabenabstand: 1px;
             Farbe: RGB (28, 36, 148);
         }

letter-spacing: Textabstand (Buchstabenabstand)

4. Positionieren Sie links neben dem Text ein Bild für das Nordlicht-Logo:

.logo::vorher{
            Inhalt: '';
            Position: absolut;
            links: -50px;
            oben: -15px;
            Breite: 50px;
            Höhe: 50px;
            Hintergrundbild: URL (logo.png);
            Hintergrundgröße: 100 %;
         }

5. Einige Stile der Navigationsbeschriftungen auf der rechten Seite werden nicht im Detail beschrieben, schließlich sind die Stile bei jedem anders ~:

.biao{
             Position: relativ;
             Anzeige: Flex;
             Inhalt ausrichten: zentriert;
             Inhalt ausrichten: zentriert;
            Listenstil: keiner;
            
         }
        .biao li{
             Position: relativ;
         }
        .biao a{
             Position: relativ;
             Rand: 0 10px;
             Schriftgröße: 18px;
             Schriftfamilie: „Fangsong“;
             Schriftstärke: fett;
             Farbe: RGB (28, 36, 148);
             Textdekoration: keine;

         }

6. Beim Scrollen auf der Seite werden der Stil der Navigationsleiste und die Polsterung kleiner, die Schriftfarbe ändert sich und eine blaue Hintergrundfarbe wird angezeigt:

 .bian{
            Polsterung: 15px 100px;
            Hintergrundfarbe: rgb(71, 105, 219);
        }
        .bian .logo,.tou.bian a{
            Farbe: RGB (252, 247, 247);
        }

7. Einfaches js, Implementierungsteil:
Der Erste:

window.addEventListener('scrollen',Funktion(){
            Lassen Sie tou = document.querySelector('.tou');
           wenn(window.scrollY>0)
            {
                tou.classList.add("bian");
            }anders{
                tou.classList.remove("bian");
            }
        })

Die zweite Methode: direkt so:

window.addEventListener('scrollen',Funktion(){
            Lassen Sie tou = document.querySelector('.tou');    
            tou.classList.toggle("bian",window.scrollY>0);

        })

erklären:
scrollY-Eigenschaft:
Die schreibgeschützte scrollY-Eigenschaft der Window-Schnittstelle gibt die Anzahl der Pixel zurück, um die das Dokument derzeit vertikal gescrollt wird.

classList -Attribut:
add(class1, class2, …) fügt einem Element einen oder mehrere Klassennamen hinzu. Wenn der angegebene Klassenname bereits existiert, wird er nicht hinzugefügt .
remove(class1, class2, …) Entfernt einen oder mehrere Klassennamen aus einem Element.
toggle(class, true|false) Der erste Parameter ist der Name der Klasse, die entfernt werden soll, wenn sie bereits existiert , und gibt „false“ zurück. Wenn der Klassenname nicht existiert, wird er dem Element hinzugefügt und „true“ zurückgegeben. Der zweite ist ein optionaler Parameter, ein Boolescher Wert , mit dem festgelegt wird , ob das Element gezwungen wird, die Klasse hinzuzufügen oder zu entfernen , unabhängig davon, ob der Klassenname vorhanden ist.

Also:
Die erste Methode zum Schreiben von js besteht darin, die Klasse .biao hinzuzufügen, um einen Farbverlaufseffekt zu erzielen, wenn der Bildlauf > 0 ist, und die Klasse .biao zu entfernen, um zum ursprünglichen Zustand zurückzukehren, wenn der Bildlauf <= 0 ist.
Das zweite ist eine Boolesche Wertbeurteilung. Wenn der Bildlauf > 0 ist, wird die Klasse .biao zwangsweise hinzugefügt, und wenn der Bildlauf <= 0 ist, wird die Klasse .biao entfernt.

Vollständiger Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
            Box-Größe: Rahmenbox;
            
        }
        Körper{
            Höhe: 200vh;
            
        }
        .tou{
             Position: fest;
             oben: 0;
             links: 0;
             Polsterung: 25px 100px;
             Breite: 100 %;
             Anzeige: Flex;
             Inhalt ausrichten: Abstand dazwischen;
             Elemente ausrichten: zentrieren;
            Übergang: 0,5 s;
         }
        .Logo{
             Position: relativ;
             Schriftgröße: 22px;
             Schriftstärke: 900;
             Buchstabenabstand: 1px;
             Farbe: RGB (28, 36, 148);
         }
         .logo::vorher{
            Inhalt: '';
            Position: absolut;
            links: -50px;
            oben: -15px;
            Breite: 50px;
            Höhe: 50px;
            Hintergrundbild: URL (logo.png);
            Hintergrundgröße: 100 %;
         }
         .biao{
             Position: relativ;
             Anzeige: Flex;
             Inhalt ausrichten: zentriert;
             Inhalt ausrichten: zentriert;
            Listenstil: keiner;
            
         }
        .biao li{
             Position: relativ;
         }
        .biao a{
             Position: relativ;
             Rand: 0 10px;
             Schriftgröße: 18px;
             Schriftfamilie: „Fangsong“;
             Schriftstärke: fett;
             Farbe: RGB (28, 36, 148);
             Textdekoration: keine;

         }
          
        .bian{
            Polsterung: 15px 100px;
            Hintergrundfarbe: rgb(71, 105, 219);
        }
        .bian .logo,.tou.bian a{
            Farbe: RGB (252, 247, 247);
        }
       /* Hintergrundbildstil */
        .bjimg {
      Position: fest;
      oben: 0;
      links: 0;
      Breite: 100 %;
      Höhe: 100%;
      Mindestbreite: 1000px;
      Z-Index: -10;
      Zoom: 1;
      Hintergrundfarbe: #fff;
      Hintergrundbild: url(11.jpg) ;
      Hintergrundwiederholung: keine Wiederholung;
      Hintergrundgröße: Abdeckung;
      -webkit-Hintergrundgröße: Abdeckung;
      -o-Hintergrundgröße: Abdeckung;
      Hintergrundposition: Mitte 0;
    }

    </Stil>
</Kopf>
<Text>
    <!-- Hintergrundbild -->
    <div Klasse="bjimg"></div>

   <!-- Navigationsleiste -->
    <div Klasse="Sie">
        <sapn class="logo"> Nordlichter. </sapn>
        <ul Klasse="biao">
        <li><a href="#"><a href="#">Startseite</a></li>
        <li><a href="#">Persönliches Profil</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Nachrichtenbrett</a></li>
        <li><a href="#">Freundeslinks</a></li>
        </ul>
    </div>
    <Skript>
        window.addEventListener('scrollen',Funktion(){
            Lassen Sie tou = document.querySelector('.tou');
            
           
           /* tou.classList.toggle("bian",window.scrollY>0); */
           wenn(window.scrollY>0)
            {
                tou.classList.add("bian");
            }anders{
                tou.classList.remove("bian");
            }
        })
    </Skript>
</body>
</html>

Zusammenfassen:

Dies ist das Ende dieses Artikels darüber, wie Sie mit HTML+CSS+JS den Scroll-Gradient-Effekt der Navigationsleiste erzielen. Weitere verwandte HTML+CSS+JS-Navigationsleisten-Scroll-Gradient-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder stöbern Sie weiter unten in den verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  CSS implementiert die Funktion zum Ausblenden des Suchfelds (Animation in Vorwärts- und Rückwärtssequenz).

>>:  N Möglichkeiten, mit CSS ein zweispaltiges Layout zu erreichen

Artikel empfehlen

Fehlerbehebung bei MySQL-Datenverlust

Inhaltsverzeichnis Vorwort Untersuchung vor Ort G...

jQuery implementiert das Bouncing-Ball-Spiel

In diesem Artikel wird der spezifische Code von j...

Vue+js: Klicken Sie auf den Pfeil, um die Bilder zu wechseln

In diesem Artikelbeispiel wird der spezifische Co...

Verwenden von JavaScript zum Implementieren von Karusselleffekten

In diesem Artikel wird der spezifische Code für J...

Entwicklungshandbuch für Chrome-Plugins (Erweiterungen) (vollständige Demo)

Inhaltsverzeichnis Vorne geschrieben Vorwort Was ...

Detaillierte Erläuterung zweier Möglichkeiten zur Implementierung der Sitzungspersistenz im Nginx-Reverse-Proxy

1. ip_hash: ip_hash verwendet einen Quelladressen...

Centos7.5 installiert die Bereitstellung des binären Pakets mysql5.7.24

1. Umweltvorbereitung: Betriebssystem: CentOS Lin...

Detaillierte grafische Beschreibung des Datenbankinstallationsprozesses der MySQL-Version 5.7.24

MySQL ist das beliebteste relationale Datenbankma...

So stellen Sie mit Node-Red eine Verbindung zur MySQL-Datenbank her

Um Node-red mit der Datenbank (mysql) zu verbinde...

Detaillierte Erläuterung der grundlegenden Verwendung von MySql-Stored-Procedure-Parametern

Verwendung gespeicherter Prozeduren in Parametern...

Zusammenfassung einiger Gründe, warum geplante Crontab-Aufgaben nicht ausgeführt werden

Vorwort Ich hatte kürzlich bei der Arbeit einige ...

Vue implementiert das Bild mit Schaltflächenwechsel

In diesem Artikelbeispiel wird der spezifische Co...

Analyse der Prinzipien und Verwendung von Linux-Hardlinks und Softlinks

Im Linux-System gibt es einen Dateityp namens Lin...

Analyse der Protokolldateien im Tomcat-Protokollverzeichnis (Zusammenfassung)

Bei jedem Start von Tomcat werden die folgenden P...

Umfassende Interpretation der MySQL Master-Slave-Replikation, vom Prinzip bis zur Installation und Konfiguration

Warum brauchen wir Master-Slave-Replikation? 1. I...