Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Aplikasi zoom Image ala "blibli.com" atau "alibaba.com " (Toko Online)
Hallo selamat malam gan.. malam ini saya ingin berbagi pengetahuan kepada agan2/teman2 disini, yaitu bagaimana membuat aplikasi atau lebih tepatnya animasi zoom image. Jika agan pernah belanja atau sekedar iseng2 membuka toko online, misal blibli.com atau alibaba.com milik Jac ma ( sang inspirator saya hehehhe ), disana ketika anda ingin melihat lebih detail tentang spesifikasi suatu produk/barang, ada aplikasi yang membantu pengunjung melihat barang lebih detail, salah satunya zoom - image ( dan menggeser-geser gambar tersebut :D ).
Sebelumnya sebenarnya ada sebuah library untuk membuat aplikasi ini, tapi saya tidak tertatik dengan itu, saya selalu berusaha pantang menyerah menggunakan bahasa native atau aslinya. Dan akhir nya saya berhasil dan saya ingin berbagi ilmu kepada agan2 disini. Baik, mari kita mulai.
Pertama2 agan udah harus paham dengan ini: 1. HTML 2. CSS3 3. Javascript
Kedua pahami script berikut :
<!DOCTYPE html>
<html>
<head>
<style>
.kotak {
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="kotak" onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<p>Hover di kotak </p>
<p id="demo"></p>
<script>
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
}
</script>
</body>
</html>
Kode diatas akan menghasilkan sebuah kotak, dan koordinat. Fungsi onmousemove() (bawaan javascript ini) merupakan fungsi dimana ketika mouse atau cursor mengarah/bergerak atau berpindah2 pada element tersebut dalam hal ini "class='kotak'" akan menghasilkan sesuai dengan fungsi yang ditentukan, dalam hal ini menghasilkan koordinat keberadaan cursor(pointer) dalam kotak tersebut. Silahkan dicoba terlebih dahulu. Setelah itu, mari lanjutkan langkah berikut.
1. Tambahkan background-image pada kotak/box tersebut. Saya mengambil gambar dari link.
div {
width: 200px;
height: 100px;
border: 1px solid black;
background-image: url('https://cdn01.vulcanpost.com/wp-uploads/2015/11/jack-ma-this-is-alibabas-most-dangerous- moment.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
2. Kemudian, untuk melakukan zoom dan tambahkan element satu lagi dimana ini akan tersambung dengan elemen (kotak sebelumnya) yang kita nama kotak-jacma heheh... jadi ketika kotak pertama dihover maka kotak-jacma akan membesar sesuai dengan koordinat cursor.
<div class="header_border_ali" id="target_ali">
<div class="" id="target_gambar_ali"></div>
</div>
Dab berikut style yang kita perlukan. Kotak-jacma dalam kondisi display none/dan position fixed.
.header_border_ali{
position: fixed;
top: 20px;
left: 40%;
width: 35%;
height: 350px;
background-color: rgba(216, 226, 214, 0.82)
}
#target_gambar_ali{
width: 100%;
height: 100%;
background-image: url('https://cdn01.vulcanpost.com/wp-uploads/2015/11/jack-ma-this-is-alibabas-most-dangerous-moment.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
}
3. Setelah ituu, kita memakai javascript untuk melakukan aksi pada aplikasi/animasi ini, mari beraksi jangan diam sama heheheh...
<script>
var alibaba_plus = document.getElementById('alibaba_plus');
var target_ali = document.getElementById('target_ali');
var target_gambar_ali = document.getElementById('target_gambar_ali');
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
target_ali.style.display = "block";
target_gambar_ali.style.backgroundSize = "300% 300%";
target_gambar_ali.style.backgroundPositionX= -6*x +"px";
target_gambar_ali.style.backgroundPositionY= -6*y +"px";
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
target_ali.style.display = "none";
}
</script>
Bagi yang udah familiar dengan javascript pasti akan mengerti dengan script diatas.. jika tidak silahkan belajar lagi hehehhe.. yaak ilmu yang paling powerfull yang saya ambil disini adalah kemampuan onmousemove dan penetuan koordinat dengan "clientX" dan "clientY" pada javascript.
Keseluruhan kode :
<!DOCTYPE html>
<html>
<head>
<style>
.kotak {
width: 200px;
height: 100px;
border: 1px solid black;
background-image: url('https://cdn01.vulcanpost.com/wp-uploads/2015/11/jack-ma-this-is-alibabas-most-dangerous-moment.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.header_border_ali{
display: none;
position: fixed;
top: 20px;
left: 40%;
width: 35%;
height: 350px;
background-color: rgba(216, 226, 214, 0.82)
}
#target_gambar_ali{
width: 100%;
height: 100%;
background-image: url('https://cdn01.vulcanpost.com/wp-uploads/2015/11/jack-ma-this-is-alibabas-most-dangerous-moment.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
}
</style>
</head>
<body>
<div class="kotak" onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<div class="header_border_ali" id="target_ali">
<div class="" id="target_gambar_ali"></div>
</div>
<p>Hover di kotak </p>
<p id="demo"></p>
<script>
var alibaba_plus = document.getElementById('alibaba_plus');
var target_ali = document.getElementById('target_ali');
var target_gambar_ali = document.getElementById('target_gambar_ali');
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
target_ali.style.display = "block";
target_gambar_ali.style.backgroundSize = "300% 300%";
target_gambar_ali.style.backgroundPositionX= -6*x +"px";
target_gambar_ali.style.backgroundPositionY= -6*y +"px";
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
target_ali.style.display = "none";
}
</script>
</body>
</html>
Oke saya kira ituu saja, jika ada pertanyaan atau ada kendala silahkan melalui komentar. Dan silahkan berikan cotto dan komentar untuk dukungan tulisan2 saya berikut nya di sekolah koding ini, bagi yang tertarik dibagian Front-End Developper. Salam Kelautann hahahha...
8 Jawaban:
Mantab,, tp saya masih belom akrab ame kode2,,lebih2 ame si js. oh ya,, kalo kita pake itu di web yang pake bootstrap ada yg tabrakan gak ya gan? Maaf kalo nanyanya gak renyah masih newbe bingit dgn kode,, mksih.
ko ga di bales gan dua pertanyaan yang di atas ?
Saya kurang tau gan, dicoba aja dulu.. tapi saya pikir gk bakalan tabrakan, karna prinsip bootstrap itu udah menetap.. class2 dan id2 nya sudah ditentukan, dan bootstrap itu adalah library untuk css, gk mungkin tabrakan dengan js
dilogikan aja lah gan hehehe
tidak akan tabrakan kalau class dan id di librarry bootstrap sudah kita kenali
untuk bisa mahir js ,apa aja tahapanx gan,??? please share ilmux master
Meskipun untuk sekarang saya tdk membutuhkannya. Tetapi mungkin lain waktu. Thx infonya gan :v
