Image Slider 3D. Oleh: Anthonius

Transkripsi

1

2 Image Slider 3D Oleh: Anthonius Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung kode dibawah ini: #controls{ text-align:center; #controls span { padding-right:2em; cursor:pointer;... Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung kode dibawah ini: #controls{ text-align:center; #controls span { padding-right:2em; cursor:pointer; #kubuskece { -webkit-perspective: 800; -moz-perspective: 800px; -ms-perspective: 800; perspective: 800; -webkit-perspective-origin: 50% 100px; -moz-perspective-origin: 50% 100px; -ms-perspective-origin: 50% 100px; perspective-origin: 50% 100px; margin:100px auto 20px auto; width:450px; height:400px; #kubuskece #kubusspinner { position: relative; margin: 0 auto; height: 281px; width: 450px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;

3 -webkit-transform-origin: 50% 100px 0; -moz-transform-origin: 50% 100px 0; -ms-transform-origin: 50% 100px 0; transform-origin: 50% 100px 0; -webkit-transition:all 1.0s ease-in-out; -moz-transition:all 1.0s ease-in-out; -ms-transition:all 1.0s ease-in-out; transition:all 1.0s ease-in-out; #kubuskece #Ykubus,#kubusKece #Zkubus { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; #kubuskece.face { position: absolute; height: 281px; width: 450px; padding: 0px; #kubusspinner.one { -webkit-transform: translatez(225px); -moz-transform: translatez(225px); -ms-transform: translatez(225px); transform: translatez(225px); #kubusspinner.two { -webkit-transform: rotatey(90deg) translatez(225px); -moz-transform: rotatey(90deg) translatez(225px); -ms-transform: rotatey(90deg) translatez(225px); transform: rotatey(90deg) translatez(225px); #kubusspinner.three { -webkit-transform: rotatey(180deg) translatez(225px); -moz-transform: rotatey(180deg) translatez(225px); -ms-transform: rotatey(180deg) translatez(225px); transform: rotatey(180deg) translatez(225px); #kubusspinner.four { -webkit-transform: rotatey(-90deg) translatez(225px); -moz-transform: rotatey(-90deg) translatez(225px);

4 -ms-transform: rotatey(-90deg) translatez(225px); transform: rotatey(-90deg) translatez(225px); Setelah itu agan tinggal masukin sedikit javascript berikut ini: <script> $(document).ready(function() { $("#controls").on('click', 'span', function(){ $("#kubusspinner").css("transform","rotatey("+($(this).index() * -90)+"deg)"); $("#controls span").removeclass("selected"); $(this).addclass("selected"); ); $("#transparency").click(function() { $("#kubusspinner img").toggleclass("trans"); $(this).toggleclass("selected"); ); ); </script> Di bagian HTML, agan bisa memilih hingga 4 gambar sesuai keinginan dan sisipkan di kode dibawah ini: <div id="kubuskece"> <div id="kubusspinner"> <div class="face one"> <img src="images/gambar1.jpg" width="450px" height="281px" /> <div class="face two"> <img src="images/gambar2.jpg" width="450px" height="281px" /> <div class="face three"> <img src="images/gambar3.jpg" width="450px" height="281px" /> <div class="face four"> <img src="images/gambar4.jpg" width="450px" height="281px" /> <p id="controls"> <span class="selected"> Gambar 1 </span> <span> Gambar 2 </span> <span> Gambar 3 </span>

5 <span> Gambar 4 </span> </p> Agan juga bisa mengatur transparancy dari gambar-gambar tersebut dengan menambahkan kode dibawah ini ke dalam CSSnya : #transparency { text-align:center;.trans { opacity:0.5; Lalu menambahkan kode ini ke dalam HTML tadi : <p id="transparency">klik untuk melihat transparansi</p> Jangan lupa untuk menaruh gambar-gambar agan di folder "Images" dan yang paling penting jangan lupa memanggil jquery.min.js di bagian head. Sisipkan saja kode ini di bagian head : <script src="js/jquery.min.js"></script> jquery.min.js tersebut harus ditaruh dalam folder "js" ya gan.. biar lebih rapi.. hehe Untuk melihat hasilnya, agan bisa mencoba download contoh yang saya buat dari link yang telah disediakan. Sekian dulu panduan dari saya untuk membuat image slider 3D, nantikan tutorial selanjutnya ya. Tentang Penulis Anthonius