Bootstrap Snippet Ripple Effect using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br/><br/><br/><br/>
<div class="container">
    <div class="row">
        
        <div class="ripple-wrap">
          <button  class="ripple">Ripple Effect</button>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.ripple-wrap {
  background: #f37a2a none repeat scroll 0 0;
  border-radius: 7px;
  color: #fff;
  height: 50px;
  overflow: hidden;
  width: 200px;
  position: relative;
}
.ripple-wrap .ripple {
  background: transparent none repeat scroll 0 0;
  border: 0 none;
  color: #fff;
  font-size: 22px;
  height: 100%;
  margin: 0;
  outline: medium none;
  padding: 0;
  width: 100%;
}
/*jquery add class to effect*/
.ink {
    display: block;
     position: absolute;
    background: rgba(0,0,0,.5);
    border-radius: 100%;
    -webkit-transform: scale(0);
            transform: scale(0);
}
/*animation effect*/
.ink.animate {-webkit-animation: ripple 0.65s linear;animation: ripple 0.65s linear;}
@-webkit-keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {opacity: 0; -webkit-transform: scale(2.5); transform: scale(1.5);}
}
@keyframes ripple {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var parent, ink, d, x, y;
$(".ripple").click(function(e){
    parent = $(this).parent();
    //create .ink element if it doesn't exist
    if(parent.find(".ink").length == 0)
        parent.prepend("<span class='ink'></span>");
        
    ink = parent.find(".ink");
    //incase of quick double clicks stop the previous animation
    ink.removeClass("animate");
    
    //set size of .ink
    if(!ink.height() && !ink.width())
    {
        //use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
        d = Math.max(parent.outerWidth(), parent.outerHeight());
        ink.css({height: d, width: d});
    }
    
    //get click coordinates
    //logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
    x = e.pageX - parent.offset().left - ink.width()/2;
    y = e.pageY - parent.offset().top - ink.height()/2;
    
    //set the position and add class .animate
    ink.css({top: y+'px', left: x+'px'}).addClass("animate");
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Ripple Effect "
Bootstrap 4.0.0 Snippet by foysal991

Related: See More

Questions / Comments:

"Ripple Effect " Bootstrap 4.0.0 Snippet by foysal991

Related: See More

Questions / Comments:

"Ripple Effect "
Bootstrap 4.0.0 Snippet by foysal991