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.

<body>
<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 src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<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.

Membuat Effect Bubble Text dengan jQuery

Baiklah, cukup sekian tutorial bagaimana Membuat Effect Bubble Text dengan jQuery, semoga bermanfaat dan selamat mencoba :)

14 Februari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat