Bagaimana untuk mencapai kesan menatal dalam css

CSS melaksanakan kesan tatal

Kesan tatal biasanya digunakan untuk pelbagai interaksi, animasi dan navigasi dalam reka bentuk halaman tapak web. Kebanyakan kesan menatal tapak web konvensional boleh dicapai melalui HTML+CSS Artikel ini akan memperkenalkan secara ringkas beberapa daripadanya.

1. Gunakan limpahan dan atribut kedudukan

Atribut limpahan kandungan tag HTML yang dibalut (seperti div) ialah tatal, dan kemudian gunakan atribut kedudukan untuk menentukan kedudukan kawasan kandungan untuk mencapai Kesan tatal. Kodnya adalah seperti berikut:

<div style="width:400px; height:200px; overflow:scroll; position:relative">
   <div style="width:600px; height:600px; position:absolute; top:0; left:0"> <!-- 内容区域 -->
     <!-- 内容部分 -->
   </div>
</div>

2. Gunakan atribut transform

Gunakan translateY atau translateX atribut transform untuk mencapai kesan tatal dan tatal kandungan melalui anjakan. Kodnya adalah seperti berikut:

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   transform: translateY(0);
   transition: transform 0.2s ease-out;
}

Bahagian kod JS adalah seperti berikut:

let content = document.querySelector('.content');
let offsetY = 0; //内容向上偏移的距离
setInterval(() => {
   content.style.transform = `translateY(-${offsetY}px)`;
   offsetY += 1;
}, 50);

3. Menggunakan animasi CSS

Animasi CSS boleh jadikan kesan tatal mudah Dan kesan interaksi yang lancar. Kodnya adalah seperti berikut:

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   animation: scroll 5s linear infinite;
}
 @keyframes scroll {
   0% {
     transform: translateY(0);
   }
   100% {
     transform: translateY(-400px);
   }
}

4. Gunakan pemantauan acara roda

Dengan mendengar acara roda dan mengubah suai nilai scrollTop atau scrollLeft elemen, anda boleh mencapai kesan tatal manual. Kodnya adalah seperti berikut:

<div style="width:400px; height:200px; overflow:scroll">
  <div style="width:600px; height:600px"> <!-- 内容区域 -->
    <!-- 内容部分 -->
  </div>
</div>

Bahagian kod JS adalah seperti berikut:

let content = document.querySelector('.content');
let step = 100; //每次滚动的距离
document.querySelector('.container').addEventListener('wheel', function(event){
   event.preventDefault();
   content.scrollTop += event.deltaY > 0 ? step : -step;
});

Ringkasan

Di atas ialah beberapa cara CSS biasa untuk mencapai kesan tatal . Apabila menggunakannya, ia harus digunakan mengikut keperluan khusus Pilih kaedah yang paling sesuai mengikut keperluan anda. Pelaksanaan menggunakan CSS bukan sahaja dapat memudahkan kod, tetapi juga menjadikan halaman web lebih lancar dan dinamik, dan juga memudahkan pengalaman pengguna, pengurusan komponen dan penyahpepijatan.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan menatal dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!