[Jquery] 버블버블 효과

버블버블 효과 제이쿼리입니다~ 

[ HTML ]

<div class='bubbles'></div>

[ CSS ]

.center-outer { display: table; width: 100%; height: 100%; }

.center-inner { display: table-cell; vertical-align: middle; text-align: center; }

.bubbles { display: inline-block; font-family: arial; position: relative; }

.bubbles h1 { position: relative; margin: 1em 0 0; font-family: 'arial'; font-size:50px; color:#fff; z-index: 2; }

.dh-bubble { position: absolute; border-radius: 100%; bottom: 10px; background-color: #fff; z-index: 1; }

[ Java Script ]

jQuery(document).ready(function($){

    var bArray = [];

    var sArray = [4,6,8,10];

    for (var i = 0; i < $('.bubbles').width(); i++) {

        bArray.push(i);

    }

    function randomValue(arr) {

        return arr[Math.floor(Math.random() * arr.length)];

    }

 

    setInterval(function(){

        var size = randomValue(sArray);

        $('.bubbles').append('<div class="dh-bubble" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>');

        $('.dh-bubble').animate({

            'bottom': '100%',

            'opacity' : '-=0.6'

        }, 3000, function(){ $(this).remove() }); 

 

    }, 350);

    

});