Codehints | Android Lollipop effects on web

Android Lollipop effects on web

google-releases-android-lollipop-5-1-in-android-one

function animateButton(){
var element, circle, d, x, y;
var clickelments = $(“.web-sec-content .bt-sign-up, .fes-price-base .button-orange, .awesome-website .view-all-details, .ssl-pl-block .button-orange, .gg-item .gg-show, .blog-img a”);
clickelments.click(function(e){

element = $(this);
element.find(“span.circle-animate”).remove();
if(element.find(“.circle-animate”).length == 0)
element.prepend(“<span class=’circle-animate’></span>”);

circle = element.find(“.circle-animate”);
circle.removeClass(“animate”);

if(!circle.height() && !circle.width())
{
d = Math.max(element.outerWidth(), element.outerHeight());
circle.css({height: d, width: d});
}

x = e.pageX – element.offset().left – circle.width()/2;
y = e.pageY – element.offset().top – circle.height()/2;

circle.css({top: y+’px’, left: x+’px’}).addClass(“animate”);
});
}

animateButton();

.circle-animate
{
display: block;
position: absolute;
background:rgba(255, 255, 255, 0.43);
border-radius: 50%;

transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);

animation: effect 0.65s linear;
-webkit-animation: effect 0.65s linear;
-moz-animation: effect 0.65s linear;
-ms-animation: effect 0.65s linear;
-o-animation: effect 0.65s linear;

border-radius:50%;
-webkit-border-radius: 50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
}

@keyframes effect{
100%{
opacity: 0;
transform: scale(2.5);
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
}
}

@-webkit-keyframes effect{
100%{
opacity: 0;
transform: scale(2.5);
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
}
}

@-moz-keyframes effect{
100%{
opacity: 0;
transform: scale(2.5);
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
}
}

@-ms-keyframes effect{
100%{
opacity: 0;
transform: scale(2.5);
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
}
}

@-o-keyframes effect{
100%{
opacity: 0;
transform: scale(2.5);
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
}
}