텍스트 및 이미지에 물방울 효과 만들기~

 

    

 

 

Demo & Code

 

 

[Demo] Bubble Effect~

 

 

<!-- HTML -->

<div id="bb-outer">
  <div class="bubbles">
    <!-- 텍스트 대신 이미지 태그도 가능 -->
    <h2>Bubble Effect~</h2>
  </div>
</div>

 

 

/* CSS */

#bb-outer { width:100%; height:fit-content; text-align:center }
#bb-outer .bubbles { display:inline-block; position:relative }

#bb-outer .bubbles h2 { font-size:20px; color:#151515 }

#bb-outer .bubbles .bubble {
 position:absolute;
 border-radius:50%;
 bottom:20px; /* 물방울 시작 위치 */
 background:rgba(113, 186, 255, 0.7); /* 물방울 색상 */
}

 

 

/* Javascript */

const itv = 500; // 물방울 생성 간격 || 단위 - ms
const dur = 3000; // 물방울 속도 || 단위 - ms
const byd = "100%"; // 물방울 올라가는 높이
const sArray = [4, 6, 8, 10, 12]; // 물방울 크기 || 단위 - px
  
function _0x4eee(){const _0x185aca=['px;\x20height:','7196178BXcsXP','\x22\x20class=\x22bubble\x22\x20style=\x22left:\x20','animate','38904588mJxnKd','6085701oTbffP','length','beforeend','12XIKxQC','DOMContentLoaded','10IuyuMd','2654968plDWOG','1282SwOqdg','3728430NScZtZ','.bubbles','clientWidth','px;\x20width:\x20','querySelector','push','21aLRykk','<div\x20id=\x22','157iSmmjP','floor','0.2','insertAdjacentHTML','11lVeIUU','2106505hVIudK'];_0x4eee=function(){return _0x185aca;};return _0x4eee();}function _0xb037(_0xbba905,_0x5ebf77){const _0x4eee99=_0x4eee();return _0xb037=function(_0xb03745,_0x3f90db){_0xb03745=_0xb03745-0x139;let _0x2c55a1=_0x4eee99[_0xb03745];return _0x2c55a1;},_0xb037(_0xbba905,_0x5ebf77);}const _0x37d759=_0xb037;(function(_0x3edff4,_0x29fc0c){const _0x1d2e07=_0xb037,_0x2a1156=_0x3edff4();while(!![]){try{const _0x2c1f71=-parseInt(_0x1d2e07(0x149))/0x1*(parseInt(_0x1d2e07(0x140))/0x2)+parseInt(_0x1d2e07(0x141))/0x3+-parseInt(_0x1d2e07(0x13c))/0x4*(-parseInt(_0x1d2e07(0x14e))/0x5)+parseInt(_0x1d2e07(0x150))/0x6+parseInt(_0x1d2e07(0x147))/0x7*(parseInt(_0x1d2e07(0x13f))/0x8)+parseInt(_0x1d2e07(0x139))/0x9*(-parseInt(_0x1d2e07(0x13e))/0xa)+parseInt(_0x1d2e07(0x14d))/0xb*(-parseInt(_0x1d2e07(0x153))/0xc);if(_0x2c1f71===_0x29fc0c)break;else _0x2a1156['push'](_0x2a1156['shift']());}catch(_0x45b239){_0x2a1156['push'](_0x2a1156['shift']());}}}(_0x4eee,0xa6b3e),document['addEventListener'](_0x37d759(0x13d),function(){const _0x297bde=_0x37d759;let _0x37bc5d=[],_0x5abb75=document[_0x297bde(0x145)](_0x297bde(0x142))[_0x297bde(0x143)];for(let _0x1063b0=0x0;_0x1063b0<_0x5abb75;_0x1063b0++){_0x37bc5d[_0x297bde(0x146)](_0x1063b0);}function _0x56e090(_0x52005b){const _0x46758b=_0x297bde;return _0x52005b[Math[_0x46758b(0x14a)](Math['random']()*_0x52005b[_0x46758b(0x13a)])];}setInterval(function(){const _0x2305c5=_0x297bde;let _0x3dea2a=_0x56e090(sArray),_0x1ac175='t'+_0x56e090(_0x37bc5d);document[_0x2305c5(0x145)](_0x2305c5(0x142))[_0x2305c5(0x14c)](_0x2305c5(0x13b),_0x2305c5(0x148)+_0x1ac175+_0x2305c5(0x151)+_0x56e090(_0x37bc5d)+_0x2305c5(0x144)+_0x3dea2a+_0x2305c5(0x14f)+_0x3dea2a+'px;\x22></div>'),document['querySelector']('#'+_0x1ac175)[_0x2305c5(0x152)]({'bottom':byd,'opacity':_0x2305c5(0x14b)},dur),setTimeout(function(){const _0x5b8622=_0x2305c5;document[_0x5b8622(0x145)]('#'+_0x1ac175)['remove']();},dur);},itv);}));


// Jquery 출처 - https://codepen.io/html5andblog/pen/ZWmYMy

 

 

 

 

 

 

처음 몇 초만 출력 후 마우스 올리면 효과 보여주기

 

 

[Demo] 물방울 효과 : 처음 몇 초간 출력 후, 마우스 호버시에만 출력.

 

 

const fTime = '5000'; // 로딩시 물방울 보여줄 시간 || 단위 ms
const itv = 500; // 물방울 생성 간격 || 단위 - ms
const dur = 2000; // 물방울 속도 || 단위 - ms
const byd = "100%"; // 물방울 올라가는 높이

const _0x2139f7=_0x199e;function _0x199e(_0x50fedf,_0x40d8bb){const _0x32d217=_0x32d2();return _0x199e=function(_0x199eec,_0x333653){_0x199eec=_0x199eec-0x11d;let _0x3c06d7=_0x32d217[_0x199eec];return _0x3c06d7;},_0x199e(_0x50fedf,_0x40d8bb);}function _0x32d2(){const _0x5ac5cf=['animate','px;\x22></div>','\x22\x20class=\x22bubble\x22\x20style=\x22left:\x20','0.2','1207968hurNuI','.bubbles','1FiAndw','43816uEazWG','push','random','addEventListener','remove','2264492ORKEYT','2575888oGlIUw','length','px;\x20width:\x20','1479125OqiizC','1629wbtlvh','querySelector','clientWidth','747398nRKFsk','mouseenter','1584288RGOMnl','DOMContentLoaded','<div\x20id=\x22','#bb-outer','mouseleave'];_0x32d2=function(){return _0x5ac5cf;};return _0x32d2();}(function(_0x546984,_0x1c0f77){const _0x273ba7=_0x199e,_0x3e25bc=_0x546984();while(!![]){try{const _0x4e1af2=-parseInt(_0x273ba7(0x135))/0x1*(-parseInt(_0x273ba7(0x128))/0x2)+-parseInt(_0x273ba7(0x12a))/0x3+parseInt(_0x273ba7(0x120))/0x4+parseInt(_0x273ba7(0x124))/0x5+parseInt(_0x273ba7(0x133))/0x6+parseInt(_0x273ba7(0x121))/0x7+-parseInt(_0x273ba7(0x136))/0x8*(parseInt(_0x273ba7(0x125))/0x9);if(_0x4e1af2===_0x1c0f77)break;else _0x3e25bc['push'](_0x3e25bc['shift']());}catch(_0x3eba22){_0x3e25bc['push'](_0x3e25bc['shift']());}}}(_0x32d2,0x45b56),document[_0x2139f7(0x11e)](_0x2139f7(0x12b),function(){const _0x588f8b=_0x2139f7;function _0x3e2cad(_0x554cf9){const _0x19f8ae=_0x199e;let _0x411c1f=[],_0x497ec8=[0x4,0x6,0x8,0xa,0xc],_0x9e3728=document['querySelector']('.bubbles')[_0x19f8ae(0x127)];for(let _0x2ef536=0x0;_0x2ef536<_0x9e3728;_0x2ef536++){_0x411c1f[_0x19f8ae(0x137)](_0x2ef536);}function _0x210bdc(_0x15991c){const _0x59c4ec=_0x19f8ae;return _0x15991c[Math['floor'](Math[_0x59c4ec(0x11d)]()*_0x15991c[_0x59c4ec(0x122)])];}let _0x22e425=setInterval(function(){const _0x53178f=_0x19f8ae;let _0x5d8808=_0x210bdc(_0x497ec8),_0x4d36c6='t'+_0x210bdc(_0x411c1f);document['querySelector'](_0x53178f(0x134))['insertAdjacentHTML']('beforeend',_0x53178f(0x12c)+_0x4d36c6+_0x53178f(0x131)+_0x210bdc(_0x411c1f)+_0x53178f(0x123)+_0x5d8808+'px;\x20height:'+_0x5d8808+_0x53178f(0x130)),document[_0x53178f(0x126)]('#'+_0x4d36c6)[_0x53178f(0x12f)]({'bottom':byd,'opacity':_0x53178f(0x132)},dur),setTimeout(function(){const _0x15efdc=_0x53178f;document['querySelector']('#'+_0x4d36c6)[_0x15efdc(0x11f)]();},dur);},itv);if(_0x554cf9==0x1)setTimeout(function(){clearInterval(_0x22e425);},fTime);else _0x554cf9==0x2&&(setTimeout(function(){clearInterval(_0x22e425);},0xf4240),document[_0x19f8ae(0x126)](_0x19f8ae(0x12d))['addEventListener'](_0x19f8ae(0x12e),function(){clearInterval(_0x22e425);}));}_0x3e2cad(0x1),document[_0x588f8b(0x126)]('#bb-outer')[_0x588f8b(0x11e)](_0x588f8b(0x129),function(){_0x3e2cad(0x2);});}));