<ul class="scroll-anim-08 js-scroll-anim-08">
<li class="scroll-anim-08__item"><a class="scroll-anim-08__link" href="#">
<div class="scroll-anim-08__img"><img src="https://picsum.photos/id/1010/200/300" width="200" height="300" /></div>
<p class="scroll-anim-08__text">2020<i class="scroll-anim-08__icon fas fa-arrow-right"></i></p>
</a></li>
<li class="scroll-anim-08__item"><a class="scroll-anim-08__link" href="#">
<div class="scroll-anim-08__img"><img src="https://picsum.photos/id/1011/200/300" width="200" height="300" /></div>
<p class="scroll-anim-08__text">2019<i class="scroll-anim-08__icon fas fa-arrow-right"></i></p>
</a></li>
<li class="scroll-anim-08__item"><a class="scroll-anim-08__link" href="#">
<div class="scroll-anim-08__img"><img src="https://picsum.photos/id/1012/200/300" width="200" height="300" /></div>
<p class="scroll-anim-08__text">2018<i class="scroll-anim-08__icon fas fa-arrow-right"></i></p>
</a></li>
<li class="scroll-anim-08__item"><a class="scroll-anim-08__link" href="#">
<div class="scroll-anim-08__img"><img src="https://picsum.photos/id/1013/200/300" width="200" height="300" /></div>
<p class="scroll-anim-08__text">2017<i class="scroll-anim-08__icon fas fa-arrow-right"></i></p>
</a></li>
<li class="scroll-anim-08__item"><a class="scroll-anim-08__link" href="#">
<div class="scroll-anim-08__img"><img src="https://picsum.photos/id/1014/200/300" width="200" height="300" /></div>
<p class="scroll-anim-08__text">2016<i class="scroll-anim-08__icon fas fa-arrow-right"></i></p>
</a></li>
</ul>
ul.scroll-anim-08.js-scroll-anim-08
each link in linkItems
li.scroll-anim-08__item
a.scroll-anim-08__link(href=link.link)
.scroll-anim-08__img
img(src=link.img, width=200, height=300)
p.scroll-anim-08__text #{ link.text }
i.scroll-anim-08__icon.fas.fa-arrow-right
{
"linkItems": [
{
"img": "https://picsum.photos/id/1010/200/300",
"link": "#",
"text": "2020"
},
{
"img": "https://picsum.photos/id/1011/200/300",
"link": "#",
"text": "2019"
},
{
"img": "https://picsum.photos/id/1012/200/300",
"link": "#",
"text": "2018"
},
{
"img": "https://picsum.photos/id/1013/200/300",
"link": "#",
"text": "2017"
},
{
"img": "https://picsum.photos/id/1014/200/300",
"link": "#",
"text": "2016"
}
]
}
$BLOCK_NAME: '.scroll-anim-08';
// 変数
$duration_default: 0.8s;
$easing_default: cubic-bezier(0.25, 0.25, 0.42, 1);
#{ $BLOCK_NAME } {
display: flex;
width: 1000px;
&__item {
width: 200px;
transition: transform $duration_default $easing_default;
@at-root #{ $BLOCK_NAME }.is-animated & {
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
transform: translateY(#{60 * ($i - 1)}px);
}
}
}
}
&__link {
display: block;
}
&__img {
margin-bottom: 16px;
transition: opacity $duration_default $easing_default;
@at-root #{ $BLOCK_NAME }__link:hover & {
opacity: 0.75;
}
}
&__text {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
}
&__icon {
display: inline-block;
margin: 0 0 2px 8px;
font-size: 12px;
transition: transform $duration_default $easing_default;
@at-root #{ $BLOCK_NAME }__link:hover & {
transform: translateX(60px);
}
}
}
'use strict';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const scrollAnim08 = () => {
// アニメーションさせる要素を指定
const els = document.getElementsByClassName('js-scroll-anim-08');
// アニメーションを設定
[...els].forEach(el => {
const imgAnim = new Anim08(<HTMLElement>el);
imgAnim.init();
});
}
class Anim08 {
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();
}
});
}
}