<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<div class="ripple">
<div class="title">
リップルエフェクト サンプル
</div>
</div>
</header>
<main>
<div class="ripple">
<div class="title">
クリックしてみてください
</div>
</div>
</main>
</body>
</html>
html, body {
height: 100%;
}
body {
display: grid;
grid-template-rows: 48px 1fr;
}
header {
z-index: 100;
display: block;
height: 48px;
background-color: steelblue;
box-shadow:rgb(0 0 0 / 20%) 0px 2px 4px -1px,
rgb(0 0 0 / 14%) 0px 4px 5px 0px,
rgb(0 0 0 / 12%) 0px 1px 10px 0px;
color: white;
}
main {
display: block;
background-color: gainsboro;
color: black;
}
div.ripple {
display: table;
width: 100%;
height: 100%;
cursor: pointer;
}
div.title {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.ripple {
position: relative;
display: block;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
}
/* ripple-effect */
.ripple-effect {
position: absolute;
display: inline-block;
border-radius: 100%;
background: white;
opacity: 0;
transform: scale(0);
animation: ripple-effect 750ms cubic-bezier(0, 0, 0, 1.0) backwards;
pointer-events: none;
}
@keyframes ripple-effect {
from {
opacity: 1;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(1);
}
}
$(() => {
initRipples()
})
/**
* マウスダウンのリップルイベントハンドラ
* @param {*} e
* @return
*/
function onRipple (e) {
const size = 300
const x = e.offsetX
const y = e.offsetY
const w = size
const h = size
const effect = $('<span class="ripple-effect"></span>')
.css({
left: x - w / 2,
top: y - h / 2,
width: size,
height: size
})
.appendTo(this)
.on('animationend', () => effect.remove())
}
/**
* リップル初期化
*/
function initRipples () {
$('.ripple')
.mousedown(onRipple)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.