css

ほぼcssのみでアニメーションするライブラリが愛おしい

http://mynameismatthieu.com/WOW/

百聞は一見に如かず。
ぜひリンク先をご覧いただきたい。
楽しいアニメーションが1つのライブラリでcssのみで制御できるという素晴らしいもの。

HOW TOの方に分かりやすく解説してあるので、そちらをご覧いただくほうが本当に早い。
http://mynameismatthieu.com/WOW/docs.html

headにスタイルを読み込む

<link rel="stylesheet" href="css/animate.css">

ライブラリを読み込む

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

これでセットアップは完了。
 
 

<div class="wow"></div>

wowがライブラリを使う宣言になっているのでjsに設定する必要はないです。
あとはお好みで、
 

<div class="wow bounceInUp">ほげー</div>

としてあげれば、ぼよーんと跳ねるアニメーションが!
 

超かんたんですね。
先ほどのサイトのトップページがライブラリ一覧になるので、この動き使いたい!
と思ったらコンソールを覗いてみて下さい。
細かいカスタマイズもできるので、JSマスターの方はカスタマイズに挑戦してみても良いかと思います。
 

【おまけ】
data-wow-delay=”0.5s”
で、表示スピードの調節ができます。

events managerで地図が表示されなくなったら


event manager
http://wp-events-plugin.com/

APIの確認もした。
API登録時にドメイン登録もした。
所有者証明もした。
WPの管理画面からAPIキーの登録もした。
Google Maps 連携を有効にしますか?も「はい」に設定した。

それでも管理画面には表示されているのにフロント(見えているページ)側に表示されないという時試してみて欲しい。

マップの幅の初期値をピクセルに戻す。

これ。
もし%で表示されなくなった人は試してみて欲しい。これで直ります。

どうしても%に設定したい人は、cssでem-location-map-containerのクラスを!importantで無理やり%に直してしまえばいいと思います。

<style>
.em-location-map-container {
width:100%!important;
height:400px!important; /* 縦のサイズはお好みで */
}
</style>