[B! スクロール] elm_arataのブックマーク

elm_arata id:elm_arata

スクロールに関するelm_arataのブックマーク (3)

Passive Event Listeners によるスクロールの改善 | blog.jxck.io
Intro DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。今回は、この仕様が解決する問題と、本サイトへの適用を解説する。 Passive Event Listeners Spec Scroll Event の PreventDefault() 画面のスクロールに合わせたインタラクションを実装する場合、 Scroll Event にイベントリスナを登録する。典型的な例では touchstart や touchend をフックし、その中で DOM の操作などを実施するなどがある。場合によってはイベントリスナ内で preventDefault() を呼ぶことで、スクロールそのものを止めることもできる。
elm_arata 2017/05/17
javascript

スクロール
リンク
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
elm_arata 2015/12/05
アニメーション

スクロール

ランディングページ

javascript

まとめ

jquery
リンク
ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。
ページ内リンクをクリックした場合にスムーズにスクロールするようにしてくれるjQueryプラグインです。同じようなプラグインはたくさん公開されているのですが、これだ！というのがなかなかなかったので自作してみました。ダウンロード使い方下記のような感じでjQueryとjQuery.smoothScroll.jsを読み込みます。 <script type="text/javascript" src="https://ajax.google apis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.smoothScroll.js"></script> あとは普通にページ内リンクを設定するだけです。 <div id="header"> ヘッダー内容
elm_arata 2013/09/30
jquery

jQueryプラグイン

スクロール
リンク
1