- JS ページ内スムーズリンク
- jQueryを使わずにページ内リンク（アンカーリンク）で滑らかに移動するリンクのサンプルです。 「href="#link"」のようなページ内リンクを無効にし、クリックするとスムーズなスクロールで移動するaタグをJSで実装しました。 jQueryなしで実装しています...
- 2022-06-26 14:25:25
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
スクロール
スクロールにまつわるサンプルです。
「スクロール」に関するサンプル
- jQuery 上部スクロールでローディングアニメ
- スマホで最上部までスクロールし、さらに引っ張ると更新されたり、データが読み込まれたりするUIがよくあります。 そのサンプルを作ってみました。 スマホ...
- 2020-08-11 23:50:19
- jQuery スクロールの値を取得する
- スクロースしたときの数値を取得して表示します。 開いているブラウザのwindowの一番上が０となります。 [[ $(window).scroll(function() { $(&...
- 2020-08-10 14:25:47
- jQuery スクロールでURLを書き換える
- URLを書き換えるJSを、スクロールで移動したコンテンツの位置をトリガーに発動させるサンプルです。 記事などのコンテンツで、スクロールして下まで読み切ると、次の記事が表示されるサイトがあります。 今時は通信速度が速く、ついついたくさん読ませるための...
- 2019-07-29 20:32:02
- JS URLのハッシュ値をUIに活用する
- URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。一瞬で移動せずにスクロールとアコーディオンを組み合わせたUIのサンプルです。 ページ内からのリンクはaタグで書くだけ。 クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。...
- 2019-08-07 22:06:43
- jQuery スクロールでクラス付加、解除
- スクロールするとクラスを追加して、変化させるサンプルです。 要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。 このサンプルでは、特定クラスで囲った要素までスク...
- 2019-07-28 17:14:04
- jQuery スクロールで移動速度を変える
- 文字などエレメントをスクロールの動きとずらす表現のサンプルです。 jQueryのプラグインskrollr.min.jsを使って、文字が遅れて表示する表現を実装しています...
- 2019-08-03 12:00:17
- jQuery スムーズスクロール
- jQueryを使ってページ内を上下にスムーズにスクロールさせるボタンを設置します。 こちらのボタンをクリックしてください。 真ん中までスクロール↓ 一...
- 2019-08-02 23:51:29
- jQuery 時差読込レイジーロード
- 画像の読み込みをわざと遅らせて、スクロールによって読み込みを開始させます。 スマホでよく使われる技法ですが、PCでもよく見かけるようになりました。...
- 2019-08-02 08:42:56
- jQuery スクロールでアニメ
- skrollr.jsというjQueryのライブラリを使って、スクロールで連動する基本的なアニメーションのサンプルを用意しました。 これを使うことで、パララックス（視...
- 2019-07-30 07:56:53
Top