Membuat Efek saat Menampilkan List dengan Materialize
Mungkin kita sering menggunakan list di sebuah situs, malah list sendiri menjadi hal yang wajib di halaman sebuah situs, apa lagi situs tersebut membahas atau mengenai sebuah kategori yang benar-benar banyak, biasanya ketika kita membangun sebuah list, tag ul, li, ol sering kita gunakan bukan, emang lebih cocok menggunakan tag itu ketika kita membangun sebuah list, walaupun judulnya membangun efek ketika menampilkan list dengan materialize, kita masih tetap menggunakan sebuah tag ul li, hanya efek ketika di tampilkannya saja yang berbeda. oke efek seperti apa yang di maksud, simak terus ya teman-teman.
Merancang efek ketika menampilkan list dengan materialize, dari judulnya teman-teman telah tau ya, saya mengambil refrensi artikel ini dari mana, ya betul dari materialize, teman-teman dapat lihat ada di alternatif javascript dan transitions, disitu ada, transition berarti efek transisi ketika tampil ya, lumayan simple ketika kita ingin menggunakan efek ini, kita tinggal memberika sebuah class atau id bawaan materialize, seperti bootstrap ya, nantinya class dan ID itu menimbulkan efek dari sebuah class yang kita berikan tadi. ID yang kita gunakan disini yaitu #staggered-test, jadi kasusnya seperti ini: kita membangun event onclick di sebuah tombol button lalu di button itu kita selipkan ID dimana id itu menyambung dengan sebuah list, yaitu UL nya, jadi ketika button kita klik seketika menyambung ke UL nya, dan si sebuah linya saya berikan sedikit style seperti nama efek di materialize yaitu, transition, kita berikan style=”transform: translateX(0px); opacity: 1″. kurang lebih seperti ini ya, oke seketika saja supaya jelas ya teman-teman dapat lihat contoh kodenya di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Merancang Efek ketika Menampilkan List dengan Materialize</title>
<!--Import Google Icon Font-->
<link href=https://fonts.googleapis.com/icon?family=Material+Icons rel=stylesheet>
<!--Import materialize.css-->
<link type=text/css rel=stylesheet href=css/materialize.min.css media=screen,projection/>
<!--Let browser know situs is optimized for mobile-->
<meta name=viewport content=width=device-width, initial-scale=1.0/>
<-e-style type=text/css>
h4{
color: #039BE5;
}
p{
color: #333;
border-bottom: 2px solid red;
width: 300px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class=container>
<div class=row>
<div class=col s12>
<h1>Merancang Efek ketika Menampilkan List dengan Materialize</h1>
</div>
<a href=#! class=btn onclick=Materialize.showStaggeredList('#staggered-test')>Click Me</a>
<ul id=staggered-test>
<li style=transform: translateX(0px); opacity: 1><h4>List Ke satu</h4><p>ini keterangan ke satu</p></li>
<li style=transform: translateX(0px); opacity: 1><h4>List Ke dua</h4><p>ini keterangan ke dua </p></li>
<li style=transform: translateX(0px); opacity: 1><h4>List Ke tiga</h4><p>ini keterangan ke tiga </p></li>
<li style=transform: translateX(0px); opacity: 1><h4>List Ke Empat</h4><p>ini keterangan ke Empat</p></li>
<li style=transform: translateX(0px); opacity: 1><h4>List Ke Lima</h4><p>ini keterangan ke Lima</p></li>
</ul>
</div>
</div>
<!--Import jQuery before materialize.js-->
<-e-script type=text/javascript src=https://code.jquery.com/jquery-3.2.1.min.js></script>
<-e-script type=text/javascript src=js/materialize.min.js></script>
<span style=color: #ff0000> <-e-script type=text/javascript>
var tampilUl = $(ul).hide();
$(.btn).click(function(){
tampilUl.toggle(slow);
})
</script></span>
</body>
</html>
Dapat teman-teman hayati terlebih dahulu ya, dan dapat lihat ada kode JS yang saya warnai merah, itu saya bikin toogle supaya dapat menyembunyikan dan menampikan efek list tersebut ketika di klik.
Dapat di lihat ya, belum tampil apa-apa ketika saya belum mengklik, oke kini ketika saya klik:
Telah tampil ya, list-list yang sebelumnya kita sembunyikan, aslinya list itu ketika tampil menampilkan efek gelombang ketika tampil, tapi karena gambar jadi tak terlihat, oke saya rasa lumayan hingga disini belajar kita Merancang efek ketika menampilkan list dengan materialize, semoga bermanfaat dan hingga jumpa di artikel selanjutnnya terimakasih.
Sumber https://kursuswebsite.org
