Rumah >hujung hadapan web >tutorial css >Bagaimana untuk mencapai kesan kecerunan latar belakang tatal lancar pada halaman web melalui CSS tulen

Bagaimana untuk mencapai kesan kecerunan latar belakang tatal lancar pada halaman web melalui CSS tulen

WBOYasal: 2023-10-25 11:19:431681semak imbas

Bagaimana untuk mencapai kesan kecerunan latar belakang tatal yang lancar bagi halaman web melalui CSS tulen

1 Pengenalan

#🎜. Dalam reka bentuk web , kesan kecerunan latar belakang boleh menambah keindahan dan dinamik pada tapak web. Kecerunan latar belakang tatal yang lancar boleh menjadikan halaman web lebih menarik dan memberikan pengguna pengalaman menyemak imbas yang selesa. Artikel ini akan memperkenalkan cara untuk mencapai kesan kecerunan latar belakang tatal yang lancar bagi halaman web melalui CSS tulen dan memberikan contoh kod khusus.

2. Prinsip pelaksanaan kesan kecerunan latar belakang

Sebelum menyedari kesan kecerunan latar belakang tatal yang lancar, kita terlebih dahulu memahami prinsip pelaksanaan kecerunan latar belakang. Dalam CSS, kesan kecerunan latar belakang boleh dicapai melalui fungsi linear-gradient(). Fungsi ini menerima warna mula dan warna akhir, dan mengisi kecerunan berdasarkan arah dan kedudukan yang dipilih.

3 Langkah untuk mencapai kesan kecerunan latar belakang tatal yang lancar

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

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

Bekas menggunakan unit vh untuk menetapkan ketinggian kepada ketinggian port pandangan dan menetapkan atribut limpahan-y untuk menatal untuk mencapai kesan tatal menegak.

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

Dalam gaya CSS bekas, tetapkan latar belakang kepada kecerunan linear dengan warna permulaan hitam (#000000) dan warna berakhir putih (#ffffff). Arah ditetapkan ke bawah untuk mewakili kecerunan dari atas ke bawah.

Tambahkan pendengar acara tatal pada bekas melalui JavaScript untuk mengemas kini kedudukan kecerunan latar belakang semasa proses menatal.

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}%`;
});

Dalam fungsi panggil balik acara tatal, kita mendapat tatal kedudukan tatalAtas bekas, jumlah ketinggian tatal bekasKetinggian, tingkap ketinggian viewportKetinggian dan kemas kini kedudukan kecerunan latar belakang mengikut kepada kemajuan tatal. Dengan mengira kemajuan perkadaran, kesan tatal lancar kedudukan kecerunan latar belakang dicapai. Akhir sekali, gunakan pembolehubah yang dikemas kini pada kecerunan latar belakang dengan menetapkan sifat backgroundPositionY.

4. Contoh kod lengkap

<!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>

Di atas ialah langkah dan contoh kod khusus untuk mencapai kesan kecerunan latar belakang tatal lancar halaman web melalui CSS tulen. Melalui kaedah di atas, anda boleh menambah kesan kecerunan latar belakang dinamik pada tapak web anda untuk meningkatkan pengalaman menyemak imbas pengguna. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan kecerunan latar belakang tatal lancar pada halaman web melalui CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css 回调函数事件 overflow

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang sifat CSS: sifat warnaArtikel seterusnya：Penjelasan terperinci tentang sifat CSS: sifat warna

Artikel berkaitan

Lihat lagi