scroll-behaviorでなめらかスクロールが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 06日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 06 日目 scroll-behavior でハッシュ付き URL とかでジャンプするときのスクロールをなめらかアニメーションさせることができます。 使い方 デモ：https://codepen.io/ginpei/pen/OJdrqPR JS でのジャンプにも利く scrollTo() 等でスクリプトからスクロールする際にも利きます。楽ちんですね。 ちなみに実行時オプションで CSS の設定を上書きできます。 アニメーション制御はなし ON/OFF だけです。速度とかはブラウザー次第。 あとブラウザーの気分次第で無視しても良いと仕様に書かれています。そうなんだ。 おしまい 昔はみんな頑張って JavaScript で計算してアニメーションさせてましたね。 参考 scroll-behavior – CSS: カスケーディ
Webページ最上部に、スクロールに応じてプログレスバーを表示する - かちびと.net
Result スクロールするとプログレスバーが表示されるやつ。非依存です 仕様が分かりやすいようにド派手なグラデーションにしています スクロールに応じて徐々に伸ばしているのが分かります JavaScript /* MIT License by flouthoc/scrollpup.js github.com/flouthoc/scrollpup.js Copyright (c)flouthoc */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.scrol
【JavaScript】スムーススクロールをjQueryを使わずにシンプルに実装する【Vanilla JS】 – ノーズブログ
わかった事 試してみた所、アニメーションを作る時には、まずイージングが大変だという事がわかりました。 スムーススクロールのオプションとしてイージングを色々選択できるようにしようと思うと、プレーンなJavaScriptでシンプルなコードを書くのはどうしても無理があります。 逆に、イージングさえ絞ってしまえば、後は大して難しい記述は無いので、なかなかシンプルに書くことができます。 よく考えてみたら、今までスムーススクロールごときでサイト毎にイージングを変えるような事もしなかったし、 jQueryのデフォルトのイージング”swing”で、クライアント側から文句を言われたこともありません。 という事で、jQueryのデフォルトのイージング”swing”だけに限定して、コードを書いてみました。 jQueryのデフォルトのイージング”swing”限定のスムーススクロール 念のための使い方の説明ですが、
CSSだけでOne page scrollなWebサイト
Result 昔iPhone 5Sのプロダクト紹介ページにあったレイアウトを真似たスクリプト（One page scroll）をCSSだけで実装する、みたいなの。最近あんまり見かけませんので需要は少なそうですが。CSSスライダーと同じ方法で実装出来ます。 cssinput[type='radio'] {/*ページスクロール用のボタン。input要素は非表示にしておく*/ display: none; } input[type='radio']#section1:checked ~ nav > label[for='section1'] {/*実際のボタン。チェックが入ったら背景色を変更*/ background-color: white; } /*以下、各セクションのスタイルセッティング*/ input[type='radio']#section1:checked ~ section:nt
スクロールに合わせてナビゲーションに現在地を明示するスクリプト・「Progress Nav」 - かちびと.net
Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの。この手のは同じように明示する方法ありますけど、この方法も悪くないと思ったので備忘録。 Progress Nav On Github
要素内やページ内でのスクロールに応じてプログレスバーを表示する軽量シンプルなスクリプト・「PrognRoll」 - かちびと.net
PrognRollはページやスクロールが可能なコンテナ内でのスクロールに応じてプログレスバーを表示するスクリプトです。ただそれだけのシンプルなもので、サイズも2kb以下、圧縮すれば1kb以下と軽量です・・が、jquery依存なので軽量と言っていいか迷う所です。上動作サンプルは分かりやすいようにバーの太さを太めに設定しました。少し前に「この記事は～分で読めます」といった類のコンテンツ消化時間の明示が良く見かけられましたが、それと似たような目的じゃないかと思います。 PrognRoll
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu
デフォルトのスクロールバーも表示 ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head> <body> ... コンテンツ ... <script src="jquery.js"></script> <script src="scrollmenu.js"></script> </body> Step 2: HTML 各コンテンツは、section要素で実装します。 <section class="section" id="section1"> <div class="content"
![[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b654e6fe9828430f6845fd3dd07466d833a3033/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052903-01.png)
Firefoxでドラッグを使ってページをスクロールする方法
Firefoxでドラッグを使ってページをスクロールする方法を紹介します。 Firefoxでドラッグを使ってページをスクロール（Yahoo!JAPANのページ） １．はじめに Adoboe ReaderなどではPDFファイルをスペースキーと左クリックでページをドラッグすることができます。 PDFをドラッグでスクロール ブラウザでスクロールするにはホイールを回すか、右側のスクロールバーをマウスでドラッグします。 が、ホイールでは微調整が効きませんし、微調整を右側のスクロールバーで行うためにマウスをスクロールバーまで移動するのが面倒です。 さらに横スクロールなどはさらに面倒です。 PDFのドラッグスクロールのような操作がブラウザでも行えるとかなり便利ではないかと思い、調べてみたところ、Firefoxのアドオン「Grab and Drag」で実現できることが分かりました。 このアドオンを利用すれば
各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR
div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。 キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。 デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/main.css"/> </head> <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS
最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。 デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの！ デモページ：2ページ目 ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/assets/js/fsvs.js"></script> </head> スワイプ対応にするには、スクリプトを加えます。 <script src="/assets/js/jq
![[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS](https://cdn-ak-scissors.b.st-hatena.com/image/square/811172ca6306ab35b8c730bf9af1a2f005e4fab0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014092203.gif)
jQueryでページ最下部までスクロールした際に外部HTML（JSON形式）化した要素を追加する方法｜BLACKFLAG
TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に 自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが 任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったので jQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。 サンプルを別枠で表示する ページの最下部までスクロールをすると 追加で要素を読み込みます。 サンプルでは28個の要素を 5個ずつ追加表示しています。 （最後は3つ表示） 全体構成についてまずはHTMLから。 ◆HTML <div id="loadarea"></div><!--/#loadarea--> HTMLには要素を追加させたい箇所に 任意のID（もしくはクラス）を付けた ブロック要素を配置するだけです。 そしてCSSは以下の様になります。 ◆CSS /* #loadarea --
jQueryでページ最下部のスクロール時のイベントをキャッチする
ユースケースとしては、Twitterのタイムライン表示ページのように最下部までスクロールしたら、そのイベントをキャッチして次ページのツイートをAutoloadして表示させたい！みたいなとき。 $(window).on("scroll", function() { var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight === 0) { // when scroll to bottom of the page } }); 上コードでは、ウインドウのスクロール時にスクロール位置が今どれだけなのかを差分を見て計算してる。それが0以下になったら
jQuery とっても簡単、ページ内リンクでスムーズスクロール
ページ内リンクでスムーズにスクロール移動させる方法の紹介です。 とても簡単に実装できます。 スムーズスクロール？というかたは、↓の DEMO をご覧になって、どこかリンク部分（下線がある文字）をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。 ＊味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。 ▶ DEMO INDEX 手順１：jQueryの記述 手順２：HTMLの記述 WordPressの場合 サンプルソース 補足 位置調整 ページ間でのスムーススクロール 手順１：jQueryの記述 まず、 <head>〜</head> の間に以下のソースを記述してください。 <!-- jQuery.jsの読み込み --> <script type="text/javascript" src
[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth
ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。 実装は簡単、ほんの数行ページに加えるだけです。 Scroll Depth Scroll Depth -GitHub Scroll Depthのデモ Scroll Depthの使い方 Scroll Depthのデモ Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。 対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera,
検索エンジンとの相性を考慮した無限スクロールのベストプラクティス
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
[JS]縦長1ページのスクロール時にさまざまなインタラクションを加えるスクリプト -ScrollStory
ティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。 Scroll Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。 ScrollStory -GitHub ScrollStoryの特長 ScrollStoryのデモ ScrollStoryの使い方 ScrollStoryの特長 ScrollStoryは、スクロールベースのページとインタラクションをシンプルな実装で作成できます。 スタイルにとらわれない、自由なスクロールベースのページを作成可能。 既存コンテンツの流用だけでなく、新たにオブジェクトを配列で生成することにも対応。 jQuery UIの16種類のイベント・コールバックが利用できます。 アクテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマフォで画面下へスワイプしてWebページを更新させられるスクリプト・「PulltoRefresh.js」
WordPressの可能性がさらに広がる！Webデザインのトレンドを効果的に取り入れる便利なプラグインのまとめ
Welcome webdesigncrowd.com - Justhost.com