<div class="scroll-anim-09 js-scroll-anim-09">
<p class="scroll-anim-09__text">1 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
<p class="scroll-anim-09__text">2 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
<p class="scroll-anim-09__text">3 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
<p class="scroll-anim-09__text">4 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
<p class="scroll-anim-09__text">5 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
<p class="scroll-anim-09__text">6 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
<p class="scroll-anim-09__text">7 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
<p class="scroll-anim-09__text">8 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
<p class="scroll-anim-09__text">9 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
<p class="scroll-anim-09__text">10 テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
</div>
.scroll-anim-09.js-scroll-anim-09
- for (var x = 0; x < 10; x++)
p.scroll-anim-09__text #{ x + 1 } !{ text }
{
"text": "テキストが入ります。テキストが入ります。<br>テキストが入ります。"
}
$BLOCK_NAME: '.scroll-anim-09';
// 変数
$duration_default: 0.3s;
$easing_default: cubic-bezier(0.63, 0.32, 0.35, 0.63);
#{ $BLOCK_NAME } {
@include Mq(md) {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
&__text {
font-family: 'Noto Serif JP', serif;
font-size: 12px;
font-weight: 500;
text-align: center;
opacity: 0;
transition: all $duration_default $easing_default;
transform: translate(0, 40px);
@for $i from 2 through 10 {
&:nth-child(#{$i}) {
transition-delay: #{0.4 + 0.1 * ($i - 1)}s;
}
}
@include Mq(md) {
font-size: 16px;
text-align: inherit;
word-break: keep-all;
white-space: nowrap;
writing-mode: vertical-rl;
transform: translate(-40px, 0);
}
& + & {
margin-top: 24px;
@include Mq(md) {
margin-top: 0;
margin-right: 24px;
}
}
@at-root #{ $BLOCK_NAME }.is-animated & {
opacity: 1;
transform: translate(0, 0);
}
}
}
'use strict';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const scrollAnim09 = () => {
// アニメーションさせる要素を指定
const els = document.getElementsByClassName('js-scroll-anim-09');
// アニメーションを設定
[...els].forEach(el => {
const imgAnim = new Anim09(<HTMLElement>el);
imgAnim.init();
});
}
class Anim09 {
el: HTMLElement;
constructor(el: HTMLElement) {
this.el = el;
}
/**
* 初期化
*/
init(): void {
this.scrollHandler();
}
/**
* スクロール連動のイベント設定
*/
scrollHandler(): void {
ScrollTrigger.create({
trigger: this.el,
start: 'top 70%',
onEnter: self => {
// 「is-animated」クラスを付与
this.el.classList.add('is-animated');
self.kill();
}
});
}
}