Gsapを使用した
メインビジュアルのアニメーション #2/2
はじめに
概要
前回はGsapを使用してメインビジュアルアニメーションを実装しました。今回はそれに加えて、ローディングアニメーションを追加し、アニメーションの範囲を広げたものを実装していきたいと思います。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
実装のポイント
ポイント解説
– 画面のロード時に、ローディング以外のコンテンツがちらつかないように設定しましょう。
– Webサイトの基本的な仕組みは、HTMLが読み込まれ、その後にCSSが適用され、最後にJavaScriptが実行されることです。この流れを理解し、それに基づいてコードを記述するようにしましょう。
– メインコンテンツにローディング画面を被せるのではなく、以下のように別で管理する方がわかりやすいです。
<body>
<!-- ローディングアニメーション -->
<div class="mv-content relative js_0_2">
<div class="loading absolute top-0 left-0 right-0 bg-[#fff]">
<div class="loading__inner w-[100%] h-[100vh]">
<div class="loading__wrap flex flex-col justify-center h-[100vh]">
<h1 class="flex flex-col h-[50vh] items-center justify-center text-[2rem]">
<span class="p-10 js-span inline-block js_0 overflow-hidden">loading-animation</span>
</h1>
</div><!-- /.loading__wrap -->
</div><!-- /.loading__inner -->
</div><!-- /.loading -->
</div><!-- /.mv-content -->
<!-- ここからメインコンテンツ -->
<div id="global-container">
<div id="container">
<div class="main-container opacity-0 invisible js_0_3">
<div class="content-cover flex absolute top-0 left-0 right-0 w-[100%] h-[100vh]">
<span class="overflow-hidden w-[20%] flex">
<span class="js_1 bg-black w-[100%]"></span>
</span>
<span class="overflow-hidden w-[20%] flex">
<span class="js_1 bg-black w-[100%]"></span>
</span>
<span class="overflow-hidden w-[20%] flex">
<span class="js_1 bg-black w-[100%]"></span>
</span>
<span class="overflow-hidden w-[20%] flex">
<span class="js_1 bg-black w-[100%]"></span>
</span>
<span class="overflow-hidden w-[20%] flex">
<span class="js_1 bg-black w-[100%]"></span>
</span>
</div> 上記はローディングを実装する一例です。以下のような流れを意識しましょう。
画面のちらつきを防ぐために、CSSであらかじめglobal-containerをdisplay: none;に設定します。
ローディング画面が終了した後、Gsapのtimelineメソッドを使用して、ローディングコンテンツをdisplay: none;にし、global-containerを表示させます。
三角形の装飾
三角形の装飾を追加し、z-indexでの重ね順を調整してアニメーションに奥行きを出しました。
loading-animation
ロゴ
- テキスト
- テキストテキスト
- テキスト
CSS
// 右上の直角三角形
.triangle {
width: 100px;
height: 100px;
background-color: red;
clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}
// 右下の直角三角形
.triangle {
width: 100px;
height: 100px;
background-color: red;
clip-path: polygon(100% 100%, 0% 100%, 100% 0%);
}
// 左上の直角三角形
.triangle {
width: 100px;
height: 100px;
background-color: red;
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
// 左下の直角三角形:
.triangle {
width: 100px;
height: 100px;
background-color: red;
clip-path: polygon(0% 100%, 0% 0%, 100% 100%);
}
まとめ
- Webサイトの基本的な仕組みは、HTMLが読み込まれ、その後にCSSが適用され、最後にJavaScriptが実行される
- ローディング画面とメインコンテンツを分けて管理する
- アニメーションをコントロールできる、Gsapのtimelineが便利