カーソルを丸にして、キラキラが追従してくる、クリックするとキラキラが弾ける、ギャルっぽいアニメーションです。
1. 以下のCSS, JSを入れる
CSSコード
HTML
<style>
/* --- cursor --- */
.custom-cursor {
display: none;
}
@media (hover: hover) and (pointer: fine) {
body.custom-cursor-enabled,
body.custom-cursor-enabled a,
body.custom-cursor-enabled button,
body.custom-cursor-enabled input,
body.custom-cursor-enabled select,
body.custom-cursor-enabled textarea {
cursor: none !important;
}
.custom-cursor {
display: block;
position: fixed;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: rgba(255, 111, 162, 0.3); /* カーソルの色 */
border: 1px solid #fff; /* カーソルの枠線 */
border-radius: 50%;
pointer-events: none;
z-index: 999999;
transform: translate3d(-50%, -50%, 0);
transition: width 0.2s, height 0.2s, background-color 0.2s;
}
/* ホバー時のカーソルのスタイル */
.custom-cursor.is-hovered {
width: 32px;
height: 32px;
background-color: rgba(255, 111, 162, 0.5);
}
}
.sparkle-effect {
position: fixed;
top: 0;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #FFE3ED; /* キラキラの色 */
pointer-events: none;
z-index: 999998;
box-shadow: 0 0 8px #FFE3ED, 0 0 15px #FFE3ED; /* キラキラの色 */
animation: sparkle-fade 0.6s ease-out forwards;
transform: translate3d(var(--sparkle-x), var(--sparkle-y), 0) translate(-50%, -50%);
}
@keyframes sparkle-fade {
0% {
opacity: 1;
transform: translate3d(var(--sparkle-x), var(--sparkle-y), 0) translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate3d(var(--sparkle-x), var(--sparkle-y), 0) translate(-50%, -50%) scale(0.2) translateY(15px);
}
}
</style>
<div class="custom-cursor" id="js-custom-cursor"></div>
JSコード
HTML
<script>
(function() {
const cursor = document.getElementById('js-custom-cursor');
const isPC = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
function createSparkle(x, y, isTap = false) {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle-effect';
const spread = isTap ? 30 : 8;
const offsetX = (Math.random() - 0.5) * spread;
const offsetY = (Math.random() - 0.5) * spread;
sparkle.style.setProperty('--sparkle-x', `${x + offsetX}px`);
sparkle.style.setProperty('--sparkle-y', `${y + offsetY}px`);
document.body.appendChild(sparkle);
setTimeout(() => { sparkle.remove(); }, 600);
}
// --- PC ---
if (isPC && cursor) {
document.body.classList.add('custom-cursor-enabled');
document.addEventListener('mousemove', function(e) {
cursor.style.transform = `translate3d(${e.clientX}px, ${e.clientY}px, 0) translate(-50%, -50%)`;
if (Math.random() > 0.35) return;
createSparkle(e.clientX, e.clientY);
});
const targetSelector = 'a, button, input[type="submit"], .elementor-clickable, [role="button"]';
document.addEventListener('mouseover', function(e) {
if (e.target.closest(targetSelector)) cursor.classList.add('is-hovered');
});
document.addEventListener('mouseout', function(e) {
if (e.target.closest(targetSelector)) cursor.classList.remove('is-hovered');
});
}
// --- SP・PC ---
document.addEventListener('pointerdown', function(e) {
for (let i = 0; i < 5; i++) {
createSparkle(e.clientX, e.clientY, true);
}
});
})();
</script>