Skip to content

Instantly share code, notes, and snippets.

Created June 28, 2017 13:09
Show Gist options
  • Save CodeMyUI/031f5e3c20b3e26a47ad937bc65a6411 to your computer and use it in GitHub Desktop.
Save CodeMyUI/031f5e3c20b3e26a47ad937bc65a6411 to your computer and use it in GitHub Desktop.
Interactive splat like button
<div class="gp-header">Interactive splat like button</div>
<div class="like-container">
<div class="like-cnt unchecked" id="like-cnt">
<i class="like-btn material-icons">thumb_up</i>
<div class="gp-footer">
Follow me on :
<a href="" class="soc_icons">facebook</a> /
<a href="" class="soc_icons">twitter</a>
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,
children: {
delay: 250,
duration: 700,
radius:{10: 0},
fill: [ '#ddca7e' ],
easing: mojs.easing.bezier(.08,.69,.39,.97)
var t1 = new TimelineLite();
var t2 = new TimelineLite();
t1.set(like_cnt, {scale:0});
t1.set('.like-btn', {scale: 0});, 0.6, {scale:1, background: '#ddca7e',ease: Expo.easeOut});'.like-btn', 0.65, {scale: 1, ease: Elastic.easeOut.config(1, 0.3)}, '+=0.2');
// t1.timeScale(5);
else{, 1, {scale:1})
.to(like_cnt, 1, {scale:1, background: 'rgba(255,255,255,0.3)', ease: Power4.easeOut});
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
body{background: #333;}
.like-container{filter: url('#filter');}
position: absolute;
cursor: pointer;
left: 50%;
top: 50%;
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;
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;}
<link href="" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment