Next.jsはどうやってスクロール位置を復元するのか

2022/07/18 107 users Next.js experimental true プラグ

Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなか... 続きを読む

表示領域にピタッと移動！CSSでスクロールスナップを実装しよう | Webクリエイターボックス

2019/01/11 76 users CSS スクロールスナップ 近年 Webクリエイターボックス

2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ スクロールスナップの基本 See the Pen scroll-snap ba... 続きを読む

CSS と jQuery で作るスクロールにあわせて回転するロゴ | WWW WATCH

2013/07/22 108 users jQuery transform tumblr CSS ロゴ

Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。... 続きを読む

１ページ内で複数ページに分割できるjQueryプラグイン「windows」:phpspot開発日誌

2013/05/14 50 users Windows phpspot開発日誌 section 画像

windows １ページ内で複数ページに分割できるjQueryプラグイン「windows」 <section>で区切ったブロックをフルスクリーンのスライドに分割してくれます。 スクロールでページを切替えますが、中途半端なスクロール位置になると自動補正をかけてくれます キーボードショートカットなんかが入るともっと便利だと思いました。 関連エントリ 一枚の画像を高速にスライドさせてアニメーション表示す... 続きを読む

[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js | コリス

2013/03/07 294 users コリス スクリプト

スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></secti... 続きを読む

パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」 | BlackFlag

2013/01/30 130 users 使い道 BlackFlag アクション メモ書き 特定

パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 jquery-peekaboo uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇... 続きを読む

スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」:phpspot開発日誌

2011/06/06 86 users スクロールバー 注釈 jQueryプラグイン 位置 長い

SmartScroll スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」 スクロールバーが長いとどの位置に何があるかっていうのを知りたくなりますが、SmartScrollを使えば次のように、この位置にこんなことが書いてあるよ、を示すことが可能。 使い方次第では長ったらしい文章も分類して分かりやすく表示することができそうですね。 注釈だけじゃなくてデザインも色々... 続きを読む