Membuat Effect Bubble Text dengan jQuery
Membuat Effect Bubble Text dengan jQuery - Setelah pada artikel sebelumnya telah dibahas tutorial mengenai bagaimana Membuat Effect Font Bergoyang dengan CSS, pada kesempatan kali ini saya akan berbagi tutorial masih mengenai effect, namun effect yang akan dibuat kali ini adalah effect bubble dengan bantuan jQuery yaitu Membuat Effect Bubble Text dengan jQuery. Baik, langsung saja kita akan praktekan cara membuat effect bubble text nya berikut ini.
Langkah 1 : Membuat Effect Bubble Text dengan jQuery
Pada kasus yang akan kita buat kali ini adalah bubble text, tentu kita akan butuh text sebagai objek yang akan dijadikan effect bubblenya, untuk itu silahkan buat struktur HTML dan membuat text seperti berikut ini.
<div class="wrapper">
<div class="txtBubble">
<h1>DUMETSCHOOL.</h1>
</div>
</div>
</body>
Langkah 2 : Membuat Effect Bubble Text dengan jQuery
Selanjutnya, sebelum kita membuat fungsi effect bubble text, kita akan desain terlebih dahulu textnya dengan sintak CSS berikut ini.
@import url('https://fonts.googleapis.com/css?family=Fascinate');
body {
margin: 0;
background-color: #1CBABC;
font-family: 'Fascinate', cursive;
}
.wrapper {
width: 100%;
text-align: center;
vertical-align: middle;
}
.txtBubble {
display: inline-block;
position: relative;
}
.txtBubble h1 {
font-size: 6em;
position: relative;
margin: 4em 0 0;
color: #fff;
z-index: 2;
}
.bubble {
position: absolute;
border-radius: 100%;
bottom: 10px;
background-color: #fff;
z-index: 1;
}
Langkah 3 : Membuat Effect Bubble Text dengan jQuery
Tentu untuk membuat fungsi effect pada textnya kita akan menggunakan sintak jQuery untuk memudahkan dalam membuatnya, silahkan kalian bisa ketikan sintak jQuery berikut untuk membuat effect bubble textnya.
<script type="text/javascript">
$(document).ready(function($){
var newArray = [];
var sizeBubble = [14,18,22,26];
for (var i = 0; i < $('.txtBubble').width(); i++) {
newArray.push(i);
}
function randomValue(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
setInterval(function(){
var size = randomValue(sizeBubble);
$('.txtBubble').append('<div class="bubble" style="left: ' +
randomValue(newArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>');
$('.bubble').animate({
'bottom': '100%',
'opacity' : '-=0.7'
}, 3000, function(){
$(this).remove()
}
);
}, 350);
});
</script>
Setelah, menuliskan semua sintak diatas, selanjutnya silahkan simpan filenya kemudian kalian bisa coba menjalankan pada browser masing - masing dan lihat hasilnya. Maka akan terlihat tampilan text dengan effect gelembung atau bubble pada area textnya.
Baiklah, cukup sekian tutorial bagaimana Membuat Effect Bubble Text dengan jQuery, semoga bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
