Teknik CSS

Untuk pengembang web, dalam hal membuat efek gulir paralaks, berbagai teknik tersedia. Salah satu teknik tersebut adalah dengan menggunakanCascaded Styling Sheets(CSS).

CSS menjelaskan bagaimana elemen HTML ditampilkan di layar. Seseorang dapat membuat file CSS dan dapat digunakan untuk situs web lengkap. Lebih mudah menambahkan file CSS daripada menambahkan gaya ke setiap elemen HTML dan mengelolanya di berbagai bagian halaman web.

Note- Beberapa metode yang dibahas di bawah dalam bab ini khusus untuk komputer desktop dan bukan untuk perangkat seluler. Ini akan disebutkan dalam langkah-langkah ketika teknik tertentu tidak cocok untuk perangkat seluler.

Mempertimbangkan pelepasan CSS ke semua gambar tambahan ke dalam model objek dokumen (DOM), terdapat pemanfaatan yang lebih besar dari akselerasi perangkat keras dan efek yang mulus tanpa membebani CPU.

Metode Posisi Mutlak

Metode ini sering digunakan untuk membuat efek paralaks, karena bobotnya relatif ringan dibandingkan dengan opsi lain yang tersedia. Posisi gambar latar belakang dijaga tetap relatif terhadap konten lain di layar. Dalam contoh yang dibahas di bawah ini, Anda akan melihat bagaimana melakukannya menggunakan keajaiban CSS.

Di bagian ini, kita akan membahas dua metode untuk Metode Posisi Absolut -

  • Latar Belakang Tunggal
  • Beberapa Latar Belakang

Metode Latar Belakang Tunggal

Dalam metode ini, kami akan membuat dua file di folder yang sama. Amati langkah-langkah yang diberikan di bawah ini untuk tujuan yang sama -

Step 1

Kita harus membuat dua file di folder yang sama: file pertama dengan markup HTML dan yang kedua dengan kode CSS.

Step 2

Sekarang, mari kita tentukan markup HTML kita. Perhatikan kode yang diberikan di bawah ini -

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   <body>  
      <div class = "BgContainer">  
         <div class = "Parallax">  
            <h1> Welcome! </h1>   
         </div>  
         <div class = "FgContainer">  
            <div class = "MainContent">  
               <p>
                  Here we will go ahead with some content which will really vary 
                  according to the content on your site. I am just typing out this 
                  content as it is sometimes good to engage user than the usual lorem 
                  ipsum text!
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
               </p>  
            </div>  
         </div>  
      </div>  
   </body> 
   
</html>

Step 3

Buka notepad. Salin dan tempel cuplikan kode di atas.

Saat Anda menyimpan file, di bawah Save as type, Pilih All Files. Masukkan nama ke file Anda sesuai kebutuhan, tetapi perlu diikuti dengan ekstensi -.html seperti yang ditunjukkan pada gambar di bawah.

Step 4

Setelah file disimpan, buat file lain di notepad dan tempel kode yang diberikan di bawah ini -

html, body {  
   font-size: 18px;  
   line-height: 28px;  
}  

h1 {  
   letter-spacing: -15px;  
   color: white;  
   text-align: center;  
   font-size: 200px;  
   font-weight: 800;  
   line-height: 200px;
}    

BgContainer {  
   perspective: 1px;  
   transform-style: preserve-3d;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: scroll;  
}  

FgContainer {  
   position: relative;  
   display: block;  
   background-color: white;  
   z-index: 1;  
} 
 
MainContent {  
   max-width: 750px;  
   margin: 0 auto;  
   padding: 75px 0;  
} 
 
p {  
   margin: 75px 0;  
} 
 
.Parallax {  
   display: flex;  
   flex: 1 0 auto;  
   position: relative;  
   z-index: -1;  
   height: 100vh;  
   justify-content: center;  
   align-items: center;  
   transform: translateZ(-1px) scale(2);  
   background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);  
   background-color: rgb(250,228, 216);
}

Seperti yang Anda lihat pada langkah terakhir, saat Anda menyimpan file, di bawah Save as ketik, pilih All Files. Masukkan nama ke file Anda sesuai kebutuhan dan tambahkan ekstensi.css untuk itu.

Analisis Kode

Mari kita pahami bagian mana dari kode yang bertanggung jawab atas efek paralaks. Pekerjaan terpenting untuk paralaks dilakukan dengan menggunakan perspektif dan aturan transformasi. Mengacu padaline 15dalam potongan kode di atas. Perspektif dibuat untuk kitaBgContainerpertama. Ini memulai platform untuk mengubah aturan.

Dalam Parallax wadah mulai dari baris 40, transform aturan di baris 48 mendorong div BgContainer ke latar belakang menggunakan translate (-1px).

Anda dapat mengubah nilai untuk parameter terjemahan dan skala untuk mengubah kedalaman paralaks.

Saat Anda membuka file html, efek paralaks akan terlihat seperti yang ditunjukkan di bawah ini -

Note - Untuk sisa tutorial, diasumsikan bahwa pembaca dapat membuat file HTML dan CSS sesuai dengan struktur folder yang disediakan dalam metode di atas.

Metode Beberapa Latar Belakang

Dalam metode ini, kita akan memiliki gambar berbeda yang muncul saat pengguna menggulir ke bawah halaman. Ada gambar dengan pensil, yang digunakan dalam kombinasi warna berbeda untuk mengilustrasikan efek ini.

Perhatikan kode berikut untuk halaman HTML seperti yang ditunjukkan di bawah ini -

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <h1>Multiple Background Example</h1>  
      <div class = "parallax">  
         <div class = "bg__First">First</div>  
         <div class = "bg__Second">Second</div>  
         <div class = "bg__Third">Third</div>  
         <div class = "bg__Fourth">Fourth</div>  
      </div>  
   </body>
   
</html>

Mirip dengan contoh sebelumnya, kami akan menggunakan styles.cssdisimpan di lokasi yang sama dengan file HTML ini. Kami memiliki tiga div berbeda bernama First, Second, Third dan Fourth.

Kode CSS untuk parallax scrolling diberikan di bawah ini -

body, html {
   height : 100%;  
   font-family : sans-serif;  
}  

.parallax [class*="bg__"] {  
   position : relative;  
   height : 50vh;  
   text-indent : -9999px;  
   background-attachment : fixed;  
   background-position   : top center;  
   background-size       : cover;  
}  
.parallax [class*="bg__"]:nth-child( 2n) {  
   box-shadow : inset 0 0 1em #111;
}  
.parallax .bg__First, .bg__Fourth {  
   height : 100vh;  
}  
.parallax .bg__First {  
   background-image : url("parallax0.png");  
}  
.parallax .bg__Second {  
   background-image : url("parallax1.png");  
}  
.parallax .bg__Third {  
   background-image : url("parallax2.png");    
}  
.parallax .bg__Fourth {  
   background-image : url("parallax1.png");   
}

Di sini, kami membuat efek paralaks dari baris 7, properti penting di sini background-attachment:fixed.

Dengan menggunakan properti ini, gambar pertama dengan pensil warna akan selalu berada di atas. Saat Anda menggulir ke bawah, gambar yang berbeda seperti yang dijelaskan dari baris 28 akan mulai muncul.

Hasilnya, Anda akan bisa melihat efek paralaks seperti yang ditunjukkan pada gif di bawah ini. Gambar berikut adalah tangkapan layar dari contoh yang kami pertimbangkan untuk beberapa latar belakang.

Paralaks CSS Murni

Mari kita gabungkan pengetahuan dari dua metode sebelumnya dan membuat efek Paralaks CSS Murni tingkat lanjut.

Perbedaannya terletak pada cara kami menyusun file image elemen dan z-transformProperti. Penjelasan tentang properti akan diberikan setelah kode CSS.

Buat file HTML dengan kode berikut menggunakan metode biasa dari Notepad.

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <div class = "wrapParallax">  
         <div class = "parallax_one">  
            <img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">  
         </div>  
         <div class = "parallax_two">  
            <h1>Pure CSS Parllax Advanced Level</h1>  
         </div>  
         <div class = "parallax_three">  
            <img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">  
         </div>  
      </div>  
   </body>
   
</html>

Untuk file CSS, kode diberikan di bawah ini -

body, html {  
   padding: 0;  
   margin: 0;  
}  

h1 {  
   color: blue;  
   text-align: center;  
   padding: 20px;  
   text-shadow: 0px 0px 10px #fffff;  
}  

img {  
   width:100vw;  
   height:100vh;  
}  

.wrapParallax {
   perspective: 100px;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: auto;  
}  

.parallax {  
   position: absolute;  
   top: 0;  
   bottom: 0;  
   right: 0;  
   left: 0;  
}  

.parallax_one {  
   transform: translateZ(-100px) scale(2)  
}  

.parallax_two {  
   z-index: 10;  
   transform: translateZ(-200px) scale(3)  
}  

.parallax_three {  
   margin-top: 100vh;  
}

Analisis Kode

Kami telah memperbaiki posisi lapisan pertama di line 26 dengan menggunakan position:absoluteProperti. Posisi tersebut juga diberi kode keras ke 0.

Di parallax_two, yang merupakan lapisan dengan tajuk, telah kami terapkan z-index: 10untuk memberikan efek mengambang ke judul. Lapisanparallax_three dipindahkan ke bawah dengan menyediakan properti margin-top.

Dengan demikian, kami dapat meningkatkan tingkat kerumitan dalam efek Parallax kami.

Amati efeknya seperti yang ditunjukkan pada gambar di bawah ini.