<!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>
Material Ripple etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Material Ripple etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Kaydol:
Kayıtlar (Atom)