Heim > Artikel > Web-Frontend > So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundverlaufseffekt auf Webseiten

So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundverlaufseffekt auf Webseiten

WBOYOriginal: 2023-10-25 11:19:431564Durchsuche

So erzielen Sie mit reinem CSS einen sanft scrollenden Hintergrundverlaufseffekt auf einer Webseite

1. Einführung

Im Webdesign kann der Hintergrundverlaufseffekt der Website Schönheit und Dynamik verleihen. Sanfte Scroll-Hintergrundverläufe können Webseiten attraktiver machen und Benutzern ein komfortables Surferlebnis bieten. In diesem Artikel wird erläutert, wie Sie mithilfe von reinem CSS den sanften Bildlauf-Hintergrundverlaufseffekt von Webseiten erzielen, und es werden spezifische Codebeispiele bereitgestellt.

2. Prinzip der Realisierung des Hintergrundverlaufseffekts

Bevor wir den Hintergrundverlaufseffekt beim sanften Scrollen realisieren, verstehen wir zunächst das Prinzip der Realisierung des Hintergrundverlaufs. In CSS kann der Hintergrundgradienteneffekt durch die Funktion linear-gradient() erreicht werden. Diese Funktion akzeptiert eine Startfarbe und eine Endfarbe und füllt den Farbverlauf basierend auf der ausgewählten Richtung und Position.

3. Schritte zum Implementieren eines sanften Bildlauf-Hintergrundverlaufseffekts

Erstellen Sie einen Container mit Bildlaufeffekt.

<div class="container">
  <!-- 网页内容 -->
</div>

.container {
  height: 100vh;
  overflow-y: scroll;
}

Der Container verwendet vh-Einheiten, um die Höhe auf die Höhe des Ansichtsfensters festzulegen, und setzt das Attribut overflow-y auf Scrollen, um einen vertikalen Scrolleffekt zu erzielen.

Hintergrundverlaufseffekt hinzufügen.

.container {
  background: linear-gradient(to bottom, #000000, #ffffff);
}

Stellen Sie im CSS-Stil des Containers den Hintergrund auf einen linearen Farbverlauf mit der Startfarbe Schwarz (#000000) und der Endfarbe Weiß (#ffffff) ein. Die Richtung ist auf „unten“ eingestellt, um einen Farbverlauf von oben nach unten darzustellen.

Scroll-Ereignis-Listener hinzufügen.

Fügen Sie über JavaScript einen Scroll-Ereignis-Listener zum Container hinzu, um die Position des Hintergrundverlaufs während des Scrollens zu aktualisieren.

const container = document.querySelector('.container');

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = (scrollTop / (scrollHeight - windowHeight)) * 100;

  container.style.backgroundPositionY = `${progress}%`;
});

In der Rückruffunktion des Scroll-Ereignisses erhalten wir die Scroll-Position scrollTop des Containers, die Gesamthöhe des Containers scrollHeight und die Höhe des Ansichtsfensters windowHeight und aktualisieren die Position des Hintergrundverlaufs entsprechend dem Scroll-Fortschritt. Durch die Berechnung des Proportionalfortschritts wird der sanfte Bildlaufeffekt der Hintergrundverlaufsposition erreicht. Wenden Sie abschließend die aktualisierte Variable auf den Hintergrundverlauf an, indem Sie die Eigenschaft „backgroundPositionY“ festlegen.

4. Vollständiges Codebeispiel

<!DOCTYPE html>
<html>
<head>
  <title>平滑滚动背景渐变效果</title>
  <style>
    .container {
      height: 100vh;
      overflow-y: scroll;
      background: linear-gradient(to bottom, #000000, #ffffff);
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 网页内容 -->
  </div>

  <script>
    const container = document.querySelector('.container');

    container.addEventListener('scroll', () => {
      const scrollTop = container.scrollTop;
      const scrollHeight = container.scrollHeight;
      const windowHeight = window.innerHeight;
      const progress = (scrollTop / (scrollHeight - windowHeight)) * 100;

      container.style.backgroundPositionY = `${progress}%`;
    });
  </script>
</body>
</html>

Das Obige sind die spezifischen Schritte und Codebeispiele, um den reibungslosen Scroll-Hintergrundverlaufseffekt von Webseiten durch reines CSS zu erzielen. Mit den oben genannten Methoden können Sie Ihrer Website dynamische Hintergrundverlaufseffekte hinzufügen, um das Surferlebnis des Benutzers zu verbessern. Ich hoffe, dieser Artikel kann für Sie hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundverlaufseffekt auf Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css 回调函数事件 overflow

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der CSS-Eigenschaften: FarbeigenschaftenNächster Artikel：Detaillierte Erläuterung der CSS-Eigenschaften: Farbeigenschaften

In Verbindung stehende Artikel

Mehr sehen