[Tutorial] Cara Membuat Responsive Layout dengan Efek Transition Pure Css

Tutorial untuk kali ini yaitu, tentang cara membuat Responsive Layout dengan Transition yang smooth. Dengan menggunakan navigasi button radio dan kombinasi yang akan memicu transisi ke panel konten masing-masing, dan menciptakan efek tersebut. Dan kita akan membuat tata letak lebar / tinggi 100% responsif dengan beberapa transisi halaman yang smooth. Idenya adalah untuk memiliki beberapa panel konten dan navigasi yang akan memungkinkan kita untuk menavigasi antar panel.

Disini kita akan menggunakan button radio untuk navigasi dan menghidupkan konten ke posisi yang tepat dengan transisi, menciptakan efek "Scrolling Smooth". Gagasan tata letak ini bisa berguna untuk halaman web atau aplikasi web di mana konten harus benar-benar seukuran layar (lebar dan tinggi). Perhatikan bahwa ini tentu saja sangat eksperimental dan hanya merupakan bukti konsep.

Markup

Struktur akan terdiri dari, Container utama dengan class st-container yang akan berisi tombol dan tautan radio, dan Wrapper harus diberi class st-scroll untuk panelnya. Dan setiap panel ini akan memiliki beberapa elemen konten.

<div class="st-container">
   
 <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
 <a href="#st-panel-1">Serendipity</a>
 
 <input type="radio" name="radio-set" id="st-control-2"/>
 <a href="#st-panel-2">Happiness</a>
 
 <input type="radio" name="radio-set" id="st-control-3"/>
 <a href="#st-panel-3">Tranquillity</a>
 
 <input type="radio" name="radio-set" id="st-control-4"/>
 <a href="#st-panel-4">Positivity</a>
 
 <input type="radio" name="radio-set" id="st-control-5"/>
 <a href="#st-panel-5">Passion</a>
 
 <div class="st-scroll">

  <section class="st-panel" id="st-panel-1">
   <div class="st-deco" data-icon="H"></div>
   <h2>Serendipity</h2>
   <p>Banksy adipisicing eiusmod banh mi sed...</p>
  </section>
  
  <section class="st-panel st-color" id="st-panel-2">
   <!-- ... -->
  </section>
  
  <!-- ... st-panel-3, st-panel-4, st-panel-5 -->

 </div><!-- // st-scroll -->
 
</div><!-- // st-container -->

Pada dasarnya, memindahkan Wrapper panel dengan mengubah nilai teratas dan membawa masing-masing panel ke dalam viewport, ini bisa kita lakukan dengan memilih button radio st-scroll, dengan kombinasi dan target panel yang benar di dalamnya. Karena teknik ini, kita perlu menjaga button radio di tingkat yang sama seperti st-scroll di atas tautan (mereka tidak akan terlihat, karena kita akan memberi mereka 0 opacity). Untuk dapat memilih panel yang benar, disini kita akan memberikan ID dan button radio.

Perlu kalian ketahui, tautan ini memiliki nilai href dari ID panel, jadi kita hanya akan menyembunyikan button radio nya dan membuat tautan yang dapat diklik yang akan memungkinkan untuk "beralih" ke panel kanan.

CSS/Style

Sekarang, bagaimana kita membuat tata letak ini menjadi fleksibel dan panelnya sama persis dengan ukuran layar? Caranya adalah dengan membuat sebuah Container utama yang mutlak, dengan lebar dan tinggi 100% saat mengatur Panel dan Wrapper ke posisi yang lebih relatif. Dengan lebar dan tinggi 100% dan membuat setiap panel menjadi sama persis dengan ukuran layar (karena adanya Container utama dan Wrapper panel).

Karena disini kita akan melakukan navigasi konten dengan menghidupkan wrapper panel, jadi kita hanya perlu mengatur body overflow menjadi tersembunyi:

body {
     overflow: hidden;
}

Dan dibawah ini Css untuk Container utama:

.st-container {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}

Setelah itu, letakkan "navigasi" di bagian bawah halaman dengan memberinya posisi tetap (Position:fixed). Perhatikan, jika kita ingin mengatur lebar dan tinggi yang sama untuk input dan tautan. Idenya adalah buat overlay button radio pada elemen tautan sehingga dapat diklik, dan beri nilai 0 opacity agar tidak terlihat. Karena itu penting juga untuk mengatur z-indeks pada button radio.
Seperti contoh Css berikut ini:

.st-container > input,
.st-container > a {
 position: fixed;
 bottom: 0px;
 width: 20%;
 cursor: pointer;
 font-size: 16px;
 height: 34px;
 line-height: 34px;
}

.st-container > input {
 opacity: 0;
 z-index: 1000;
}

.st-container > a {
 z-index: 10;
 font-weight: 700;
 background: #e23a6e;
 color: #fff;
 text-align: center;
 text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

Karena disini kita menggunakan persentase untuk menyebarkan tautan dan input di lebar layar, tapi mungkin ini akan sedikit mengalami masalah pembulatan yang akan membuat beberapa celah muncul. Tapi, untuk menyembunyikannya, gunakan elemen pseudo yang ada di bawah tautan dan input. Karena ini akan memiliki warna latar belakang yang sama seperti elemen tautan:

container:before {
 content: '';
 position: fixed;
 width: 100%;
 height: 34px;
 background: #e23a6e;
 z-index: 9;
 bottom: 0;
}

Contoh Css diatas masih belum diposisikan, artinya masih belum lengkap. Dan untuk memaksimalkannya, lihat berikut:

#st-control-1, #st-control-1 + a {
 left: 0;
}

#st-control-2, #st-control-2 + a {
 left: 20%;
}

#st-control-3, #st-control-3 + a {
 left: 40%;
}

#st-control-4, #st-control-4 + a {
 left: 60%;
}

#st-control-5, #st-control-5 + a {
 left: 80%;
}

Dengan menggunakan prinsip yang sama, kita akan menetapkan status "selected" untuk elemen tautan. Setelah itu, kita akan memberi warna latar belakang elemen tautan:
Css nya seperti berikut:

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
 background: #821134;
}

Jika dirasa sudah, jangan lupa untuk menambahkan little triangel (segitiga kecil) menggunakan pseudo-class: after dan beri warna yang sama:

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
 bottom: 100%;
 border: solid transparent;
 content: '';
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-bottom-color: #821134;
 border-width: 20px;
 left: 50%;
 margin-left: -20px;
}

Dan mari kita lanjutkan untuk menentukan status hover untuk elemen tautan:

.st-container > input:hover + a{
 background: #AD244F;
}

.st-container > input:hover + a:after {
 border-bottom-color: #AD244F;
}

Wrapper untuk panel dan panel akan memiliki posisi relatif dengan memberinya lebar dan tinggi 100%. Panel wrapper juga akan mendapatkan posisi atas dan kiri 0 sementara itu, kita tidak perlu memberi nilai untuk panelnya (karena itu sudah otomatis).

Dan transisi itu akan menganimasikan nilai properti transformasi ke posisi masing-masing:

.st-scroll,
.st-panel {
 position: relative;
 width: 100%;
 height: 100%;
}

.st-scroll {
 top: 0;
 left: 0;
 transition: all 0.6s ease-in-out;
 
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-backface-visibility: hidden;
}

.st-panel{
 background: #fff;
 overflow: hidden;
} 

Selanjutnya, mari kita tentukan posisi wrapper st-scroll untuk setiap button radio yang dicentang. Karena kita tahu bahwa setiap panel memiliki ketinggian 100%, kita tahu posisi yang tepat. Maka dari itu, disini kita akan menggunakan properti transform untuk menerjemahkan wrapper panel dalam dimensi Y (atas dan ke bawah):

#st-control-1:checked ~ .st-scroll {
 transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
 transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
 transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
 transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
 transform: translateY(-400%);
}

Sekarang, mari kita beri style pada elemen konten. Untuk segitiga atas dengan ikon, kita cukup memutar dan menerjemahkan divisi st-deco. Kita akan memposisikannya di tengah atas layar dengan mengatur bagian atas ke 0 dan ke kiri menjadi 50% sambil memberikan margin kiri minus setengah dari lebar itu. Menerjemahkannya -50% akan membuat setengah dari kotak yang muncul sehingga menciptakan sebuah segitiga:

.st-deco{
 width: 200px;
 height: 200px;
 position: absolute;
 top: 0px;
 left: 50%;
 margin-left: -100px;
 background: #fa96b5;
 transform: translateY(-50%) rotate(45deg);
}

Untuk ikon kita akan menggunakan Raphaël Icon-Set via @font-face dan teknik data-atribut / pseudo-class. Konten elemen pseudo: after akan menjadi nilai ikon data yang telah kita tetapkan dalam HTML untuk elemen itu. Perhatikan, bahwa kita perlu memutarnya kembali ke arah yang berlawanan dari elemen induk untuk mengembalikannya ke "normal":

[data-icon]:after {
    content: attr(data-icon);
    font-family: 'RaphaelIcons';
    color: #fff;
 text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 position: absolute;
 width: 200px;
 height: 200px;
 line-height: 200px;
 text-align: center;
 font-size: 90px;
 top: 50%;
 left: 50%;
 margin: -100px 0 0 -100px;
 transform: rotate(-45deg) translateY(25%);
}

Judul akan ditempatkan di tengah layar dengan margin atas negatif untuk "menariknya" sedikit:

.st-panel h2 {
 color: #e23a6e;
 text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 position: absolute;
 font-size: 54px;
 font-weight: 900;
 width: 80%;
 left: 10%;
 text-align: center;
 line-height: 50px;
 margin: -70px 0 0 0;
 padding: 0;
 top: 50%;
 -webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
 animation: moveDown 0.6s ease-in-out 0.2s backwards;
}

@keyframes moveDown{
 0% { 
  transform: translateY(-40px); 
  opacity: 0;
 }
 100% { 
  transform: translateY(0px);  
  opacity: 1;
 }
}

Paragraf akan memiliki gaya seperti berikut:

.st-panel p {
 position: absolute;
 text-align: center;
 font-size: 16px;
 line-height: 22px;
 color: #8b8b8b;
 z-index: 2;
 padding: 0;
 width: 50%;
 left: 25%;
 top: 50%;
 margin: 10px 0 0 0;
 -webkit-backface-visibility: hidden;
}

Sementara tajuk panel akan turun, dan paragraf akan naik:

#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
 animation: moveUp 0.6s ease-in-out 0.2s backwards;
}

@keyframes moveUp{
 0% { 
  transform: translateY(40px); 
  opacity: 0;
 }
 100% { 
  transform: translateY(0px);  
  opacity: 1;
 }
}

Untuk membuat tata letak, kita perlu menambahkan class warna dan "membalikkan" warna untuk panel tersebut dan elemen kontennya:

/* Colored sections */

.st-color,
.st-deco{
 background: #fa96b5;
}
.st-color [data-icon]:after {
 color: #fa96b5;
}
.st-color .st-deco {
 background: #fff;
}
.st-color h2 {
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 
.st-color p {
 color: rgba(255,255,255,0.8);
}

Terakhir, namun tidak kalah pentingnya, kita akan menambahkan beberapa media query untuk mengontrol posisi dan ukuran font elemen untuk layar yang lebih kecil

@media screen and (max-width: 520px) {
 .st-panel h2 {
  font-size: 42px;
 }
 
 .st-panel p {
  width: 90%;
  left: 5%;
  margin-top: 0;
 }
 
 .st-container > a {
  font-size: 13px;
 }
}

@media screen and (max-width: 360px) {
 .st-container > a {
  font-size: 10px;
 }
 
 .st-deco{
  width: 120px;
  height: 120px;
  margin-left: -60px;
 }
 
 [data-icon]:after {
  font-size: 60px;
  transform: rotate(-45deg) translateY(15%);
 }
}

Mungkin untuk browser lama yang tidak mendukung beberapa penyeleksi, dan jika ingin kembali ke "target jump" klasik. Kita bisa melakukannya dengan mengubah beberapa style (simple.css). Secara khusus, disini kita perlu mengatur overflow body nya menjadi "otomatis" dan menyembunyikan input, dengan membuat elemen tautan yang dapat diklik (karena mereka memiliki ID panel masing-masing):

body {
 overflow: auto;
}
.st-container > input{
 display: none;
}

Demikianlah tutorial Cara Membuat Responsive Layout Dengan efek Smooth Transiton Pure Css. Saya harap Anda menikmati tutorial ini dan menginspirasi!

Akhir kata saya ucapkan, terimakasih

Virm Aditya

Berita teknologi informasi terkini

Share this post