<div class="start-anim-02" id="js-start-anim-02">
<div class="start-anim-02__bg">
<div class="start-anim-02__bg-item"></div>
<div class="start-anim-02__bg-item"></div>
<div class="start-anim-02__bg-item"></div>
<div class="start-anim-02__bg-item"></div>
</div>
<p class="start-anim-02__content"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></p>
</div>
<div><img src="https://picsum.photos/id/1000/1200/600" width="400px" /><img src="https://picsum.photos/id/1001/1200/600" width="400px" /><img src="https://picsum.photos/id/1002/1200/600" width="400px" /><img src="https://picsum.photos/id/1003/1200/600" width="400px" /><img src="https://picsum.photos/id/1004/1200/600" width="400px" /><img src="https://picsum.photos/id/1005/1200/600" width="400px" /><img src="https://picsum.photos/id/1006/1200/600" width="400px" /><img src="https://picsum.photos/id/1008/1200/600" width="400px" /><img src="https://picsum.photos/id/1009/1200/600" width="400px" /><img src="https://picsum.photos/id/1010/1200/600" width="400px" /></div>
.start-anim-02#js-start-anim-02
.start-anim-02__bg
.start-anim-02__bg-item
.start-anim-02__bg-item
.start-anim-02__bg-item
.start-anim-02__bg-item
p.start-anim-02__content
each c in ['L', 'O', 'A', 'D', 'I', 'N', 'G']
span #{ c }
div
each item in items
img(src=item.img, width='400px')
{
"items": [
{
"img": "https://picsum.photos/id/1000/1200/600"
},
{
"img": "https://picsum.photos/id/1001/1200/600"
},
{
"img": "https://picsum.photos/id/1002/1200/600"
},
{
"img": "https://picsum.photos/id/1003/1200/600"
},
{
"img": "https://picsum.photos/id/1004/1200/600"
},
{
"img": "https://picsum.photos/id/1005/1200/600"
},
{
"img": "https://picsum.photos/id/1006/1200/600"
},
{
"img": "https://picsum.photos/id/1008/1200/600"
},
{
"img": "https://picsum.photos/id/1009/1200/600"
},
{
"img": "https://picsum.photos/id/1010/1200/600"
}
]
}
$BLOCK_NAME: '.start-anim-02';
// 変数
$color_primary: #00bfa6;
$color_white: #fff;
#{ $BLOCK_NAME } {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
&__bg-item {
position: absolute;
top: 0;
bottom: 0;
width: 26%;
background: $color_primary;
&:nth-child(1) {
right: 75%;
}
&:nth-child(2) {
right: 50%;
}
&:nth-child(3) {
right: 25%;
}
&:nth-child(4) {
right: 0;
}
}
&__content {
z-index: 1;
font-size: 0;
text-align: center;
letter-spacing: 1.5px;
& > span {
display: inline-block;
font-size: 36px;
font-weight: bold;
color: $color_white;
animation: startAnim02Loading 3s infinite;
@for $i from 1 through 10 {
&:nth-child(#{ $i }) {
animation-delay: #{0.15s * ($i - 1)};
}
}
}
}
}
@keyframes startAnim02Loading {
0% {
transform: translateY(0);
}
15% {
transform: translateY(-16px);
}
40% {
transform: translateY(1px);
}
50% {
transform: translateY(0);
}
}
'use strict';
import { gsap } from 'gsap';
export const startAnim02 = () => {
const anim = new StartAnim02('js-start-anim-02');
anim.init();
}
class StartAnim02 {
el: HTMLElement;
bgEl: HTMLElement;
contentEl: HTMLElement;
constructor(elId: string) {
this.el = document.getElementById(elId);
if (!this.el) return;
this.bgEl = this.el.querySelector('.start-anim-02__bg');
this.contentEl = this.el.querySelector('.start-anim-02__content');
}
/**
* 初期化
*/
init() {
if (!this.el) return;
this.onLoadHandler();
}
/**
* 開始アニメーション
*/
open() {
const tl = gsap.timeline({
onComplete: () => {
this.el.remove();
},
});
tl
.to(this.contentEl, {
duration: 0.3,
opacity: 0,
})
.to(this.bgEl.children, {
delay: 0.7,
duration: 0.3,
width: 0,
stagger: {
each: 0.1,
}
});
}
/**
* ページロード完了時の挙動設定
*/
onLoadHandler() {
window.onload = () => {
this.open();
};
}
}
No notes defined.