[해피CGI][cgimall] 좋아요 버튼 애니메이션 Interactive splat like button

좋아요 버튼을 만들 때 사용하기 좋은 애니메이션 효과입니다.
응용하여 다양한 예제의 버튼을 만들 수 있습니다.

HTML 구조

<div class="like-container">

  <div class="like-cnt unchecked" id="like-cnt">

  <i class="like-btn material-icons">thumb_up</i>

</div>

</div>

<div class="gp-footer">

  Follow me on : 

  <a href="facebook.com/gowriprasanthvm" class="soc_icons">facebook</a> /

    twitter

</div>

 

CSS 소스

body{background: #333;}

.like-container{filter: url('#filter');

  position: absolute; 

  left: 50%; 

  top: 50%; 

  transform: translate(50%, -50%);

}

.like-cnt{  

  position: absolute; 

  cursor: pointer;

  left: 50%; 

  top: 100%; 

  transform: translate(50%, -50%);     background: rgba(255,255,255,0.3);     width: 60px; 

  height: 60px;  

  border-radius: 50%;

  text-align: center;

  line-height: 75px;

  z-index: 10;

}

.like-btn{

  color: #fff;

}

 

.gp-header{font-family: georgia; font-size: 40px; color: #ddca7e; font-style: italic; text-align: center; margin-top: 31px;}

.gp-footer{position: fixed; color: #fff; bottom: 10px; left: 50%; font-family: georgia; font-style: italic; transform: translateX(-50%);}

.gp-footer .soc_icons{display: inline-block; color: #ddca7e; margin: 0px 0px;}

 

 

::-moz-selection { background: transparent;}

::selection {background: transparent;}

 

JS 소스

var check_status = false;

var like_cnt = $("#like-cnt");

var like_parent = $(".like-container");

 

var burst = new mojs.Burst({

  parent: like_parent,

  radius:   { 20: 60 },

  count: 15,

  angle:{0:30},

  children: {

    delay: 250,

    duration: 700,

    radius:{10: 0},

    fill:   [ '#ddca7e' ],

    easing:  mojs.easing.bezier(.08,.69,.39,.97)

  }

});

.
.
.

해당 사이트로 이동해서 전체 소스를 확인하실 수 있습니다.