JavaScriptで作るマウスホバーで開閉するドロップダウンメニューの作り方
今回はよくグローバルナビなどで使われているドロップダウンメニューをJavaScriptで実装していきます。 jQueryで実装した記事はたくさんありますが、JavaScriptを使って実装した記事は少なかったので、備忘録…
今回はよくグローバルナビなどで使われているドロップダウンメニューをJavaScriptで実装していきます。 jQueryで実装した記事はたくさんありますが、JavaScriptを使って実装した記事は少なかったので、備忘録…
今回はスクロールに合わせてヘッダーサイズを変化させる実装を紹介します。 前回はヘッダーを単純に固定させる方法を紹介しました。 ヘッダーを固定で表示させたい時、高さが大きいと見える範囲が狭まりユーザーに不便な思いをさせてし…
今回はページを遷移せず、jQueryでタブの切り替えを行う実装を紹介します! まずはデモページでこれから作るものを確認します。 デモサイト 【切り替えタブの作り方】HTML編 解説です。(わかる人は読み飛ばしOK) まず…
パララックス(parallax)は直訳すると視差という意味です。 スクロールすると同時に次のコンテンツが覆いかぶさるような、不思議な動きをし、奥行きやストーリー性を出してくれる効果があります。 今回はそんなパララックスサ…
サイトを開いた時に、いきなりトップページが表示されるのではなく、まずはロゴがふわっとフェードインしてからトップページが表示されるサイトがありますよね。 美容サロンや旅館のサイトでよく使われていて、優しく柔らかい印象を与え…
今回はECサイトなどでよく見かける、複数商品を一気にスライドさせる方法を紹介します。 世の中には様々なスライダーのプラグインがありますが、今回はその中でも最も汎用性が高く、オプション設定も豊富な「slick(スリック)」…
画面右上の三本線のアイコンをクリックしたら、右側からシュッとメニューが出てくる作りにします。 まずはデモサイトを見てみましょう。 デモサイト いつもどこから手をつけていいのか迷ってしまうので手順をつけて説明していきます。…
モーダルウィンドウとは、会員登録ボタンを押した時や、画像を押した時、エラーを知らせる時などにポップアップで表示されるものをモーダルウィンドウといいます。 プラグインもありますが、今回はjQueryを使ってモーダルウィンド…