Hi Web Developer! kembali lagi bersama dengan guru design. Kali ini guru design akan berbagi tutorial cara membuat efek klik pada blog atau website dengan HTML,CSS dan JavaScript. Kamu pasti pernah mengunjungi website atau blog orang lain dan saat di klik keluar efek seperti efek love, efek lingkaran dll? pada kesempatan kali ini guru design akan membuat tutorial nya. Untuk mastah dan suhu silahkan di koreksi kalau saja ada yang salah, tapi saya rasa tidak ada hehe, buat para pemburu koding silahkan disimak dan dipraktikan di komputer-nya masing-masing. Ok lanjut ketutorialnya.
Memberi efek love saat di klik
Caranya sangat simpel dan mudah, tinggal copy dan pastekan kode JavaScript berikut kedalam template blog kalian masing-masing.
- Caranya pilih Menu Tema > Edit HTML > Paste diatas body penutup </body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'>
</script><script type="text/javascript">
//<![CDATA[
!function(e,t,a){function n(){c(".heart{width:10px;height:10px;position:fixed;background:#f00;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg)}.heart:after,.heart:before{content:'';width:inherit;height:inherit;background:inherit;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;position:fixed}.heart:after{top:-5px}.heart:before{left:-5px}"),o(),r()}function r(){for (var e = 0;e < d.length;e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale += .004,d[e].alpha -= .013,d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");requestAnimationFrame(r)}function o(){var t = "function" == typeof e.onclick && e.onclick;e.onclick = function(e){t && t(),i(e)}}function i(e){var a = t.createElement("div");a.className = "heart",d.push({el:a,x:e.clientX - 5,y:e.clientY - 5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a = t.createElement("style");a.type = "text/css";try{a.appendChild(t.createTextNode(e))}catch (t){a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var d = [];e.requestAnimationFrame = function(){return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e){setTimeout(e,1e3 / 60)}}(),n()}(window,document);//]]>
</script>- Terakhir Save Tema, begini demonya
Memberi efek lingkaran saat di klik
Cara berikutnya adalah membuat efek lingkaran seperti radar, caranya pun sangat mudah tinggal copy paste kode berikut ke dalam template blog kalian.
- Caranya pilih Menu Tema > Edit HTML > Paste diatas body penutup </body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>//<![CDATA[
$("body").append($('<span class="rippleff"></span>')),$(document).on("click",function(n){var i=n.clientX,a=n.clientY;$(".rippleff").css({top:a-30,left:i-30}).addClass("active")}),$(".rippleff").on("animationend webkitAnimationEnd oAnimationEnd oanimationend MSAnimationEnd",function(){$(".rippleff").removeClass("active")});
//]]>
</script> - Kemudian tambahkan kode css berikut diatas head penutup </head> atau gabungkan dengan css template kalian.
<style type="text/css">
.rippleff{width:60px;height:60px;border-radius:99em;border:3px solid #f00;position:fixed;left:50%;transform:scale(0.5);display:none;z-index:999}.rippleff.active{display:block;animation:rippleff 0.4s ease-out forwards}
@keyframes rippleff{from{transform:scale(0.2);opacity:1}to{transform:scale(1);opacity:0}}
</style>Untuk mengubah warna lingkaran silahkan ubah kode yang saya blok biru dengan kode warna yang kalian inginkan.
- Terakhir Save Tema, begini demonya
Sampai disini tutorialnya, terimakasih semoga bermanfaat.