スクロールして指定の位置に来たら、画像が虹っぽくキラッと表示されるアニメーションをつけます。
1. クラス「scroll-rainbow」を画像ウィジットにつけとく
2. 以下のCSSを入れる
HTML
<style>
.scroll-rainbow {
position: relative;
overflow: hidden;
}
.scroll-rainbow img {
display: block;
max-width: 100%;
height: auto;
}
.scroll-rainbow::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: linear-gradient(60deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 215, 235, 0.25) 44%,
rgba(255, 243, 181, 0.25) 47%,
rgba(223, 255, 186, 0.25) 49%,
rgba(193, 239, 255, 0.25) 52%,
rgba(223, 188, 255, 0.125) 56%,
rgba(255, 255, 255, 0) 60%);
transform: translateX(-130%) skewX(30deg);
will-change: transform;
}
.scroll-rainbow.is-shine::after {
animation: rainbowShine 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes rainbowShine {
0% {
transform: translateX(-130%) skewX(30deg);
}
100% {
transform: translateX(100%) skewX(30deg);
}
}
</style>2. 以下のJSを入れる
（このコードの上にGSAP読み込みコードを入れてください。）
HTML
<script>
document.addEventListener('DOMContentLoaded', function() {
gsap.registerPlugin(ScrollTrigger);
// --- scroll rainbow ---
const scrollRainbows = document.querySelectorAll('.scroll-rainbow');
scrollRainbows.forEach(item => {
ScrollTrigger.create({
trigger: item,
start: "top 80%",
onEnter: () => item.classList.add('is-shine'),
onLeaveBack: () => item.classList.remove('is-shine'),
});
});
});
</script>