bingo!CMS v1.7 マニュアルサイト

1. 画面上部「アニメーションクラス」のプルダウンから任意のアニメーションを選択します。
2. ここでは例として「bounce」を設定し保存します。

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

1. 画面上部「速度」のプルダウンから任意の速度を選択します。
   速度は「非常にゆっくり」〜「非常に早い」の5段階から選択できます。
2. ここでは例として「ゆっくり」に設定し保存します。

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

3. 次に、ユニットまたはコンテナの編集画面を開き、「アニメーション用プルダウン」から任意のアニメーションを選びます。
   その後、「class」の入力欄に「my_speed」と入力し画面を保存します。

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

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

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

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

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

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

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

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

1. まずはスタイルを追加します。
   ページ編集画面右上の「CSS/JS」をクリックします。
2. 以下を「css」の入力欄に入力して保存します。
   ※●部分は任意の数字に置き換えてください。

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

3. 次に、ユニットまたはコンテナの編集画面を開き、「class」の入力欄に「my_speed」と入力し画面を保存します。

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

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/（外部サイト）

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

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

1. まずはスタイルを追加します。
   ページ編集画面右上の「CSS/JS」をクリックします。
2. 以下を「css」の入力欄に入力して保存します。
   ※●部分は任意の数字に置き換えてください。

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

3. 次に、ユニットまたはコンテナの編集画面を開き、「class」の入力欄に「my_speed」と入力し画面を保存します。

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