Membuat Slide Model Animasi Accordion Music dengan CSS
Tips Blog
Banyak sekali alat musik di dunia yang menghasilkan suara merdu dan nada indah. Bilamana dimainkan dengan baik dan benar, alat musik akan menghasilkan suara yang dapat menghibur banyak orang. Contohnya saja permainan musik accordion di Prancis yang berfungsi sebagai pengiring dansa.
Dansa tidak akan lengkap tanpa diiringi musik. Selain mengetahui fungsinya, penting juga untuk mengetahui cara memainkan alat musik akordeon atau accordion.
Baca Juga :
Accordion style pada animasi gambar dengan CSS :
Dikutip dari Mengenal Kesenian Nasional 9 : Mamanda (Kalimantan Selatan), Kunanto (2020:37-38), Accordion atau Akordeon adalah alat musik sejenis organ. Akordeon berukuran relatif kecil. Akordeon termasuk dalam jenis alat musik Aerophone.
Alat musik Akordeon dimainkan dengan cara yang begitu unik, yaitu Akordeon digendong dan dipegang dengan kedua tangan. Satu tangan digunakan untuk mengatur alunan suara yang keluar. Sementara satu tangannya lagi difungsikan untuk mengatur nada.
Penjelasan lainnya adalah alat musik Akordeon dimainkan dengan cara tangan kanan memencet tuts yang berwarna hitam dan putih. Sementara itu, tangan kiri mendorong atau menarik pompa udara.
Jenis Alat Musik Berdasarkan Sumber Bunyinya
1. Aerophone
Alat musik aerophone merupakan jenis alat musik yang sumber bunyinya berasal dari hembusan udara yang bergetar yang dihasilkan dari pompaan atau tiupan. Contohnya adalah akordeon, rekorder, suling, tuba, klarinet, dan flute.
2. Idiophone
Idiophone merupakan jenis alat musik yang sumber bunyinya berasal dari batangan kayu atau logam. Ketika alat musik idiophone dipukul, maka akan keluar suara yang merdu. Contohnya adalah angklung, calung, gamelan, dan kulintang.
3. Chordophone
Chordophone adalah jenis alat musik yang sumber bunyinya dari rangkaian senar yang digesek, dipetik, dan ditekan. Contoh alat musiknya adalah harpa, gitar, biola, cello, ukulele, banjo, dan rebab.
Baca Juga :
Fungsi
Secara tradisional, Accordion digunakan untuk pertunjukan musik rakyat dan light classical music. Tetapi pada masa kini, alat ini sudah berbaur dan dimainkan dalam berbagai jenis musik seperti musik pop, rock, classical music bahkan turut dimainkan dalam sebuah iklan televisi modern.Cara Memainkan
Bentuk Alat musik ini relatif kecil, dan dimainkan dengan cara digantungkan di leher. Pemusik memainkan tombol-tombol akord dengan jari-jari tangan kirinya, sedangkan tangan kanannya memainkan melodi lagu yang dibawakan. Adapun cara penggunaannya dengan memakai kedua tangan kita, pada tangan yang satu difungsikan sebagai pengatur alunan suara, sedangkan pada tangan yang kedua digunakan untuk mengatur nada.Pada saat dimainkan, akordeon didorong dan ditarik untuk menggerakkan udara di dalamnya. Pergerakan udara ini disalurkan ke lidah akordeon sehingga menimbulkan bunyi.
Konstruksi
Komponen yang ada dalam sebuah akordeon adalah bagian kotak kayu, bellow, dan palet. Di dalam kotak kayu itu ada sebuah rongga tempat dimana suara akordeon dihasilkan. Sedangkan palet yang berbentuk seperti katup yang mengontrol keluar masuknya udara ke dalam akordeon tersebut. Sedangkan bellow adalah komponen yang dominan yang menciptakan kevakuman dan tekanan udara yang digetarkan sehingga menghasilkan suara.Accordion Animasi Gambar dengan CSS
Sepertinya pembahasan diatas berkutat tentang Musik Accordion, masih ada kaitannya dengan Style Accordion CSS Animasi dengan gambar yang akan kita buat malam ini. Gambar yang nantinya tampil akan menjadi animasi scroll kesamping bila kita hover dengan mouse. Trik yang sudah banyak diterapkan oleh sebagian besar developer website agar tidak memakan tempat. Karena beberapa gambar akan diringkas menjadi animasi Accordion dengan CSS. Untuk itu mari kita praktekkan saja.Mau tahu caranya?
Ini dia dibawah, tutorial tentang membuat menu gambar animasi Accordion :
1. Masuk ke DASHBOARD blogger
2. Pilih TEMA
3. Klik SESUAIKAN : EDIT HTML
4. Cari kode ]]><b:skin/>
5. Tempelkan kode dibawah ini persis diatas kode ]]><b:skin/> tersebut
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
font-family: arial, verdana, tahoma;
}
.accordian {
width: 805px; height: 320px;
overflow: hidden;
margin: 100px auto;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
width: 2000px;
}
.accordian li {
position: relative;
display: block;
width: 160px;
float: left;
border-left: 1px solid #888;
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordian ul:hover li {width: 40px;}
.accordian ul li:hover {width: 640px;}
.accordian li img {
display: block;
}
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0;
width: 640px;
}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
font-size: 16px;
}6. Selanjutnya klik SAVE
7. Masuk TATA LETAK
8. Pilih TAMBAH HTML/JAVASCRIPT
9. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu
<div class="accordian">
<ul>
<li>
<div class="image_title">
<a href="#">KungFu Panda</a>
</div>
<a href="#">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Toy Story 2</a>
</div>
<a href="#">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Wall-E</a>
</div>
<a href="#">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Up</a>
</div>
<a href="#">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
</a>
</li>
<li>
<div class="image_title">
<a href="#">Cars 2</a>
</div>
<a href="#">
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</a>
</li>
</ul>
</div>
10. Save lagi dan Publikasikan.
11. Lihat blog kalian dan sudah muncul itu Slide Mode Accordion-nya.
Di dalam lantunan lagu. Alat musik melodis memiliki nada sehingga memiliki perbedaan dengan alat musik ritmis yang tidak menghasilkan nada dalam bunnyinya.
Ada yang menyatakan bahwa alat musik melodis tidak cocok dimainkan seorang diri. Namun harus dimainkan dengan alat musik lainnya untuk menghasilkan irama musik yang sempurna dan enak di dengar oleh telinga.
Apa hasilnya jika alat musik melodis dimainkan sendiri? Menurut laman informasi yang dapat digambarkan, jika alat musik ini dimainkan akan menghasilkan nada notasi seperti Do, Re, Mi, Fa, So, La, Si, Do.
Pengertian selanjutnya mengenai alat musik melodis adalah alat musik biasanya membunyikan melodi di suatu lagu. Bunyi itu bisa seperti pada lagu anak-anak atau lagu orang dewasa.
Karena sifatnya yang menghasilkan sebuah nada atau irama, maka alat musik melodis memiliki fungsi sebagai pengatur nada sebuah musik atau lagu yang sedang dimainkan.
Sekian dulu teman-teman tutorialnya. Selamat malam. Salam -- Alunan Nada ...
