tutorials-files/ripple-effects-button.html at master · beforesemicolon/tutorials-files · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Before Semicolon</title>
	<link rel="stylesheet" href="./setup.css">
	<style>
		button {
			margin: 25px;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			cursor: pointer;
			padding: 8px 15px;
			text-transform: uppercase;
			border-radius: 3px;
			outline: none;
			position: relative;
			overflow: hidden;
			box-sizing: border-box;
			height: 35px;
			width: 85px;
		}

		#btn-1 {
			border: 0;
			background: #ddd;
			color: #222;
		}

		#btn-2 {
			background: #222;
			color: #ddd;
		}

		@keyframes ripple {
			100% {
				transform: translate(-50%, -50%) scale(100);
				opacity: 0;
			}
		}

	</style>
</head>
<body>
	<div class="wrapper">
		<button type="button" id="btn-1" class="ripple">button</button>
		<button type="button" id="btn-2" class="ripple" data-ripple-color="#888">button</button>
		<div class="ripple" style="width: 300px; height: 100px; background: #ddd;"></div>
		<div class="ripple" style="width: 100px; height: 300px; background: #ddd;"></div>
	</div>

	<script>
		(function () {
		    document.querySelectorAll('.ripple').forEach(setRippleElement);
		})()

		function setRippleElement(el) {
		    const dot = document.createElement('SPAN');
		    const largestSide = Math.sqrt(
		      Math.pow(el.offsetWidth, 2) +
		      Math.pow(el.offsetHeight, 2)
		    );
		    const dotSize = Math.ceil((largestSide * 2) / 100);
		    const rippleColor = el.dataset.rippleColor || '#768b8c';

		    dot.style = `
		        position: absolute;
		        left: 0;
		        top: 0;
		        width: ${dotSize}px;
		        height: ${dotSize}px;
		        z-index: 3;
		        border-radius: 50%;
		        background: ${rippleColor};
		        transform: translate(-50%, -50%) scale(1);
		        opacity: 0.5;
		        animation: ripple 1s ease-out forwards;
		    `;

		    el.style.position = 'relative';
		    el.style.overflow = 'hidden';

		    el.addEventListener('click', ({pageX, pageY, currentTarget}) => {
		      // x and y in percentages
		      const x = ((pageX - currentTarget.offsetLeft) * 100)  / currentTarget.offsetWidth;
		      const y = ((pageY - currentTarget.offsetTop) * 100)  / currentTarget.offsetHeight;

		      el.appendChild(dot);

		      dot.style.left = x + '%';
		      dot.style.top = y + '%';
		    })

		}
	</script>
</body>
</html>