こんにちは。ジーニアスウェブの増田です。
夏が終わって秋が来ると思ったら、急に肌寒くなってきた今日このごろですが、いかがお過ごしでしょうか？
夏気分で半袖を着ていくと、少し風を引いてしまいそうな気温ですよね。
季節の変わり目と言うのはどの季節でもそうですが、体調管理にしっかり気をつけていきたいところです。
さて、皆さんはコーディングの際にスライダーやドロワーメニュー（ハンバーガーメニューとも）などのような、サイトの動きを自在に作れたら・・・
と感じたことはないでしょうか？
とはいえ、javascriptとかjqueryなど、あまり使用したことがない言語を使用するのはわからないことだらけで恐いと感じてしまい、なかなか手を出しにくい方も多いのではないかと思います。
そこで今回は、サイトで必要とされることの多い動きを簡単に実装できるプラグインをご紹介していこうと思います。
目次／このページでわかること
Drawer
近年、レスポンシブ化(スマホ化)という動きが出てきていますが、そのレスポンシブ対応のサイトで多く使われているもので、ボタンを押すと上や横からシュッとでてくるメニューを見たことはないでしょうか？ボタンを押すとメニューが出てきて×印をクリックすると戻る仕様のものです。それは、ドロワーメニューというもので、スマホ用のサイトを制作するのには必須急の動きになっています。そのドロワーメニューが簡単に実装できるjQueryプラグインが「Drawer」というものです。
「Drawer」ダウンロードはこちらから
「iScroll」ダウンロードはこちらから
Drawerを使用するにはiScroll.jsもセットで利用する必要があります。
こちらもあわせてダウンロードしておきましょう。
ダウンロードした後の使用方法は、
１．ヘッダーにjsファイルを読み込む(cssなどと似たような呼び出し方です)
2.実装したいタグにclassやidをつける
3.jsの記述をhead内に記述する（コピペでOK）
上記が主な流れになります。
今回は簡単なご紹介のみにとどめたいと思いますので、詳しく知りたい方は下記ページが参考になるかと思います。
https://blog.mismithportfolio.com/web/20150320drawer
スライダー
こちらもよく見る、と言うよりはもう一般的に実装されていることのほうが多いかと思います。多くのウェブサイトで、トップページにある大きな画像が時間差で切り替わったりしているもの。それがスライダーです。
スライダーは主流になっているが故に、スライダーの動きや形も多く存在しています。
自分で作成されている方も中にはいらっしゃると思いますが、多くの場合は自分で作らずとも、様々なプラグインで簡単に実装することが可能です。
今回は、私がよく使用しているスライダーのjsと、いつか使用したいと考えているjsをご紹介したいと思います。
bxSlider
こちらは私がよく使用するスライダーの一つです。
設定が簡単で、初めての方にもオススメできる扱いやすいスライダーだと思います。
slick
こちらも私が良く利用するスライダーです。
公式サイトにサンプルが掲載されているため、完成形がイメージしやすく、そのコードをコピーするだけでもある程度形が作れるため、おすすめです。
レスポンシブ対応もバッチリです。
Tilted Content Slideshow
そして最後がこちらのプラグインです。
これは私も利用したことがないので、いつか使ってみたいと考えているものになります。
普段とは少し違う動きを実装したいときなどに参考にしてみてはいかがでしょうか？
今回はサイト制作で比較的よく利用される動作を簡単に実装できるプラグインをご紹介致しました。
WordPressではWordPressプラグイン機能を使用して実装できるものも多くあるので、そちらで試してみるのもありだと思います。
私自身もまだまだこんな動きができたら良いのに・・・と思うことの連続なので、また皆さんにご紹介していこうと思います。
それでは今回はこれで失礼致します。