本ページはVer3.00(mrp09の場合はVer1.00)から提供となるアニメーションエフェクトの説明コンテンツです。
本機能はanimate.cssとwow.jsにより利用可能となっている為、旧Verではご利用頂けない仕様となりますので予めご了承下さい。
簡単な使い方
動かしたいブロック要素やimg要素など、classやid属性が付与できるものすべてに適応可能です。
たとえば付与したいものがclass属性であった場合
|
1 |
<img src="https://hp-morph.com/customer/struct/wp-content/uploads/hoge.png" alt="hoge" class="animated bounce infinite" /> |
といった形で”animated”と”bounce”と”infinite”というclass属性を付与すると
このように動きます。
このclass属性の指定はそれぞれ以下の意味を持っています。
- animated ･･･アニメーションを起動させるコードです。動かしたいときは必須で入力が必要です。
- bounce ･･･アニメーションのコードです。コレ以外にも複数用意されています。
- infinite ･･･記述の通り無限に動く指定です。無限に動く指定をしない場合は不要なコードです。
組み合わせ方法と注意点
組み合わせると以下のような形で利用する事が可能です。
2カラムのdivタグにアニメーションを施す
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
|
1 2 3 4 5 6 7 |
<div class="column2_50 animated fadeInUp infinite"> <img src="https://hp-morph.com/customer/struct/wp-content/uploads/hoge.png" alt="hoge" /> </div> <div class="column2_50 animated fadeInDown infinite"> <p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。<br /> 説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p> </div> |
ですが、class属性の中にinfiniteが入っているのでずっと動いています。あまり実用性の無い動きとなっています。
この動きであれば、1回動けば十分です。
ですので、自然にclass属性のinfiniteをはずすと以下のようになります。
class属性にinfiniteをはずす
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
|
1 2 3 4 5 6 7 |
<div class="column2_50 animated fadeInUp"> <img src="https://hp-morph.com/customer/struct/wp-content/uploads/hoge.png" alt="hoge" /> </div> <div class="column2_50 animated fadeInDown"> <p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。<br /> 説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p> </div> |
上記は動きましたでしょうか？
もし動いていないと思われるのであれば、この画面のまま、F5キーを押して頂くと1回のみ表示されているかと思います。
初め動いていないと感じた場合はもう一度ブラウザ上部にスクロールしてからご覧いただくと同じように動いていないように感じるかと思います。
これはアニメーションがブラウザをロードしたタイミングでアニメーションの挙動が開始される為です。
最後に
今までの対処はアニメーションの動かし方でしたが、次はいつのタイミングでアニメーションを動かすのか？の説明をしていきます。