Membuat Effect Bubble Text dengan jQuery

14/02/2018    Risman Hakim    655     Website

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 :)

Artikel, jQuery, Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More