Simple javaScript Dalgalanma Efekti (Material Ripple)

<!DOCTYPE html>
<html>
<head>
<title>Simple javaScript Dalgalanma Efekti (Material Ripple)</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body,h1 ,.wrap {
  font-family: 'Fira Sans Condensed', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #2c3e50;
  color: white;
}
.ripple {
  position: relative;
  overflow: hidden;
  z-index:10;
}
.ripple-effect {
  width: 10px;
  height: 10px;
  background: white;
  opacity:0.2;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index:0;
  transition: all 3s ease;
}
.ripple-close {
  animation:ripple 1.5s normal forwards cubic-bezier(0,0,.2,1);
}
@keyframes ripple{
  0%{transform:scale(1)}
  100%{transform:scale(5);opacity:0}
}
.wrap {
  margin: 50px auto 0;  
  width: 250px;
  text-align:center;
}
.wrap>div {
  margin-top: 20px;
  box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.1);
  color:white;
  text-align: center;
  cursor: pointer;
}
.button1 {color:#fff;
  width: 250px;
  height: 250px;
  background: #27ae60;
  line-height: 50px;
}
.button2 {color:#fff;
  width: 85px;
  height: 60px;
  background: #3498db;
  padding-top: 25px;
  border-radius: 50%;  
  margin-left: 80px;
}
.button3 {color:#fff;
  width: 250px;
  height: 50px;
  background: #e74c3c;
  line-height: 50px;
  border-radius: 15px;
}
</style>
</head>
<body>
<div class="wrap">
  <h1>Material Ripple</h1>
  <div class="ripple button1">Dalgalanma tehlikesi</div>
  <div class="ripple button2">Border<br>radius!</div>
  <div class="ripple button3" data-ripple-color="#f1c40f" data-ripple-opacity="1">Özel dalgalanma efekti</div>
</div>
<script type='text/javascript'>
var initSimpleRipple = function() {
  var ripples = document.getElementsByClassName('ripple');
  for(var i = 0; i < ripples.length; i++){
    setListeners(ripples[i]);
  }
  
  function setListeners(element) {
    element.addEventListener('mousedown', function(e){
      
      var xPos = e.pageX - this.offsetLeft;
      var yPos = e.pageY - this.offsetTop; 
      var color = this.getAttribute('data-ripple-color') || 'white';
      var opacity = this.getAttribute('data-ripple-opacity') || 0.5;

var rippleEffect = document.createElement("span");
      rippleEffect.className = "ripple-effect";
      rippleEffect.style.left = xPos + 'px';
      rippleEffect.style.top = yPos + 'px';
      rippleEffect.style.backgroundColor = color;
      rippleEffect.style.opacity = opacity;
      
      //remove animation
      this.addEventListener('mouseup', function() {
        rippleEffect.classList.add('ripple-close');
        setTimeout(function(){
          element.removeChild(rippleEffect);
        }, 1500);
        //todo do something about the remove listener, doesnt work yet
        element.removeEventListener('mouseup', this);
      }, false);

this.appendChild(rippleEffect);

//calculate how big the ripple has to grow
      var containerWidth = this.offsetWidth;
      var containerHeight = this.offsetHeight;
      var biggest = (containerWidth > containerHeight) ? containerWidth : containerHeight;
      biggest = biggest * 1.4;

//animation
      setTimeout(enlargeRipple(biggest, yPos, xPos, rippleEffect), 0);
      
    }, false);
  }
  function enlargeRipple(amount, yPos, xPos, element) {
    element.style.width = amount*2 + 'px';
    element.style.height = amount*2 + 'px';
    element.style.left = xPos-amount + 'px';
    element.style.top = yPos-amount + 'px';    
  }
}
initSimpleRipple();
</script>
</body>
</html>

Kodeks Editör

Simple javaScript Dalgalanma Efekti (Material Ripple)

"Simple javaScript Dalgalanma Efekti (Material Ripple)" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Simple javaScript Dalgalanma Efekti (Material Ripple)

"Simple javaScript Dalgalanma Efekti (Material Ripple)" 0 Yorum yapıldı.

Yorum Gönder