LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
/* basic reset */
* {
  margin: 0;
  padding: 0;
}

body {
  background: #445B5C;
}

h1 {
  font-size: 32px;
  line-height: 32px;
  font-family: 'Bitter', serif;
  color: #FFF;
  text-align: center;
  padding: 85px;
}

/* nav styles */
ul {
  background: #FFF;
  border-top: 6px solid #70C2C2;
  width: 200px;
  margin: 0 auto;
}
ul li {
  list-style-type: none;
  /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
  position: relative;
  overflow: hidden;
}
ul a {
  color: #3D8F8F;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  /*since links are dummy with no href's*/
  font-size: 14px;
  line-height: 28px;
  display: block;
  padding: 10px 15px;
  /*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
  position: relative;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
  display: block;
  position: absolute;
  background: #B8E0E0;
  border-radius: 100%;
  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;
    transform: scale(2.5);
  }
}
@keyframes ripple {
  /*scale the element to 250% to safely cover 
  the entire link and fade it out*/
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
JS
$(document).ready(function(){
  var parent, ink, d, x, y;
  $('ul li a').click(function(e){
    parent = $(this).parent();
    ink = parent.find('.ink');

    //in case 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');
  });
});
Host Instantly Drag and Drop Website Builder

 

Description

A ripple click where an ink-drop like element moves out radially from the position where the user taps/clicks. Based on Google material design and taken from this tutorial at The CodePlayer.
Term
Mon, 11/27/2017 - 21:50

Related Codes

Pen ID
Pen ID
Pen ID