「アニメーションライブラリ」の開発について

ホームページの「アニメーション」の種類

ホームページ制作を行う際に「アニメーション」が利用される機会も増えつつあり、「アニメーション」を効果的に取り入れることで「ホームページに訪れたユーザー」に注目してもらいたい部分の「視認性を高めること」ができます。

ホームページにアニメーションを設定するための方法には、

「CSS」を利用したアニメーション
「Javascript」を利用したアニメーション

などがあります。

また「ホームページのアニメーションの種類」にも下記のようにさまざまなものがあります。

フェードアップアニメーション: ユーザーが視認できる状態になった時に開始するアニメーション
ループアニメーション: 繰り返し表示されるアニメーション
コントロールアニメーション: ユーザーの操作によってコントロールされるアニメーション

これまでご依頼いただいたホームページ制作では「フェードアップアニメーション」を設定する機会が多くありました。

ページを下にスクロールしていくと、アニメーションしながら「文章」や「画像」などが表示される「シンプルなアニメーション」のため、ご覧になる機会も多いのではないでしょうか。

「アニメーション設定」の時間的課題とは？

あるご依頼で「ページをスクロールすると、アニメーションしながらコンテンツや画像がどんどん表示されるようにしたい」とご要望をいただきました。

ホームページの制作が進み「アニメーションを設定する箇所」が増える中で、「アニメーション設定データの管理の難しさ」を感じるようになりました。

その際に行っていた「アニメーション設定のイメージ」は、

のようになり、

「HTML」と「CSS」の両方に「アニメーションに関する設定」が分散しているため、例えば、アニメーションを修正しようとすると、

のように２段階での確認と修正作業が必要となり、「アニメーションの調整と修正を行う時間」が増える原因となっていました。

数十か所のアニメーションを調整・修正すると「１日～２日がかりの作業」となることもあります。

「アニメーションライブラリ」の開発へ

まず「アニメーションの調整と修正時間を短縮できるようなライブラリ」が無いかを探していきました。

設定が容易なものもいくつか見つかったのですが、「利用しない機能」が内包されていて「ライブラリのファイルサイズが大きい」ことなどもあり「必要な機能」のみが内包された「シンプルなアニメーションライブラリを作ろう」と思い始めました。

そして、利用する機会が多かった「フェードアップアニメーション」を容易に設定できる「シンプルなアニメーションライブラリ」を作ることにしました。

はじめに、「現在のアニメーションの設定」では、「HTML」と「CSS」に設定が分けられているため、「HTML」に「アニメーション設定を集約する方法」を模索していきました。

さまざまな方法を調べる中で「TailWindCSS」のように「設定内容をCSSのクラス属性」の中に記述できたら「HTML」のみで「アニメーション設定」が完結できる気がしていました。

このアイデアを元にプログラムを試作していき、「アニメーション設定の記述フォーマット」を考えたり「アニメーションの動作チェック」を行う日々が始まりました。

いろいろと試していきながら、利用する機会が多かった「CSSのtransformプロパティ」で指定できる下記の「４つのアニメーション」を対象にすることにしました。

移動
拡大、縮小
傾斜
回転

ライブラリを作成する中で「時系列」に沿った「連続的なアニメーション」を作りたいと思うようになり、ファイルサイズに留意しながら機能を追加していきました。

これまでお話した過程を経て、完成したアニメーションライブラリが「fadeup.js」です。

普段携わらせていただいているホームページ制作でのみ利用していましたが、「MITライセンス」で公開することにしました。

「fadeUp.js」の利用方法

「fadeUp.js(Github)」には英語の利用方法のみ記載しているため、これから利用方法をご説明していきたいと思います。

「fadeUp.js」「fadeUp.css」「jQuery」のダウンロードと設定

「fadeUp.js(Github)」から「fadeUp.js」「fadeUp.css」をダウンロード後、任意のフォルダに配置して読み込み設定を行います。

その後「jQuery」をダウンロードし、読み込み設定を行います。

【設定例】


                    <link rel='stylesheet' href='fadeUp.css'>
<script src='jquery-xxx.min.js'></script>
<script src='fadeUp.js'></script>

アニメーションする「HTML要素」への設定

アニメーションをするHTML要素」の「class属性」に「fu」を設定します。

【設定例】


                    <p class="fu">Animation Element</p>

さらに、「アニメーションするHTML要素」にそれぞれのアニメーションに対応した「class属性の値」を設定します。

設定する内容は下記のようになります。

移動

標準設定

「移動のアニメーション」は下記のように設定します。


                    fuTsl_開始X座標_開始Y座標_開始座標単位_終了X座標_終了Y座標_終了座標単位

例えば、


                    <p class="fu fuTsl_0_50_px_0_0_px">Animation Element</p>

のように設定をすると


                    X座標：0px Y座標:50px

から「移動のアニメーション」を開始し、


                    X座標：0px Y座標:0px

の位置で「移動のアニメーション」が終了します。

終了位置設定の省略


                    <p class="fu fuTsl_0_50_px">Animation Element</p>

のように「終了の座標」を記述しない場合は、「指定した開始座標位置」から「HTML要素の元々の配置位置」まで「移動のアニメーション」を行います。

タブレット画面サイズでのアニメーションの切替

タブレット画面サイズで行うアニメーションを指定したい場合は、「fuTabTsl」を追加していきます。

例えば、


                    <p class="fu fuTsl_0_50_px_0_0_px fuTabTsl_0_50_px_0_0_px">Animation Element</p>

のように「fuTabTsl」の設定を追記します。

モバイル画面サイズでのアニメーションの切替

モバイル画面サイズで行うアニメーションを指定したい場合は、「fuMobTsl」を追加していきます。

例えば、


                    <p class="fu fuTsl_0_50_px_0_0_px fuMobTsl_0_50_px_0_0_px">Animation Element</p>

のように「fuMobTsl」の設定を追記します。

拡大・縮小

標準設定

「拡大・縮小のアニメーション」は下記のように設定します。


                    fuScl_開始X方向スケール_開始Y方向スケール_開始Z方向スケール_終了X方向スケール_終了Y方向スケール_終了Z方向スケール

例えば、


                    <p class="fu fuScl_0.5_0.5_0.5_1.5_1.5_1.5">Animation Element</p>

のように設定をすると


                    X方向：50% Y方向：50% Z方向：50%

の状態から「拡大・縮小のアニメーション」が開始し、


                    X方向：150% Y方向：150% Z方向：150%

の状態で、「拡大・縮小のアニメーション」が終了します。

終了スケール設定の省略


                    <p class="fu fuScl_0.5_0.5_0.5">Animation Element</p>

のように「終了のスケール」を記述しない場合は、「指定した開始スケール」から「HTML要素の元々のスケール」まで「拡大・縮小のアニメーション」を行います。

タブレット画面サイズでのアニメーションの切替

タブレット画面サイズで行うアニメーションを指定したい場合は、「fuTabScl」を追加していきます。

例えば、


                    <p class="fu fuScl_0.5_0.5_0.5_1.5_1.5_1.5 fuTabScl_0.8_0.8_0.8_1.0_1.0_1.0">Animation Element</p>

のように「fuTabScl」の設定を追記します。

モバイル画面サイズでのアニメーションの切替

モバイル画面サイズで行うアニメーションを指定したい場合は、「fuMobScl」を追加していきます。

例えば、


                    <p class="fu fuScl_0.5_0.5_0.5_1.5_1.5_1.5 fuMobScl_0.8_0.8_0.8_1.0_1.0_1.0">Animation Element</p>

のように「fuMobScl」の設定を追記します。

傾斜

標準設定

「傾斜のアニメーション」は下記のように設定します。


                    fuSkw_開始X角度_開始Y角度_終了X角度_終了Y角度

例えば、


                    <p class="fu fuSkw_45_45_20_20">Animation Element</p>

のように設定をすると


                    X角度：45度 Y角度：45度

から「傾斜のアニメーション」が開始し、


                    X角度：20度 Y角度：20度

で、「傾斜のアニメーション」が終了します。

終了スケール設定の省略


                    <p class="fu fuSkw_45_45">Animation Element</p>

のように「角度のスケール」を記述しない場合は、「指定した開始角度」から「HTML要素の元々の角度」まで「傾斜のアニメーション」を行います。

タブレット画面サイズでのアニメーションの切替

タブレット画面サイズで行うアニメーションを指定したい場合は、「fuTabSkw」を追加していきます。

例えば、


                    <p class="fu fuSkw_45_45 fuTabSkw_30_30">Animation Element</p>

のように「fuTabSkw」の設定を追記します。

モバイル画面サイズでのアニメーションの切替

モバイル画面サイズで行うアニメーションを指定したい場合は、「fuMobSkw」を追加していきます。

例えば、


                    <p class="fu fuSkw_45_45 fuMobSkw_30_30">Animation Element</p>

のように「fuMobSkw」の設定を追記します。

回転

標準設定

「回転のアニメーション」は下記のように設定します。


                    fuRot_開始X角度_開始Y角度_開始Z角度_終了X角度_終了Y角度_終了Z角度

例えば、


                    <p class="fu fuRot_0_0_45_20_20_0">Animation Element</p>

のように設定をすると


                    X角度：0度 Y角度：0度 Z角度：45度

から「回転のアニメーション」が開始し、


                    X角度：20度 Y角度：20度 Z角度：0度

で、「回転のアニメーション」が終了します。

終了角度設定の省略


                    <p class="fu fuRot_0_0_45 fuTabRot_0_0_45">Animation Element</p>

のように「回転角度」を記述しない場合は、「指定した開始角度」から「HTML要素の元々の角度」まで「回転のアニメーション」を行います。

タブレット画面サイズでのアニメーションの切替

タブレット画面サイズで行うアニメーションを指定したい場合は、「fuTabRot」を追加していきます。

例えば、


                    <p class="fu fuRot_0_0_45 fuTabRot_0_0_45">Animation Element</p>

のように「fuTabRot」の設定を追記します。

モバイル画面サイズでのアニメーションの切替

モバイル画面サイズで行うアニメーションを指定したい場合は、「fuMobRot」を追加していきます。

例えば、


                    <p class="fu fuRot_0_0_45 fuMobRot_0_0_45">Animation Element</p>

のように「fuMobRot」の設定を追記します。

※「タブレット」と「モバイル」の両方とも「アニメーション設定」は「fuTsl・fuScl・fuSkw・fuRot」と同様の方法で記述できますが、必ず「fuTsl・fuScl・fuSkw・fuRot」の設定と共に記述する必要があります。

「アニメーションの切替ポイント」の設定

「タブレットの切替を行う画面の横幅」は、「fadeUp.js」内の


                    const TAB_BREAKPOINT = 1024;

の値で「アニメーション切替ポイント」の設定ができます。

「モバイルの切替を行う画面の横幅」は、「fadeUp.js」内の


                    const MOB_BREAKPOINT = 767;

の値で「アニメーション切替ポイント」の設定ができます。

タブレット画面サイズ以下でアニメーションを停止

「class属性の値」に「fuNoTab」を追記することで、タブレット画面サイズ以下でのアニメーションを停止します。


                    <p class="fu fuSkw_45_45 fuNoTab">Animation Element</p>

モバイル画面サイズ以下でアニメーションを停止

「class属性の値」に「fuNoMob」を追記することで、モバイル画面サイズ以下でのアニメーションを停止します。


                    <p class="fu fuSkw_45_45 fuNoMob">Animation Element</p>

アニメーションの補足情報

下表の設定内容を元に「アニメーションの補足情報」を設定することができます。

アニメーションの補足情報	クラス名
アニメーション時間	fuTime
アニメーション開始までの遅延時間	fuDelay
アニメーション動作関数	fuTimeFunc

例えば

アニメーション時間：５秒（5000ms）
アニメーション開始までの遅延時間:３秒(3000ms)
アニメーション動作関数:イーズインアウト

のように設定する場合は、


                    <p class="fu fuTsl_0_50_px_0_0_px fuTime_5000 fuDelay_3000 fuTimeFunc_ease-in-out">Animation Element</p>

のように記述します。

まとめ

「ホームページ制作」に携わる中で「この作業をより効率的に行いたい」と思ったことは「プログラム」や「ツール」を開発することで、解決出来る方法が無いかを日々考えています。

今回は、私の開発した「アニメーションライブラリ」についてご紹介させていただきましたが、今後も何か開発することがあれば公開していきたいと思っています。

コンテンツ一覧

「fadeUp.js」の開発について

ホームページの「アニメーション」の種類

「アニメーション設定」の時間的課題とは？

「アニメーションライブラリ」の開発へ

「fadeUp.js」の利用方法

「fadeUp.js」「fadeUp.css」「jQuery」のダウンロードと設定

アニメーションする「HTML要素」への設定

移動

標準設定

終了位置設定の省略

タブレット画面サイズでのアニメーションの切替

モバイル画面サイズでのアニメーションの切替

拡大・縮小

標準設定

終了スケール設定の省略

タブレット画面サイズでのアニメーションの切替

モバイル画面サイズでのアニメーションの切替

傾斜

標準設定

終了スケール設定の省略

タブレット画面サイズでのアニメーションの切替

モバイル画面サイズでのアニメーションの切替

回転

標準設定

終了角度設定の省略

タブレット画面サイズでのアニメーションの切替

モバイル画面サイズでのアニメーションの切替

「アニメーションの切替ポイント」の設定

タブレット画面サイズ以下でアニメーションを停止

モバイル画面サイズ以下でアニメーションを停止

アニメーションの補足情報

まとめ