Bagaimana untuk membuat berbilang imej latar belakang dengan paralaks dalam CSS?

Tatal paralaks ialah teknik reka bentuk yang sering digunakan yang menambahkan perasaan pergerakan dan kedalaman pada halaman web. Ini dilakukan dengan menggerakkan elemen halaman individu pada kelajuan yang berbeza untuk mensimulasikan kesan kedalaman pada permukaan rata. Cara yang unik dan imaginatif untuk melaksanakan teknik ini adalah dengan menggunakan berbilang imej latar belakang dalam CSS. Dalam artikel ini, kami akan meneroka cara mencipta kesan paralaks dengan berbilang imej latar belakang dalam CSS, termasuk langkah yang diperlukan untuk menyediakan struktur HTML dan penggayaan CSS. Sama ada anda seorang pemula atau pembangun bahagian hadapan yang berpengalaman, panduan ini akan memberikan anda pengetahuan dan alatan yang anda perlukan untuk mencipta kesan paralaks imej latar belakang berbilang yang menakjubkan.

Tatabahasa

element {
   background-image: url(image-location.jpg);
}

Sifat imej latar belakang

Atribut imej latar belakang dalam CSS digunakan untuk menentukan satu atau lebih imej sebagai latar belakang elemen HTML. Ini membolehkan gabungan satu atau lebih imej sebagai asas untuk elemen. Imej boleh diletakkan di kawasan tertentu elemen, boleh ditetapkan untuk menyalin secara mendatar atau menegak, atau boleh diubah saiz untuk menutup keseluruhan elemen atau hanya sebahagian daripadanya.

element {
   animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

Sifat animasi

Sifat animasi CSS memberikan keupayaan untuk mencipta animasi pada elemen HTML tanpa bantuan JavaScript. Sifat ini membolehkan anda menerangkan urutan bingkai utama semasa pengubahsuaian elemen dalam tempoh masa tertentu. Kerangka kunci ini digunakan untuk mewakili gaya elemen pada titik masa yang berbeza, manakala sifat animasi mengawal cara elemen beralih daripada satu bingkai kunci ke yang lain.

Berikut ialah penerangan ringkas bagi setiap komponen sifat animasi -

• name - Nomenklatur animasi, digunakan untuk merujuknya dalam peraturan @keyframes.

• Tempoh - Tempoh animasi, yang mewakili tempoh masa animasi harus bertahan, dalam saat, dinyatakan menggunakan nilai rentetan masa (cth. "5s").

• Fungsi pemasaan − Trajektori kelajuan animasi boleh dikawal melalui linear, mudah masuk, mudah keluar, mudah masuk dan mudah keluar atau fungsi cubic-bezier tersuai.

• Lewat − Kelewatan sebelum memulakan animasi, diukur dalam saat (cth., "2s").

• Iterasi-count - Bilangan lelaran yang harus dilakukan oleh animasi, atau istilah "infinite" bermaksud animasi harus terus bergelung tanpa had.

• Arah - Trajektori animasi, yang boleh menjadi "biasa" (dalam arah biasa), "terbalik" (dalam arah bertentangan) atau "alternatif" berselang-seli ke hadapan dan ke belakang.

• Mod Isi − Menentukan kaedah untuk memenuhi keadaan bukan operasi animasi Pilihan termasuk "tiada", "ke hadapan", "ke belakang" atau "keduanya".

• Play-state - Menunjukkan sama ada animasi sedang bergerak atau dijeda, masing-masing diwakili oleh nilai "berjalan" atau "berjeda".

  李>

Kaedah

• Untuk menggunakan berbilang imej latar belakang untuk mencipta kesan paralaks dalam CSS, anda harus mengikut satu siri arahan −

• Menyediakan komponen yang mengandungi gambaran persekitaran. Dalam kes semasa, komponen ialah div dengan label bekas paralaks.

• Tentukan ketinggian dan lebar elemen bekas dan tetapkan sifat limpahan kepada tersembunyi. Ini akan memastikan bahawa hanya bahagian imej yang boleh dilihat dipaparkan. Selain itu, sifat kedudukan ditetapkan kepada relatif untuk memastikan kedudukan imej latar belakang adalah relatif kepada bekas.

• Buat elemen berasingan untuk setiap imej latar belakang dan tetapkan kedudukannya kepada kedudukan mutlak. Ini membolehkan setiap imej diletakkan dengan tepat dalam elemen bekas. Tinggi dan lebar setiap elemen ditetapkan kepada 100% supaya ia memenuhi keseluruhan bekas.

• Tetapkan imej latar belakang untuk setiap elemen dengan menggunakan atribut imej latar belakang. Pastikan anda menyediakan laluan fail yang tepat untuk setiap imej individu.

• Buat animasi untuk setiap elemen untuk menggerakkan imej latar belakang di sepanjang paksi X. Ini dilakukan menggunakan sifat animasi bersama dengan peraturan @keyframes. Sifat TranslateX digunakan untuk memindahkan elemen dan nilai yang anda tetapkan untuk sifat ini menentukan sejauh mana elemen bergerak secara mendatar.

• Untuk mengekalkan pengalaman animasi yang lancar dan berterusan, atribut fungsi pemasaan animasi diberikan nilai linear, yang menunjukkan bahawa animasi mengekalkan kemajuan yang konsisten sepanjang keseluruhan proses. Di samping itu, atribut kiraan lelaran-animasi dikonfigurasikan kepada nilai tak terhingga, menunjukkan bahawa animasi berulang tanpa had tanpa had yang telah ditetapkan pada bilangan gelung.

Contoh

diterjemahkan sebagai:

Contoh

Berikut ialah kod lengkap yang akan kita lihat dalam contoh ini -

<!DOCTYPE html>
<html>
<head>
   <title>How to create multiple background image parallax in CSS?</title>
   <style>
      .parallax-container {
         height: 200px;
         width: 100%;
         overflow: hidden;
         position: relative;
      }
      .layer-1,
      .layer-2,
      .layer-3 {
         background-position: center;
         background-size: cover;
         position: absolute;
         height: 200px;
         width: 100%;
      }
      .layer-1 {
         background-image: linear-gradient(red,orange);
         animation: move-layer-1 15s linear infinite;
      }
      .layer-2 {
         background-image: linear-gradient(blue,lightblue);
         animation: move-layer-2 20s linear infinite;
      }
      .layer-3 {
         background-image: linear-gradient(green,lightgreen);
         animation: move-layer-3 25s linear infinite;
      }
      @keyframes move-layer-1 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-30%);
         }
      }
      @keyframes move-layer-2 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-60%);
         }
      }
      @keyframes move-layer-3 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-90%);
         }
      }
   </style>
</head>
<body>
   <h4 id="How-to-create-multiple-background-image-parallax-in-CSS">How to create multiple background image parallax in CSS?</h4>
   <div class="parallax-container">
      <div class="layer-1"></div>
      <div class="layer-2"></div>
      <div class="layer-3"></div>
   </div>
</body>
</html>

Kesimpulan

Ringkasnya, menjana kesan paralaks imej latar belakang berbilang lapisan dalam CSS ialah teknik yang mudah namun berkuasa untuk memperkenalkan dimensi dan animasi ke tapak web anda. Dengan mengikut arahan yang diterangkan dalam arahan ini, anda boleh memberikan khalayak anda pengalaman visual yang menarik dan akan diingati untuk masa yang lama. Sama ada kehendak reka bentuk anda adalah asas atau kompleks, fleksibiliti CSS membolehkan anda menyesuaikan reka bentuk anda untuk memenuhi prasyarat unik anda. Jadi mengapa tidak memulakan perjalanan ini untuk meneroka potensi reka bentuk dan mencapai hasil yang luar biasa!

Atas ialah kandungan terperinci Bagaimana untuk membuat berbilang imej latar belakang dengan paralaks dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!