ハンバーガーメニュー

スライドインタイプのスマホメニューなんかで、メニュー領域外をタップした時にメニューが閉じる動作。
スマホアプリのUIとしてはもはやデフォルトと言えますよね。
当然、WEB上でも同じ体験が求められます。WEBはどんどんアプリ化されていきますから、寄せていくのは必然。

という事で、jQueryを使ってこれを再現しました。

▼HTML※Bootstrap3ベース

▼css

▼jQuery

タブ切り替え

簡単なタブによるコンテンツの表示切替を実装するコードです。

◆jQuery

◆HTML

◆Javascript

参考:http://www.finefinefine.jp/jquery/kiji422/

JS:class付与とスムーススクロール

jqueryを使ってclass付与と同時にアンカー要素にスムーススクロールを実装します。
最初、class付与の処理にreturn false;を書いていたので、処理が通らずスムーススクロールが実行されませんでした。
こういったイベントのバブリング(伝播)について簡単にまとめると、

・クリックなどのイベントは、子要素から親要素へと伝播される(バブリング)
・preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。
・return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルする。

引用元:http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html

jQuery: slideMenu

jQueryのslideToggleとtoggleClassを使って、スマホ用スライドメニューを作成します。
ライブラリはここからCDNで読み込みましょう。

[jQuery]



Swiper.js


http://idangero.us/swiper/

Swiper.jsはレスポンシブ対応のコンテンツスライダーとしておすすめです。

DEMOページにはオーソドックスなカルーセル以外にも、様々なタイプのサンプルが用意されています。

さらに、充実したAPIとコールバックによって様々な関数処理を実行することができます。

コールバックとは… 他関数の引数として、特定のタイミングで実行することができます。
例)「処理Aが終わった後に、処理Bを実行したい」

過去の使用実績としては、全画面タイプのスライドを6枚まで自動再生+マウスホイールでもページ送り、
最後のスライドに到達した時点でホイール判定を無効化し下部のコンテンツを見せる。
といったスライダーを実装しました。

基本のHTML構造としては下記。


CSSはこちら

Script部分はこんな感じ

jQueryのスライダー表示プラグイン「bxslider」

jQueryのプラグイン「bxslider」を使えば簡単にスライダーを導入する事ができます。

まず下記からダウンロード
http://bxslider.com/

ダウンロードしたファイルで下記の必要なファイルをディレクトリに移します。

・imagesフォルダ
・pluginsフォルダ
・jquery.bxslider.css
・jquery.bxslider.min.js

ヘッダー内に下記コードを読み込みます。

次にHTMLの表記、例えば4枚のスライダーを表示したい場合
下記のようにリストにclass=”bxslider”を記述

最初にbxsliderを読み込んだ後にの下記のコードを記述すればbxsliderが動きます。

画像を拡大表示させるjQuery[fancybox]

fancy0

写真等の画像をさせる事ができる、
JQueryのfancyboxの使い方です。

下記サイトでファイルをダウンロードします。
http://fancybox.net/

ダウンロードして
解凍したフォルダ内の「fancybox」フォルダを読み込みたいサイトにコピーします。
fancy1

今回は「common」の「js」フォルダに入れています。

ますヘッダー内に下記コードを記述してfancyboxを読み込みます。

次にスクリプトタグも記述します。

「.group」の箇所には任意のグループ名を付けてください。

「cyclic: true」の箇所はループ表示するかどうかを指定しています。
この場合はtrueなのでループ表示がONになっています。

そして下記のようにHTMLを組むとクリックすると拡大画像が表示されます。

「rel」で任意の名前を付けた同一のグループ名を付ける事によって
拡大表示した時に同じグループ名内でループ表示されます。

JQueryでスムーズスクロール

今回はJQueryでスムーズスクロールする表現についてです。

通常、ページ内リンクをする場合

というIDに

というリンクを指定してページ内の移動を指定するのですが。

この状態のままだとクリックした時の動きが急なので見づらく、ページを見ている側に対して優しくありません。
それに対してjQueryを使うことによって下に流れるようなスムーズなスクロール表現ができます。

まずhead内にJQueryを読み込みます。

その直下にスクリプトを書きます。

これで完成です。

設定としては下記の箇所

関数「speed」内の数字を変えることによってスクロール速度を変える事ができます。