WEBデザインフェードスライダーの実装(Swiper) 近年のメインビジュアルの傾向として、まず画面いっぱい100vw、100vhで表示させながらフェードでビジュアルイメージを切り替えるタイプをよく目にします。今回は前回同様SwiperというJavaScriptライブラリを使って実装していきます。2023.09.152023.10.10WEBデザイン
WEBデザインスライダーの実装(Swiper) メインビジュアルなどでよく見られる画像のスライダーや、フェードなどの動きを簡単に実装できるライブラリである「Swiper」の解説をした記事になります。2023.09.152023.10.10WEBデザイン
WEBデザインロゴがアニメーションした後背景が右から左に流れて画面遷移するローディング(jQuery使用) vivus.js というSVG アニメーションを表示するライブラリを使ってロゴのアウトラインのアニメーションと左から右に背景が流れる画面遷移を組み合わせた、ちょっとリッチなローディングを紹介します。2023.09.132023.10.10WEBデザイン
WEBデザインモーダルウィンドウの実装(jQuery編) ボタンをクリックすることで、背景が暗くなった上に小窓が開き重要なお知らせなどユーザーの注意を引きやすいコンテンツを表示させることができるモーダルウィンドウの実装方法を解説します。2023.09.092023.10.10WEBデザイン
WEBデザインタブメニューの実装方法(jQuery編) WEBデザインの現場でも頻出度の高いUIパーツ、タブで切り替えて複数のメニューの情報を掲載できるタブメニューの作り方を解説した記事になります。2023.09.052023.10.10WEBデザイン
WEBデザインスクロールするとヘッダーとトップへ戻るボタンが固定されるjs(jQuery編) ヘッダーの固定はposition: fixed;で簡単に実装可能ですが、ある程度ページをスクロールするとヘッダーやトップへ戻るボタンが実装されるページをjQueryで作っていきます。2023.08.302023.10.10WEBデザイン
WEBデザインスクロールすると要素がアニメーションするエフェクト(jQuery編) スクロールすると要素がアニメーションするエフェクトを実装してみたい。そんな方々に向けjQueryを用いた実装方法を解説した記事になります。2023.08.292023.10.10WEBデザイン
WEBデザインタイピング風なローディング画面(jQuery編) ローディング画面でタイトルやロゴを表記させるのは珍しくありませんが、今回はタイピング風に一文字ずつ入力されていくアニメーションを紹介します。2023.08.282023.10.28WEBデザイン
WEBデザインスムーススクロールの指定(jQuery、css) ページ内リンクやトップへ戻るボタンを押したときにするすると動く滑らかなアニメーションを実現方法を解説していきます。 かつてはjsでの実装が当たり前でしたが、単純なものであれば最近はcssのみで簡単に実装可能です。2023.08.232023.10.10WEBデザイン
WEBデザインアコーディオンメニューの実装(jQuery編) アコーディオンメニューとは、表示されているメニューの一部をクリック(タップ)して下にある隠れたコンテンツが開閉して表示されるメニューのことです。 開閉する動きが、アコーディオンの蛇腹の動きに似ているこためアコーディオンメニューと呼ばれています。2023.08.172023.10.10WEBデザイン