【初心者向け・コピペOK!!】~ WEB制作の現場で使える頻出UIパーツをjQueryで実装しよう ~

【初心者向け・コピペOK!!】~ WEB制作の現場で使える頻出UIパーツをjQueryで実装しよう ~

jQueryで実装できる最頻出の動きについての解説をした記事の一覧です。

昨今jQueryはオワコンなどと言われ、脱jQueryの流れが進んでいることは間違いありません。
詳しくは以下の記事を参照して下さい。

しかし、数行でサイトに動きをつけることができるjQueryはサイト制作の現場において手軽ですし、特に下記で紹介したような頻出パターンは覚えておいて損はありません。

その後バニラJSでの実装に進んでいかれるのがよいと思います。

とにかくWEBデザインナーとして今後活動される方は必見のUIパーツになるかと思いますので、最初はコピペでもよいので参考にしてみてください!

 

WEBデザイン

モーダルで検索フォームをポップアップで表示

ボタンをクリックしたらモーダルウィンドウが立ち上がって検索フォームを表示するページを実装してみましょう。 基本的には以前紹介したモーダルウィンドウの実装方法と変わりません。
WEBデザイン

【jQuery】左から右に背景が伸びて画像が表示するアニメーション

スクロールして画像のところに来たら背景が左から右に伸びてから画像が表示されるアニメーションをjQueryを使って実装してみたいと思います。
WEBデザイン

【Safari考慮完全版】モーダルウィンドウの実装(jQuery編)

モーダルウィンドウの実装方法を以前紹介したのですが、こちらの方法で使用したモーダル出現時に背景をスクロールできないようロックする手法はiOSのバージョン16より前のSafariで使用できませんでした。バージョン16より前のSafariを使用している方もまだ2割ほどいるとのことで簡単に無視できない割合ではあります。そちらを考慮した解説記事なります。
WEBデザイン

ドロップダウンメニューの実装(jQuery編、CSSのみ)

サイトのヘッダー部分などでよく見かける、メガメニューをホバーするとサブメニューがドロップダウンでぶら下がって表示されるタイプのメニューを今回は作ってみましょう! jQueryを使うタイプとCSSのみで実装できるタイプと2種類紹介します。
WEBデザイン

ロゴがアニメーションした後背景が右から左に流れて画面遷移するローディング(jQuery使用)

vivus.js というSVG アニメーションを表示するライブラリを使ってロゴのアウトラインのアニメーションと左から右に背景が流れる画面遷移を組み合わせた、ちょっとリッチなローディングを紹介します。
WEBデザイン

モーダルウィンドウの実装(jQuery編)

ボタンをクリックすることで、背景が暗くなった上に小窓が開き重要なお知らせなどユーザーの注意を引きやすいコンテンツを表示させることができるモーダルウィンドウの実装方法を解説します。
WEBデザイン

タブメニューの実装方法(jQuery編)

WEBデザインの現場でも頻出度の高いUIパーツ、タブで切り替えて複数のメニューの情報を掲載できるタブメニューの作り方を解説した記事になります。
WEBデザイン

jQueryの読み込み方法

jQueryを読み込むにはダウンロードしてサーバーにアップロードする方法とCDNで読みこむ方法とありますが、ここでは手軽にすぐ読み込めるCDNを使った方法を紹介します。
WEBデザイン

スクロールするとヘッダーとトップへ戻るボタンが固定されるjs(jQuery編)

ヘッダーの固定はposition: fixed;で簡単に実装可能ですが、ある程度ページをスクロールするとヘッダーやトップへ戻るボタンが実装されるページをjQueryで作っていきます。
WEBデザイン

スクロールすると要素がアニメーションするエフェクト(jQuery編)

スクロールすると要素がアニメーションするエフェクトを実装してみたい。そんな方々に向けjQueryを用いた実装方法を解説した記事になります。