<div class="scroll-anim-26">
<div class="scroll-anim-26__box js-scroll-anim-26">
<h3 class="scroll-anim-26__heading">Member</h3>
<p class="scroll-anim-26__text">テキストが入ります。テキストが入ります。テキストが入ります。</p><a class="scroll-anim-26__btn" href="#"><span>view more</span></a>
</div>
</div>
.scroll-anim-26
.scroll-anim-26__box.js-scroll-anim-26
h3.scroll-anim-26__heading Member
p.scroll-anim-26__text #{ text }
a.scroll-anim-26__btn(href=link)
span view more
{
"text": "テキストが入ります。テキストが入ります。テキストが入ります。",
"link": "#"
}
$BLOCK_NAME: '.scroll-anim-26';
// 変数
$color_primary: #ffd800;
$color_white: #fff;
$color_black: #151d35;
$shadow_default: 25px 25px 40px rgba(0, 18, 109, 0.05);
$duration_default: 0.3s;
$height_btn_border: 3px;
#{ $BLOCK_NAME } {
position: relative;
min-width: 600px;
height: 540px;
color: $color_black;
background: url(https://picsum.photos/id/1000/800/1000) top center no-repeat;
background-attachment: fixed;
background-size: cover;
&__box {
position: absolute;
right: 30px;
bottom: -50px;
width: 480px;
padding: 90px 30px 60px 90px;
background: $color_white;
box-shadow: $shadow_default;
opacity: 0;
transition: 0.8s 0.3s;
transform: translateY(50px);
&.is-animated {
opacity: 1;
transform: translateY(0);
}
}
&__heading {
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 60px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
&::before {
position: absolute;
top: 22px;
left: -45px;
width: 0;
height: 0;
content: '';
border-color: transparent transparent transparent $color_primary;
border-style: solid;
border-width: 8px 0 8px 32px;
}
}
&__text {
margin-top: 30px;
font-size: 14px;
line-height: 2;
}
&__btn {
position: relative;
display: block;
width: 120px;
padding-bottom: 6px;
margin-top: 30px;
border-bottom: solid $height_btn_border $color_primary;
&::after {
position: absolute;
right: 0;
bottom: -$height_btn_border;
left: 0;
display: block;
height: $height_btn_border;
content: '';
background: $color_black;
transition: transform $duration_default;
transform: scaleX(0);
transform-origin: right;
}
& > span {
position: relative;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 700;
color: $color_black;
letter-spacing: 0.15em;
transition: $duration_default;
&::after {
position: absolute;
top: 1px;
right: -12px;
bottom: 0;
display: block;
width: 5px;
height: 5px;
margin: auto;
content: '';
border-top: 2px solid $color_black;
border-right: 2px solid $color_black;
transform: rotate(45deg);
}
}
@at-root #{ $BLOCK_NAME }__btn:hover {
&::after {
transform: scaleX(1);
transform-origin: left;
}
& > span {
letter-spacing: 0.2em;
}
}
}
}
'use strict';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export const scrollAnim26 = () => {
// アニメーションさせる要素を指定
const els = document.getElementsByClassName('js-scroll-anim-26');
if (!els.length) return;
// アニメーションを設定
[...els].forEach(el => {
const anim = new Anim26(<HTMLElement>el);
anim.init();
});
}
class Anim26 {
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();
}
});
}
}