JS ページ内スムーズリンク jQueryを使わずにページ内リンク(アンカーリンク)で滑らかに移動するリンクのサンプルです。 「href="#link"」のようなページ内リンクを無効にし、クリックするとスムーズなスクロールで移動するaタグをJSで実装しました。 jQueryなしで実装しています... 2022-06-26 14:25:25
jQuery 上部スクロールでローディングアニメ スマホで最上部までスクロールし、さらに引っ張ると更新されたり、データが読み込まれたりするUIがよくあります。 そのサンプルを作ってみました。 スマホ... 2020-08-11 23:50:19
jQuery スクロールの値を取得する スクロースしたときの数値を取得して表示します。 開いているブラウザのwindowの一番上が0となります。 [[ $(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