WEBデザイン

WEBデザイン

フェードスライダーの実装(Swiper)

近年のメインビジュアルの傾向として、まず画面いっぱい100vw、100vhで表示させながらフェードでビジュアルイメージを切り替えるタイプをよく目にします。今回は前回同様SwiperというJavaScriptライブラリを使って実装していきます。
WEBデザイン

スライダーの実装(Swiper)

メインビジュアルなどでよく見られる画像のスライダーや、フェードなどの動きを簡単に実装できるライブラリである「Swiper」の解説をした記事になります。
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を用いた実装方法を解説した記事になります。
WEBデザイン

タイピング風なローディング画面(jQuery編)

ローディング画面でタイトルやロゴを表記させるのは珍しくありませんが、今回はタイピング風に一文字ずつ入力されていくアニメーションを紹介します。
WEBデザイン

ローディング画面など初回一回目のみ発火するJS

sessionStorageにある、データを保存する機能とデータを取得する機能を用いて初回アクセス時の処理と、2回目以降アクセス時の処理を切り分けるJSでの処理を解説しています。