- タイムアニメーションとは
- タイムアニメーションとは、ページが開かれてから自動で動くアニメーションのことです。「ページが開かれてから○秒後に動く」と設定でき、サイトに訪問したユーザーに最初にインパクトを与えられます。
今回は①②にわけて、動くウェブサイトを作成する方法を解説します。
②はこちら↓
【13Days/②】動くウェブサイトを作成して初心者っぽさをゼロにしよう！
12日目までに作成していた内容は主にHTMLやCSSを使用したサイト構築でしたが、今回の動くウェブサイト作成で主に使われる言語はJS(JavaScript)です。
コードを勉強しているとワンステップ上のスキルに感じるJS。しかしWebflowなら今までと同様、簡単にアニメーションを付けることができます。
今回は3パターンのアニメーションをつけていきます。すべて通しで作成すると、30分で終わらないかもしれないので、２回にわけて作成するなど各自工夫してみましょう。
Webflowのアニメーションについて
まずWebflowのアニメーションについて解説します。詳しい解説が必要ない方は次のセクションまでスキップしてOKです。
Webflowのアニメーションは制作画面の一番右、雷のようなマークから設定可能。アニメーションのトリガーは「エレメントトリガー」「ページトリガー」の大きくわけて2パターンあります。
エレメントトリガーとは
エレメントトリガーは要素を引き金に動きを付ける項目です。文章をクリックしたら文字色が変わるアニメーションや、画像をスクロールしたら背景画像を切り替えるなど設定可能。Apple Storeのようなデザインもこういった機能を用いて作られていますよ。
どんなアニメーションをつけれるか一つ一つ解説しようと考えたのですが、文字通りなので解説を省きます。「英語だと何書いているかわからない」という方がいれば必殺『Google翻訳』を使用しましょう。
ページトリガーとは
ページトリガーはページ全体が引き金となり、アクションを起こします。ページを開いた時やページをスクロールしている時などです。
エレメントトリガーのスクロールとの違いは要素をスクロールしているかページをスクロールしているかの違いです。実際にどんなアクションが得れるのか試してみると理解が早まります。
アニメーションの付け方
今回、最初に使うのはPage loadなので、ここからはPage loadを基準に解説していきます。
Page loadを開くと「いつアクションが起こるか」を選択できます。さらにプルダウンでは「なんのアクションを起こすか」を選択してアニメーション設定を開始します。Page loadではアニメーションしか選択できませんが、他のトリガーを選択したときは様々なアクションが表示されますよ。
今回はページロード中のアニメーションを作るわけではないので、ページの読み込みが終了した時にアニメーションが始まるようにします。
アニメーションを選択すると、次にどんなアニメーションを付けるか選択できるので「＋」ボタンからアニメーションを作成しましょう。
最初に名前を付けます。わかりやすく「Hero image grid」で作成。再び「＋」をクリックして、アニメーションを選択します。日本語翻訳しているとひと目でわかりますね。
※日本語翻訳をずっとしていてもいいとは思うのですが、ウェブ言語になれるために次から英語表記に戻して作成します。
タイムアニメーション
タイムアニメーションとはページが開かれてから自動で動くアニメーションのことです。「ページが開かれてから○秒後に動く」と設定することができ、サイトに訪問したユーザーに最初にインパクトを与えることができます。
今回はHero Imageにアニメーションをつけていこうと思います。
画像を分割して表示
画像をアップロード
サンプルを使用している方はメイン画像に「Hero background.jpg」を使用していると思います。今は1枚の画像を入れていますが、アニメーションを付ける都合上、グリッドを用いて6枚別々の画像として挿入しましょう。
サンプルのフォルダ名「Hero images assets」にそれぞれ単体の画像が入っているので、6枚の画像をWebflowのアセットにアップロードします。
※今回このパートは僕もサンプルを使って作成します。
サンプルを使用していない方は6枚の画像を用意して取り組みましょう。自分のポートフォリオを作成したい方はポートフォリオに載せたいものを入れるのが良いと思います。
※注意
自分の画像を使用する方は画像の大きさを全て揃えましょう。ウェブサイトで枠を指定できますが、全て同じ大きさに画像を加工したほうが容量を軽くできます。
グリッドを入れて6分割
6つのフィールドを作成し、用意した6つの画像を入れていきます。
- Containerの下にDivブロックを入れる ・Height 500px
- グリッドを入れ、3列2行にする
- 画像を挿入
- グリッドの間隔を40pxに調整
- コンタクトフォームでも使用した、薄いボックスシャドウを設定
画像6枚にクラスを忘れずにつけましょう。6枚の画像は全て同じクラスにします。
実際に動きをつけてみる
グリッドの回転
先程作成したグリッドを選択し、アニメーションを作成しましょう。まずはグリッドを回転させます。
- Hero image gridを選択
- ページトリガーから「Page load(ページの読み込み)」を選択
- ページの読み込みが終了した時にアニメーションが始まるように設定
- アニメーションの名前「Hero image grid」
- 画像を参考にRotateを設定
①は奥にクルリと回す項目ですが、今のままでは設定をしてもあまり奥行きを感じられません。そこでアニメーションの設定から一度離れてDivブロックに3Dの設定を施します。
- Hero image gridの親要素のDivブロックを選択。
- クラス「Hero camera」を付ける
- 2D＆3D transformsからDistance 1000pxを設定 ※Distanceが大きければ大きいほど奥行きが深く感じられるはずです。
プレビューを使用して奥行きを見てみましょう。なんとなく違いがわかるでしょうか？
①設定前②設定後
あとはHero cameraを選択したまま飛び出た部分を見えないように、オーバーフローを設定してグリッドの回転は終了です。
ページロードと共に出現するアニメーション
要素の透明度を操ることで要素を出現させたり、消したりできます。アニメーションで透明度をいじるのはOpacity。
『グリッドが消えている→見える』に設定したいので、初期値0％から徐々に100％になるように設定します。まずはアニメーション設定の下にある、チェックボックスを使用して初期値を設定しましょう。
初期値を設定したら、次にもう一つOpacityを作成し100％にします。またTimingの項目にあるDurationの数字を変更することで「何秒かけて表示するか」を設定できます。２つ目の設定は３秒にしておきましょう。
これで消えている状態からゆっくり見えるように設定できました。
VWを用いてサイズ変更
グリッドが回転して端がすこし隠れるぐらいがちょうどいいのでHero cameraのHeightを調整しましょう。
- Hero cameraを選択 Height 35vwに設定
ここで使うのはPXの単位ではなくVWです。VW、VHは画面の大きさによって自動で大きさが変わる単位。レスポンシブデザインを意識しなくても、表示が崩れることがありません。
VWは画面の横のサイズ。VHは画面の高さで文字が伸縮します。
グリッドの間隔もVWで指定しましょう。
- Hero image gridを選択 画像の間隔を３VWに変更
全サイズで表示が崩れないことを確認して次に進みます。
＞＞＞＞＞＞＞②へつづく
よくある質問
Webflowのアニメーションはどこから設定できますか？
制作画面の一番右にある雷のようなマークから設定できます。トリガーは「エレメントトリガー」と「ページトリガー」の大きく2パターンがあります。
エレメントトリガーとページトリガーの違いは何ですか？
エレメントトリガーは要素を引き金に動きを付けるもので、ページトリガーはページ全体が引き金となってアクションを起こします。スクロールの場合、要素をスクロールしているかページをスクロールしているかの違いです。
回転アニメーションで奥行きが感じられないときはどうすればいいですか？
親要素のDivブロックに2D＆3D transformsからDistanceを設定します。記事ではDistance 1000pxを設定しており、値が大きいほど奥行きが深く感じられます。
VW・VHとはどんな単位ですか？
画面の大きさによって自動で大きさが変わる単位です。VWは画面の横のサイズ、VHは画面の高さに応じて伸縮し、レスポンシブデザインを意識しなくても表示が崩れません。
