Belajar Transform CSS - Studi Kasus Drawer
Cukup banyak metode transform css properti, namun di sini saya akan menggunakan metode transform css translate(), yang mana translate sendiri adalah fungsi yang digunakan untuk memindahkan sebuah element pada HTML. Untuk struktur penulisan translate adalah seperti ini:
translate(x, y)
Dimana parameter pertama yaitu nilai x adalah jarak / posisi perpindahan kesamping (secara horizontal) sedangkan parameter kedua yaitu y adalah nilai jarak / posisi perpindahan tinggi(secara vertikal).
Bagaimana masih belum terbayang?
Mari kita implementasikan kedalam project sederhana agar pemahaman lebih tersampaikan. Jadi pada kali ini saya membuat simple drawer sederhana yang mengimplementasikan transform css, karena drawer maka kita butuh sedikit melakukan manipulasi DOM.
File index.html
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="UTF-8">
5: <meta http-equiv="X-UA-Compatible" content="IE=edge">
6: <meta name="viewport" content="width=device-width, initial-scale=1.0">
7: <title>Majangstories</title>
8: <link rel="stylesheet" href="style.css">
9: </head>
10: <body>
11: <div class="humberger">
12: <a id="menu" class="menu">☰</a>
13: </div>
14: <nav id="drawer" class="nav">
15: <ul class="nav__list">
16: <li class="nav__item"><a href="#">Sitemap</a></li>
17: <li class="nav__item"><a href="#">About</a></li>
18: </ul>
19: </nav>
20: <div class="jumbotron">
21: <div class="jumbotron__container">
22: <h1 class="jumbotron__title">Belajar Transform CSS</h1>
23: <p class="jumbotron__desc">by Naufal Yukafi - 03 Mei 2021</p>
24: </div>
25: </div>
26: <script src="script.js"></script>
27: </body>
28: </html>
File style.css
1: * {
2: box-sizing: border-box;
3: margin: 0;
4: padding: 0;
5: }
6: body,
7: html {
8: margin: 0;
9: padding: 0;
10: width: 100%;
11: height: 100%;
12: }
13: body {
14: font-family: 'Roboto', sans-serif;
15: font-size: 16px;
16: }
17: .nav {
18: width: 100%;
19: margin-left: auto;
20: margin-right: auto;
21: background-color: blueviolet;
22: padding: 20px;
23: }
24: .nav__list {
25: width: 100%;
26: padding: 0;
27: margin: 0;
28: text-align: center;
29: }
30: .nav__item {
31: box-sizing: border-box;
32: display: inline-block;
33: width: 24%;
34: text-align: center;
35: line-height: 24px;
36: text-transform: uppercase;
37: }
38: .nav a {
39: padding: 1.3em;
40: text-decoration: none;
41: color: #fff;
42: }
43: .jumbotron {
44: display: flex;
45: align-items: center;
46: min-height: 380px;
47: width: 100%;
48: text-align: center;
49: background-image: url('./img/Transform.jpg');
50: background-color: green;
51: }
52: .jumbotron__container {
53: margin: 0 auto;
54: max-width: 800px;
55: }
56: .jumbotron__title {
57: color: #fff;
58: font-weight: 500;
59: font-size: 36px;
60: margin: 0 auto;
61: max-width: 800px;
62: }
63: .jumbotron__desc {
64: color: #fff;
65: margin-top: 16px;
66: font-size: 18px;
67: font-weight: 300;
68: }
69: /* media screen */
70: @media screen and (max-width: 499px) {
71: .nav {
72: background-color: #fff;
73: width: 230px;
74: position: absolute;
75: /* This trasform moves the drawer off canvas. */
76: -webkit-transform: translate(-230px, 0);
77: transform: translate(-230px, 0);
78: transition: transform 0.3s ease;
79: }
80: .nav__item a {
81: color: black;
82: }
83: .open {
84: -webkit-transform: translate(0, 0);
85: transform: translate(0, 0);
86: }
87: .nav__item {
88: display: list-item;
89: width: 100%;
90: text-align: left;
91: }
92: .humberger {
93: width: 100%;
94: background-color: blueviolet;
95: color: #fff;
96: padding: 20px;
97: text-align: center;
98: font-size: 40px;
99: }
100: }
101: @media screen and (min-width: 500px) {
102: .menu {
103: display: none;
104: }
105: } File script.js
1: const menuHumberger = document.querySelector('#menu');
2: const drawerNav = document.querySelector('#drawer');
3: menuHumberger.addEventListener('click', event => {
4: drawerNav.classList.toggle('open');
5: });
Silahkan tulis kode program di atas, kemudian perhatikan fokus media screen pada style.css,
.nav {
background-color: #fff;
width: 230px;
position: absolute;
-webkit-transform: translate(-230px, 0);
transform: translate(-230px, 0);
transition: transform 0.3s ease;
}
Terdapat transform yang mana syntax ini fungsinya adalah untuk menyembunyikan dari canvas dengan memberikan nilai fungsi translate(-230px, 0) artinya -230 adalah jarak kesamping sehingga keluar dari canvas.
agar canvas tersebut dapat kembali terlihat ketika button hamburgernya di klik maka bisa mengembalikan nilai translate parameter menjadi 0, sehingga saya membuat class baru namanya adalah open, idenya ketika button di klik maka canvas akan kembali seperti semula.
seperti ini syntax-nya,
.open {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
Dengan simple kode di atas maka sudah bisa mengembalikan posisi semula, sehingga dengan sedikit bumbu javascript dom maka akan menampilkan output seperti ini:
Jadi itulah sedikit penjelasan penggunaan tranform css menggunakan fungsi translate, jika masih ada yang kurang jelas silahkan komentar di bawah ya!
Setengah pusinh setengah enggak lihat kodenya. Tapi banyak pusingnya🙏🤐
BalasHapus