【Next.js】next/fontを使用したフォント最適化(App Router)
Google Fontsを使用する場合に、next/fontを利用してフォント最適化する方法を紹介。
カテゴリ: JavaScript, JS,
423 件中 41〜60件目 を表示
Google Fontsを使用する場合に、next/fontを利用してフォント最適化する方法を紹介。
クリックしたトリガーの対象となる要素を出し分けるタブ切り替えをJavaScriptで実装する方法を紹介。タブのトリガーとコンテンツが同一の親要素を持つパターン。
window.scrollTo()の behavior: smooth を使用したスムーススクロールの実装方法を紹介。
マウスオーバー時にGIFアニメーションを再生する方法を紹介。
スクロールに合わせて対象要素が下から円状に出現するアニメーションをIntersection Observer APIとclip-pathを使用して実装する方法を紹介。
スクロールに合わせて対象要素が拡大、縮小しながら出現するアニメーションをIntersection Observer APIを使用して実装する方法を紹介。
スクロール量と連動してテキストが左右に移動するアニメーションの実装方法を紹介。
ページの読み込み完了後に clip-path を使用したアニメーションの実装方法を紹介。
OS・デバイス・ブラウザを判定し、bodyにclassを付与することで、それぞれの判定結果に対して個別にスタイルを割り当てる。
OS・デバイス・ブラウザを判定し、bodyにclassを付与することで、それぞれの判定結果に対して個別にスタイルを割り当てる。
OS・デバイス・ブラウザを判定し、bodyにclassを付与することで、それぞれの判定結果に対して個別にスタイルを割り当てる。
マウスストーカーにスタイルを当て、リンクにホバーした時には、追従していたマウスストーカーの中にテキストを表示させる実装方法を紹介。
スクロールした際に固定されている要素の色が背景と同色の場合に同化しないよう色が変化する。
カレント状態を切り替える際にカレントの背景が滑らかにスライドして移動する処理をjQueryで実装する方法を紹介。
カレント状態を切り替えた際にカレント要素の背景が滑らかにスライドして移動する処理を実装する方法を紹介。
「Pannellum」を使用してサムネイルと連動する360度パノラマ画像ビューアーの実装方法を紹介。
「Pannellum」を使用して360度パノラマ画像ビューアーを複数設置する実装方法を紹介。