 |
| Tutorial CSS dan JavaScript |
Dalam dunia web programming tetntunya tidak lepas dari 3 bahasa dasar atau essential. Mereka adalah HTML ( Hyper Text Markup Languange ), CSS ( Cascading Style Sheet ) dan juga JS ( JavaScript ).
Sebelum kita memulai Tutorial saya ingin bahas kegunaan 3 Elemen diatas dalam membaut sebuah website. Pertama, HTML berguna sebagai kerangka dokumen atau kerangka dari apa yang akan kita bangun. Kemudian CSS adalah baju atau make up dari kerangka kita. JS adalah kebiasaan atau yang mengatur tingkah laku Model kita.
Buat kalian yang belum tau apa itu CSS silahkan belajar di w3schools.com di situ terdapat banyak sekali Dokumentasi CSS mengenai Animasi dan Overlay , tapi jika anda sudah mengerti apa itu CSS dan sudah mengenal Animation di CSS silahkan liat tutor berikut.....
Sebelum kita memulai Tutorial saya ingin bahas kegunaan 3 Elemen diatas dalam membaut sebuah website. Pertama, HTML berguna sebagai kerangka dokumen atau kerangka dari apa yang akan kita bangun. Kemudian CSS adalah baju atau make up dari kerangka kita. JS adalah kebiasaan atau yang mengatur tingkah laku Model kita.
Buat kalian yang belum tau apa itu CSS silahkan belajar di w3schools.com di situ terdapat banyak sekali Dokumentasi CSS mengenai Animasi dan Overlay , tapi jika anda sudah mengerti apa itu CSS dan sudah mengenal Animation di CSS silahkan liat tutor berikut.....
Cara Membuat Animasi Dengan CSS dan JavaScript
Pertama tama silahkan buka Text Editor yang anda punya baik itu Sublime,Vim, Notepad++ atau Notepad sekalipun . Lalu silahkan tulis struktur kode HTML di bawah ini agar lebih rapih dan teratur serta enak di pandang.
<!DOCTYPE html>
<html>
<head>
<title>Animasi Overlay CSS</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="animasi"></div>
<button onclick="animasicss()">Animate</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Animasi Overlay CSS</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="animasi"></div>
<button onclick="animasicss()">Animate</button>
</body>
</html>
Setelah itu silahkan anda masukan kode ini di bawah ini di antara tag <style type="text/css"> dan </style>
#animasi { width:100px; height:100px; border:1px solid black; border-radius:50%; background:red; position:relative; }
Fungsi kode di atas untuk membuat bentuk pada element "div" yang berada di antara tag <body> , elemen div tersebut tidak mempunyai elemen bawaan sehingga kita harus membuat nya terlebih dahulu dengan kode CSS , penjelasan Fungsi dari Kode CSS Tersebut bisa anda lihat di bawah...
1. width : membuat lebar
2. height : membuat tinggi
3. border : membuat garis pinggir hitam setebal 1 pixel
4. border-radius : membuat pinggiran dari bentuk persegi tersebut menjadi tumpul sampai berbentuk bundar
5. background : untuk mewarnai latar belakang
6. position:relative : agar elemen tersebut bisa bergerak dengan ada nya posisi yang relative atau tergantung kode berikutnya
Jika anda sudah paham kode di atas silahkan lanjut ke bawah untuk menulis kode Animasi CSS nya
@-webkit-keyframes daffa {
0%{ background:red; left:0; top:0; }
25%{ background:lightgreen; left:250px; top:0; }
50% { background:black; left:500px; top:0; }
75% { background:blue; left:600px; top:0; }
100%{ background:lightred; left:750px; top:0; }
}
@keyframes daffa {
0%{ background:red; left:0; top:0; }
25%{ background:lightgreen; left:250px; top:0; }
50% { background:black; left:500px; top:0; }
75% { background:blue; left:600px; top:0; }
100%{ background:lightred; left:750px; top:0; }
}
Bagi yang belum terbiasa dengan animasi di CSS mungkin kode di atas yang saya buat terlalu rumit untuk di pahami dan di buat , berikut saya akan berikan penjelasannya di bawah..
Jika anda melihat fungsi persen pada kode CSS di atas itu untuk membuat pergerakan object tersebut pada 0% kita akan melihat bahwa posisi object tersebut di kiri dan terletak di atas dengan jarak masing masing "0" serta warna background tersebut merah..
Lalu pada 25% terlihat pergerakan object ke arah kanan karena kita sudah memberikan jarak antara object sebesar 250px dan juga object akan berubah warna menjadi Hijau Muda karena di situ saya mengubah background nya menjadi lightgreen.
Kemudian Pada 50% object akan bergerak ke arah kanan lebih maju dari 25% karena sudah di beri jarak dari kiri sebesar 500px dan background pun berubah menjadi hitam.Object tersebut akan terus mengikuti Kode CSS yang sudah saya berikan sebagai pergerakan hingga 100% lalu terulang lagi di titik 0%
Lalu lanjut ke kode JavaScript nya silahkan copas kode di bawah di antara Tag <script type="text/javascript"> dan </script>
function animasicss(){
var x = document.getElementById("animasi");
x.style.WebkitAnimation = "daffa 5s linear alternate infinite";
x.style.Animation = "daffa 5s linear alternate infinite";
}
Fungsi dari Kode JavaScript di atas adalah untuk memberikan perintah kepada Kode CSS yang sudah saya buat tadi untuk menggerakan Object yang sudah di buat tadi "daffa" merupakan nama animasi CSS yang sudah saya buat tadi , 5s adalah waktu untuk bergeraknya animasi dari satu tepat ke tempat lain linear merupakan timing function animasi dan infinite adalah tolak ukur berapa kali animasi tersebut bergerak.
Anda bisa mengubah infinite dengan angka yang anda inginkan , misalnya anda ingin object tersebut hanya bergerak sebanyak 3 kali maka anda dapat menulis kode JavaScript nya seperti ini = "daffa 5s linear alternate 3"; sesuaikan saja dengan kemauan anda berapa kali objek bergerak.
Lalu pada Tag <button onclick="animasicss()"> memberikan aksi jika button di klik maka akan menjalankan animasi CSS Tersebut . Silahkan anda coba. Berikut adalah tampilannya ketika program dijalankan.
#animasi { width:100px; height:100px; border:1px solid black; border-radius:50%; background:red; position:relative; }
Fungsi kode di atas untuk membuat bentuk pada element "div" yang berada di antara tag <body> , elemen div tersebut tidak mempunyai elemen bawaan sehingga kita harus membuat nya terlebih dahulu dengan kode CSS , penjelasan Fungsi dari Kode CSS Tersebut bisa anda lihat di bawah...
1. width : membuat lebar
2. height : membuat tinggi
3. border : membuat garis pinggir hitam setebal 1 pixel
4. border-radius : membuat pinggiran dari bentuk persegi tersebut menjadi tumpul sampai berbentuk bundar
5. background : untuk mewarnai latar belakang
6. position:relative : agar elemen tersebut bisa bergerak dengan ada nya posisi yang relative atau tergantung kode berikutnya
Jika anda sudah paham kode di atas silahkan lanjut ke bawah untuk menulis kode Animasi CSS nya
@-webkit-keyframes daffa {
0%{ background:red; left:0; top:0; }
25%{ background:lightgreen; left:250px; top:0; }
50% { background:black; left:500px; top:0; }
75% { background:blue; left:600px; top:0; }
100%{ background:lightred; left:750px; top:0; }
}
@keyframes daffa {
0%{ background:red; left:0; top:0; }
25%{ background:lightgreen; left:250px; top:0; }
50% { background:black; left:500px; top:0; }
75% { background:blue; left:600px; top:0; }
100%{ background:lightred; left:750px; top:0; }
}
Bagi yang belum terbiasa dengan animasi di CSS mungkin kode di atas yang saya buat terlalu rumit untuk di pahami dan di buat , berikut saya akan berikan penjelasannya di bawah..
Baca Juga: Membuat Tabel Responsif dengan HTML dan CSSKode @-webkit-keyframes daffa Membuat pergerakan Frame pada elemen yang telag di tentukan dan di gabung dengan Standarisasi CSS3 Pada Browser Chrome,Safari,dan IE untuk membuat frame nya dan "daffa" merupakan nama animasi tersebut.
Jika anda melihat fungsi persen pada kode CSS di atas itu untuk membuat pergerakan object tersebut pada 0% kita akan melihat bahwa posisi object tersebut di kiri dan terletak di atas dengan jarak masing masing "0" serta warna background tersebut merah..
Lalu pada 25% terlihat pergerakan object ke arah kanan karena kita sudah memberikan jarak antara object sebesar 250px dan juga object akan berubah warna menjadi Hijau Muda karena di situ saya mengubah background nya menjadi lightgreen.
Kemudian Pada 50% object akan bergerak ke arah kanan lebih maju dari 25% karena sudah di beri jarak dari kiri sebesar 500px dan background pun berubah menjadi hitam.Object tersebut akan terus mengikuti Kode CSS yang sudah saya berikan sebagai pergerakan hingga 100% lalu terulang lagi di titik 0%
Lalu lanjut ke kode JavaScript nya silahkan copas kode di bawah di antara Tag <script type="text/javascript"> dan </script>
function animasicss(){
var x = document.getElementById("animasi");
x.style.WebkitAnimation = "daffa 5s linear alternate infinite";
x.style.Animation = "daffa 5s linear alternate infinite";
}
Fungsi dari Kode JavaScript di atas adalah untuk memberikan perintah kepada Kode CSS yang sudah saya buat tadi untuk menggerakan Object yang sudah di buat tadi "daffa" merupakan nama animasi CSS yang sudah saya buat tadi , 5s adalah waktu untuk bergeraknya animasi dari satu tepat ke tempat lain linear merupakan timing function animasi dan infinite adalah tolak ukur berapa kali animasi tersebut bergerak.
Anda bisa mengubah infinite dengan angka yang anda inginkan , misalnya anda ingin object tersebut hanya bergerak sebanyak 3 kali maka anda dapat menulis kode JavaScript nya seperti ini = "daffa 5s linear alternate 3"; sesuaikan saja dengan kemauan anda berapa kali objek bergerak.
Lalu pada Tag <button onclick="animasicss()"> memberikan aksi jika button di klik maka akan menjalankan animasi CSS Tersebut . Silahkan anda coba. Berikut adalah tampilannya ketika program dijalankan.
 |
| Animasi CSS |
Cara Membuat SideNav Dengan CSS Native dan JavaScript
Jika materi di atas tentang cara membuat animasi dengan CSS maka sekarang kita akan mebuat SideNav dengan JavaScript yang tentunya sangat menarik..Silahkan perhatikan Kode di bawah berikut..
<!DOCTYPE html>
<html>
<head>
<title>SideNav JS</title>
<style type="text/css">
.overlay {
position:fixed;
top:0;
left:0;
z-index:1;
background-color:rgba(0,0,0,0.4);
width:0;
transition:0.5s;
height:100%;
overflow-x:hidden;
}
button {
cursor:pointer;
}
.overlay .closebtn {
position:absolute;
top:5px;
right:12px;
font-size:30px;
color:white;
text-decoration:none;
font-family:"Times New Roman";
}
.overlay-content {
margin-top:60px;
}
.overlay-content a {
font-size:25px;
font-family:"Times New Roman";
color:white;
text-decoration:none;
text-align:center;
display:block;
padding-top:30px;
}
</style>
<script type="text/javascript">
function openNav(){
var x = document.getElementById("overlay");
x.style.width = "20%";
}
function closeNav(){
var d = document.getElementById("overlay");
d.style.width = "0";
}
</script>
</head>
<body>
<div id="overlay" class="overlay">
<a class="closebtn" onclick="closeNav()" href="javascript:void(0)">×</a>
<div class="overlay-content">
<a href="#">Teknologi</a>
<a href="#">Berita</a>
<a href="#">Programming</a>
<a href="#">Robotik</a>
<a href="#">Jobs</a>
</div>
</div>
<button onclick="openNav()">☰</button>
</body>
</html>
<html>
<head>
<title>SideNav JS</title>
<style type="text/css">
.overlay {
position:fixed;
top:0;
left:0;
z-index:1;
background-color:rgba(0,0,0,0.4);
width:0;
transition:0.5s;
height:100%;
overflow-x:hidden;
}
button {
cursor:pointer;
}
.overlay .closebtn {
position:absolute;
top:5px;
right:12px;
font-size:30px;
color:white;
text-decoration:none;
font-family:"Times New Roman";
}
.overlay-content {
margin-top:60px;
}
.overlay-content a {
font-size:25px;
font-family:"Times New Roman";
color:white;
text-decoration:none;
text-align:center;
display:block;
padding-top:30px;
}
</style>
<script type="text/javascript">
function openNav(){
var x = document.getElementById("overlay");
x.style.width = "20%";
}
function closeNav(){
var d = document.getElementById("overlay");
d.style.width = "0";
}
</script>
</head>
<body>
<div id="overlay" class="overlay">
<a class="closebtn" onclick="closeNav()" href="javascript:void(0)">×</a>
<div class="overlay-content">
<a href="#">Teknologi</a>
<a href="#">Berita</a>
<a href="#">Programming</a>
<a href="#">Robotik</a>
<a href="#">Jobs</a>
</div>
</div>
<button onclick="openNav()">☰</button>
</body>
</html>
Seperti kode CSS di atas bentuk Tombol Close kita sesuaikan dengan kode CSS yang sudah di atur di atas tepatnya pada kode ".overlay .closebtn" lalu konten di dalam SideNav tersebut juga sudah saya atur dan saya rapihkan sedemikian rupa agar dapat mengikuti overlay utama.
Baca Juga: 3 Hal Penting Yang Perlu Anda Perhatikan Sebelum Mendesain WebsiteBerikut adalah bagaimana program bekerja saat dijalankan pada browser
 |
| SideNav CSS dan JavaScript |
Penutup
Nah, membuat website sejatinya adalah bagaimana kita menuangkan ide kreatif kita kedalam potongan barisan kode. Jadi latihan seperti diatas menurut saya dapat melatih kreativitas kita serta, kepiawaian kita dalam menuliskan baris code.
Nah cukup sekian Tutorial Membuat SideNav Dan Animasi CSS Dengan JavaScript. Silahan kalian praktekkan tutorial ini agar kalian semakin jago dalam dunia website.
13 komentar
komentarIni tutorial bagus gan, sangat bermanfaat buat ane belajar...
ReplyTrims gan mimin...
Makasih gan tutorialnya... Lengkap. Ada penjelasan tentang kode kodenya sekaligus. Thanks sharingnya gan,.. Langsung nyoba
ReplySama2 gan.. Senang bisa bermanfaat :)
ReplySudah kewajiban kita agar visitor mengerti ilmu kita :) makasih kunjungannya :)
ReplyBoleh juga nih walau sedikit rumit!
ReplyKalo bisa ditambah gambar hasilnya gan, biar tau ntar jadinya kya gmna
Replykeren gan, jadi kaya website
ReplySemangat KK XD !
ReplyKan emang sdh ada gan :P :P
ReplyTinggal make up dikit jadi website sudah gan cheer
ReplyTutorial Keren gan 😎 sangat membantu bagi newbie seperti saya
ReplyTerima kasih sob, jangan lupa kunjungi Otak Keren setiap hari untuk tutorial keren selanjutnya :)
Replyoktober 2020
ReplyKunjungan balik ke blog ku
Visitor baik, selalu tinggalkan jejak.
Silahkan komen yang relevan & tidak berlebihan, tidak berbau SARA & Pornografi, tidak mengandung promosi.
^ _ ^ Happy Blogging !