アニメーションの設定方法

animate.cssというライブラリを使用し、アニメーションを設定する方法を紹介します。
アニメーションは、ユニット・コンテナどちらにも設定できますが、お使いのbingo!CMSのバージョンにより設定方法が異なります。

アニメーションはスマートフォンからの閲覧に対応していません。対応させる場合は以下のTipsをご参考ください。
スマホでアニメーションを動作させる方法

※1 アニメーション設定はbingo!CMS 1.7.0以上より設定できます。
※2 スキンはv17のものをご使用ください。

bingo!CMS1.7.3 以上をご使用の場合

マルチコンテナとユニットv17シリーズ 以外の設定方法は「bingo!CMS1.7.0 〜 1.7.1 をご使用の場合」をご覧ください。

① アニメーションの設定方法

bingo!CMS1.7.3 以上

bingo!CMS1.7.3〜のマルチコンテナ・ユニットv17 シリーズの場合
  1. 画面上部「アニメーションクラス」のプルダウンから任意のアニメーションを選択します。
  2. ここでは例として「bounce」を設定し保存します。

※サンプル画像はタイトルv17のものです。

このテキストにbounceを設定しました。

② 動作時間の変更

bingo!CMS1.7.3 以上

bingo!CMS1.7.3〜のマルチコンテナ・ユニットv17 シリーズの場合
  1. 画面上部「速度」のプルダウンから任意の速度を選択します。
    速度は「非常にゆっくり」〜「非常に早い」の5段階から選択できます。
  2. ここでは例として「ゆっくり」に設定し保存します。

※サンプル画像はタイトルv17のものです。

このテキストのbounceを「ゆっくり」に設定しました。

③ 動作時間を任意に変更

bingo!CMS1.7.3 以上

bingo!CMS1.7.3〜のマルチコンテナ・ユニットv17 シリーズの場合
  1. まずはスタイルを追加します。
    ページ編集画面右上の「CSS/JS」をクリックします。
  2. 以下を「css」の入力欄に入力して保存します。
    ※●部分は任意の数字に置き換えてください。
    	<style type="text/css">
    	.my_speed  { animation-duration: ●s; } /*●秒*/
    	</style>
  1. 次に、ユニットまたはコンテナの編集画面を開き、「アニメーション用プルダウン」から任意のアニメーションを選びます。
    その後、「class」の入力欄に「my_speed」と入力し画面を保存します。

例では、まずCSS/JS設定画面で動作時間を10秒に設定しました。
続いてタイトルv17 に「bounce」を設定し、「class」に「my_speed」と入力しました。

このテキストのbounceを「10秒」に設定しました。

④ 動作の開始時間を任意に変更

bingo!CMS1.7.3 以上

bingo!CMS1.7.3〜のマルチコンテナ・ユニットv17 シリーズの場合

任意の数値(単位:ms)を入力すると、アニメーションを遅れて動作させることができます。
負の値を入力すると逆に動作の開始が早くなります。

※以下の画像はサンプルです。
すべて「fadeIn」を適用していますが、左の画像は+1000ms(+1秒)、右の画像は-1000ms(-1秒)のディレイを設定しています。

bingo!CMS管理画面 - アニメーション設定 - 動作サンプルのための画像1

1000ms(1秒)遅く始まるbounce

bingo!CMS管理画面 - アニメーション設定 - 動作サンプルのための画像2

通常のbounce

bingo!CMS管理画面 - アニメーション設定 - 動作サンプルのための画像3

1000ms(1秒)早く始まるbounce

⑤ 動作のタイミングを任意に変更

bingo!CMS1.7.3 以上

bingo!CMS1.7.3〜のマルチコンテナ・ユニットv17 シリーズの場合

任意の数値(単位:px)を入力すると、アニメーションを開始するタイミングを指定できます。

ページをスクロールして対象のユニットがウィンドウに表示された瞬間を0pxとします。

  • 正の値を指定
    ユニットがまだウィンドウに表示されていないうちからアニメーションが始まります。
  • 負の値を指定
    ユニットがウィンドウに表示されてからアニメーションが始まります。

bingo!CMS1.7.2 をご使用の場合

※マルチコンテナとカスタムv17 以外の設定方法は「bingo!CMS1.7.0 〜 1.7.1 をご使用の場合」をご覧ください。

① アニメーションの設定方法

bingo!CMS1.7.2

bingo!CMS1.7.2のマルチコンテナ・カスタムv17 の場合

bingo!CMS1.7.2 は、マルチコンテナとカスタムv17 のみ画面上部「アニメーションクラス」のプルダウンから任意のアニメーションを選択できます。

  1. アニメーションを設定したいユニットまたはコンテナを開きます。
  2. 「アニメーション用クラス」のプルダウンをクリックし、任意のアニメーションを選択して画面を保存します。
    (サンプル画像ではbounceを選択しています。)

※サンプル画像はカスタムv17 のものです。

② 動作時間の変更

bingo!CMS1.7.2

bingo!CMS1.7.2のマルチコンテナ・カスタムv17 の場合
  1. 動作時間を変更したい場合は、class欄に動作時間を追加します。
  2. 速くしたい場合は「animated_fast」
    遅くしたい場合は「animated_slow」と入力します。

※例:「bounce」の動作を遅くしたい場合は、「アニメーション用クラス」のプルダウンで「bounce」を選び、「class」に「animated_slow」と入力します。
※サンプル画像はカスタムv17 のものです。

③ 動作時間を任意に変更

bingo!CMS1.7.2

bingo!CMS1.7.2のマルチコンテナ・カスタムv17 の場合
  1. まずはスタイルを追加します。
    ページ編集画面右上の「CSS/JS」をクリックします。
  2. 以下を「css」の入力欄に入力して保存します。
    ※●部分は任意の数字に置き換えてください。
    	<style type="text/css">
    	.my_speed  { animation-duration: ●s; } /*●秒*/
    	</style>
  3. 次に、ユニットまたはコンテナの編集画面を開き、「class」の入力欄に「my_speed」と入力し画面を保存します。

例では動作時間を10秒に設定しました。

bingo!CMS1.7.0 〜 1.7.1をご使用の場合

① アニメーションの設定方法

bingo!CMS1.7.0 〜 1.7.1

  1. アニメーションを設定したいユニットまたはコンテナを開きます。
  2. まず、画面上部の「class」入力欄に「attach_anim」と入力します。
  3. 次に、エフェクトを追加します。
    「class」にエフェクトや動作時間を追加する場合は、必ず半角スペースを入力してから追加してください。
    設定時の規則は「attach_XXX」となります。XXXの部分を使いたいエフェクトの「Class Name」に置き換えてください。
    今回はバウンスを設定するので「attach_bounce」と入力します。
  4. 1〜3の手順を続けて入力すると「attach_anim attach_bounce」となります。

※こちらでアニメーションの動作を確認できます。
https://daneden.github.io/animate.css/(外部サイト)

② 動作時間の変更

bingo!CMS1.7.0 〜 1.7.1

  1. 動作時間を変更したい場合は、続けて動作時間を追加します。
  2. 速くしたい場合は「animated_fast」
    遅くしたい場合は「animated_slow」と入力します。

※例:bounceの動作を遅くしたい場合は「attach_anim attach_bounce animated_slow」と入力します。

③ 動作時間を任意に変更

bingo!CMS1.7.0 〜 1.7.1

  1. まずはスタイルを追加します。
    ページ編集画面右上の「CSS/JS」をクリックします。
  2. 以下を「css」の入力欄に入力して保存します。
    ※●部分は任意の数字に置き換えてください。
    	<style type="text/css">
    	.my_speed  { animation-duration: ●s; } /*●秒*/
    	</style>
  3. 次に、ユニットまたはコンテナの編集画面を開き、「class」の入力欄に「my_speed」と入力し画面を保存します。

例では動作時間を10秒に設定しました。

アニメーションの設定動画

ユニットにアニメーションを設定する

コンテナにアニメーションを設定する

その他のTips

ページトップ