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

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

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

animate.cssというライブラリを使用し、アニメーションを設定する方法を紹介します。
アニメーションは、ユニット・コンテナごとに設定することができます。
お使いのbingo!CMSのバージョンにより、設定方法が異なります。
※1 アニメーション設定は「bingo!CMS 1.7.x」をご利用の方のみ設定できます。
※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設定画面にスタイルを追加します。
    ページ編集画面右上の「CSS/JS」をクリックします。
  2. 以下を「css」に入力します。

    <style type="text/css">
    .my_speed  { animation-duration: ●s; } /*●秒*/
    </style>

    ※上記の●部分を任意の数字に置き換えてください。
  3. ユニットまたはコンテナの編集画面を開き、「アニメーション用プルダウン」から任意のアニメーションを選びます。
  4. 「class」に「my_speed」と入力し保存します。

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

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

bingo!CMS1.7.3

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

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

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

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

通常のbounce

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設定画面にスタイルを追加します。
    ページ編集画面右上の「CSS/JS」をクリックします。
  2. 今回は10秒に変更します。
    以下をcssに記入します。
    <style type="text/css">
    .my_speed  { animation-duration: 10s; } /*10秒*/
    </style>
    ※秒数を変更したい場合は、上記の数字部分を置き換えてください。
  3. 今までと同様に、設定したいユニットまたはコンテナの「class」に「my_speed」と入力します。
    これで、動作時間を任意に変更することができます。

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」となります。

    エフェクトの「Class Name」一覧は下記を参照してください。
    https://github.com/daneden/animate.css
    「3.Finally you need to add one of the following classes:」と書かれたところに一覧があります。

    こちらで動作の確認ができます。
    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設定画面にスタイルを追加します。
    ページ編集画面右上の「CSS/JS」をクリックします。
  2. 今回は10秒に変更します。
    以下をcssに記入します。
    <style type="text/css">
    .my_speed  { animation-duration: 10s; } /*10秒*/
    </style>
    ※秒数を変更したい場合は、上記の数字部分を置き換えてください。
  3. 今までと同様に、設定したいユニットまたはコンテナの「class」に「my_speed」と入力します。
    これで、動作時間を任意に変更することができます。

ページトップ