<div class="scroll-anim-22">
<div class="scroll-anim-22__item js-scroll-anim-22">
<div class="scroll-anim-22__info">
<h3 class="scroll-anim-22__job">職種01</h3>
<p class="scroll-anim-22__company">企業名01</p>
<p class="scroll-anim-22__term">2015/00 - 2016/00</p>
</div>
<div class="scroll-anim-22__text-wrapper">
<div class="scroll-anim-22__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
</div>
</div>
<div class="scroll-anim-22__item js-scroll-anim-22">
<div class="scroll-anim-22__info">
<h3 class="scroll-anim-22__job">職種02</h3>
<p class="scroll-anim-22__company">企業名02</p>
<p class="scroll-anim-22__term">2016/00 - 2017/00</p>
</div>
<div class="scroll-anim-22__text-wrapper">
<div class="scroll-anim-22__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
</div>
</div>
<div class="scroll-anim-22__item js-scroll-anim-22">
<div class="scroll-anim-22__info">
<h3 class="scroll-anim-22__job">職種03</h3>
<p class="scroll-anim-22__company">企業名03</p>
<p class="scroll-anim-22__term">2017/00 - 2018/00</p>
</div>
<div class="scroll-anim-22__text-wrapper">
<div class="scroll-anim-22__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
</div>
</div>
</div>
.scroll-anim-22
each item in items
.scroll-anim-22__item.js-scroll-anim-22
.scroll-anim-22__info
h3.scroll-anim-22__job #{ item.job }
p.scroll-anim-22__company #{ item.company }
p.scroll-anim-22__term #{ item.term }
.scroll-anim-22__text-wrapper
.scroll-anim-22__text #{ item.text }
{
"items": [
{
"job": "職種01",
"company": "企業名01",
"term": "2015/00 - 2016/00",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"job": "職種02",
"company": "企業名02",
"term": "2016/00 - 2017/00",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"job": "職種03",
"company": "企業名03",
"term": "2017/00 - 2018/00",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
]
}
$BLOCK_NAME: '.scroll-anim-22';
// 変数
$color_black: #000;
$duration_default: 0.5s;
#{ $BLOCK_NAME } {
position: relative;
&::after {
position: absolute;
top: 0;
bottom: 0;
left: 9px;
width: 2px;
content: '';
background: $color_black;
@include Mq(md) {
left: 50%;
transform: translateX(-50%);
}
}
&__item {
position: relative;
opacity: 0;
transition: all $duration_default;
transform: translateY(20px);
&.is-animated {
opacity: 1;
transform: translateY(0);
}
@include Mq(md) {
position: relative;
display: flex;
}
&:nth-child(even) {
flex-direction: row-reverse;
}
&::after {
position: absolute;
top: 18px;
left: 0;
display: block;
width: 20px;
height: 20px;
content: '';
background: $color_black;
border-radius: 50%;
@include Mq(md) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
&__info {
padding: 12px;
padding-left: 36px;
@include Mq(md) {
flex-shrink: 0;
width: 50%;
}
@at-root #{ $BLOCK_NAME }__item:nth-child(odd) & {
@include Mq(md) {
padding-right: 32px;
padding-left: 0.75rem;
text-align: right;
}
}
@at-root #{ $BLOCK_NAME }__item:nth-child(even) & {
@include Mq(md) {
padding-right: 0.75rem;
padding-left: 32px;
}
}
}
&__job {
font-size: 24px;
font-weight: bold;
}
&__company {
font-size: 14px;
}
&__term {
margin-top: 8px;
font-size: 14px;
}
&__text-wrapper {
padding: 12px;
padding-left: 36px;
@include Mq(md) {
flex-shrink: 0;
width: 50%;
}
@at-root #{ $BLOCK_NAME }__item:nth-child(odd) & {
@include Mq(md) {
padding-right: 0.75rem;
padding-left: 32px;
}
}
@at-root #{ $BLOCK_NAME }__item:nth-child(even) & {
@include Mq(md) {
padding-right: 32px;
padding-left: 0.75rem;
}
}
}
&__text {
padding: 12px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
}
'use strict';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const scrollAnim22 = () => {
// アニメーションさせる要素を指定
const els = document.getElementsByClassName('js-scroll-anim-22');
if (!els.length) return;
// アニメーションを設定
[...els].forEach(el => {
const anim = new Anim22(<HTMLElement>el);
anim.init();
});
}
class Anim22 {
el: HTMLElement;
constructor(el: HTMLElement) {
this.el = el;
}
/**
* 初期化
*/
init(): void {
if (!this.el) return;
this.scrollHandler();
}
/**
* スクロール連動のイベント設定
*/
scrollHandler(): void {
ScrollTrigger.create({
trigger: this.el,
start: 'top 70%',
onEnter: self => {
// 「is-animated」クラスを付与
this.el.classList.add('is-animated');
self.kill();
}
});
}
}
No notes defined.