<div class="scroll-anim-16 js-scroll-anim-16">
<div style="height: 500px"></div>
<div class="scroll-anim-16__content">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<div style="height: 500px"></div>
</div>
.scroll-anim-16.js-scroll-anim-16
div(style='height: 500px')
.scroll-anim-16__content
- for (let i = 0; i < 10; i++)
p #{ text }
div(style='height: 500px')
{
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.scroll-anim-16';
// 変数
$color_bg_white: #fff;
$color_bg_black: #272727;
$color_text_white: #fff;
$color_text_black: #1c1c1c;
$duration_default: 0.5s;
#{ $BLOCK_NAME } {
color: $color_text_black;
background: $color_bg_white;
transition: $duration_default;
&.is-animated {
color: $color_text_white;
background: $color_bg_black;
}
&__content {
padding: 24px;
& > p + p {
margin-top: 8px;
}
}
}
'use strict';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const scrollAnim16 = () => {
const anim = new Anim16('.js-scroll-anim-16');
anim.init();
}
class Anim16 {
els: NodeListOf<HTMLElement>;
triggerElSelector: string;
constructor(elsSelector: string) {
this.els = document.querySelectorAll(elsSelector);
this.triggerElSelector = '.scroll-anim-16__content';
}
/**
* 初期化
*/
init(): void {
if (!this.els.length) return;
this.scrollHandler();
}
/**
* スクロール連動のイベント設定
*/
scrollHandler(): void {
[...this.els].forEach(el => {
const triggerEl = el.querySelector(this.triggerElSelector);
ScrollTrigger.create({
trigger: triggerEl,
start: 'top 70%',
end: 'bottom 30%',
onEnter: () => {
el.classList.add('is-animated');
},
onEnterBack: () => {
el.classList.add('is-animated');
},
onLeave: () => {
el.classList.remove('is-animated');
},
onLeaveBack: () => {
el.classList.remove('is-animated');
},
});
});
}
}