Bagaimana untuk mencapai kesan kecerunan latar belakang tatal lancar pada halaman web melalui CSS tulen-tutorial css-php.cn

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

WBOY

Lepaskan： 2023-10-25 11:19:43

asal

1644 orang telah melayarinya

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

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!