css

百聞は一見に如かず。
ぜひリンク先をご覧いただきたい。
楽しいアニメーションが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”
で、表示スピードの調節ができます。

event manager

Home

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

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

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

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

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

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

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