BLOG

【Web制作メモ】Animate.css とドロワーメニュー

2016.04.20  Wrote by Toyoaki Notazawa

kvacss

  

デザイナーの野田沢です。

 

 

先日このような条件のwebサイトを作成しました。
[動きがある][ドロワーメニュー][レスポンシブ]というもの。

 

そこで“動きがある”はAnimate.cssで実装することにしました。
それに合わせてドロワーメニューとレスポンシブを実装していきます。

 

 

 

実装

Animate.cssは以前にも実装経験があったのですんなりといい感じに!レスポンシブは本業なので問題なく実装できました。

あとはドロワーメニューです。

今回はCSSのみで実装できる「pure-drawer 」を組み込んでみました。

 

動きもなめらかでとってもいい感じ!で、完成!!

………と思いきや先程までぐりんぐりん動いていたAnimate.cssの部分が静止しているじゃありませんか。

Animate.cssでぐりんぐりんさせているブロックは画面スクロールに合わせて作動するように設定していたのですが、いくらスクロールしても微動だにしません。

 

問題を探ります。

 

 

 

原因はpure-drawer.cssで内包divに対して与えられている height:100% でした。

height:100%なのでscrollで実行されるAnimate.cssのdoがどうやら認識されないようです。

色々検証してみましたがhight:100%を指定しないとドロワーが作動しません。

 

でもhight:100%を指定するとぐりんぐりんしません。

 

参りました。

 

せっかく完成したのですが(いや完成してないのだけど)別のドロワーメニューに差し替えることにしました。

 

そこで巡りあったのがこちらの「JSを使用しないドロワーメニュー」です。

 

 

 

完成

導入方法もとってもシンプル!

個人的には最初に使用した「pure-drawer 」よりもhtml記述がシンプルで好みです。

cssもシンプルでカスタマイズも簡単にできました。

問題のAnimate.cssとの相性もバッチリでぐりんぐりん動いてくれます。

 

 

 

ちょっとニッチな例かもしれないですが、もし似たような症状でお困りの方は参考にしてみてください。

 

それではまたっ!

その他の記事を見る