jquery.simple-scroll-follow
HTML <aside>Element to follow</aside> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="jquery.simple-scroll-follow.min.js"></script> CSS aside { position: absolute; } JavaScript $('aside').simpleScrollFollow(); position: absolute is required. 追尾する要素にはposition: absoluteが必須です。 It is not required, but for preventing a screen flickers on Google Chrome, the following is
high-performance-sticky-sidebar.html
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。 サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。 特定の状況下でフックするために、イベントトリガーを用意。 コンテナが長くても短くてもサイドバーを扱うことができます。 他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。 実装はスーバー簡単！ Sticky Sidebarのデ
Stellar.js - Documentation
Getting Started Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. The first step is to run .stellar() against the element: // For example: $(window).stellar(); // or: $('#main').stellar(); If you're running Stellar.js on 'window', you can use the shorthand: $.stellar(); This will look for any parallax backgrounds or elements within the specified eleme
Headroom.js - Give your pages some headroom. Hide your header until you need it.
Headroom.js Give your pages some headroom. Hide your header until you need it. Or install via npm/yarn: npm install headroom.js --save yarn add headroom.js What's it all about? Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slid
ScrollMagic
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
jQuery One Page Scroll by Pete R. | The Pete Design
Ready-to-use plugin All you need is an HTML markup, call the script and BAM! <div class="main"> <section>...</section> <section>...</section> ... </div> $(".main").onepage_scroll(); Pretty Neat Eh? You can customise the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer
Jan 22, 2013 ScrollUp is a lightweight jQuery plugin to create a customisable "Scroll to top" feature that will work with any website, with ease. Recently whilst working on a client project I was required to implement a “Scroll to top” feature to make it easy for the user to get back to the top of the page. I decided to take this further and turn it into a fully customisable jQuery plugin to work
Web Designer News - The best curated news for designers
Web Designer News - A curated collection of the best news for designers each day. http://www.WebdesignerNews.com
jQuery.flickable: iPhone and Android like flick scrolling plugin
See related links to what you are looking for.
[JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll
ウェブページをPinterestのように無限スクロールさせるjQueryのプラグイン、アンドWordPressのプラグインを紹介します。 Infinite Scroll 一番最初にリリースされたのはかなり前ですが、いつの間にか2.0にバージョンアップされていたのでご紹介。 Infinite Scrollのデモ Infinite Scroll -jQueryのプラグイン Infinite Scroll -WordPressのプラグイン Infinite Scrollのデモ デモはテキストだけのページです。 ページ下部の「more」をクリック Infinite Scroll -jQueryのプラグイン Infinite Scroll -jQueryのプラグイン Infinite Scrollの使い方 Infinite Scrollの実装は簡単です。 まずは、外部ファイルをセットします。 <sc
jScrollPane - cross browser styleable scrollbars with jQuery and CSS
jScrollPane - cross browser styleable scrollbars with jQuery and CSS jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS. jScrollPane is designed to be flexible but very easy to use. After you have downloaded and included the relevant fil
[jQuery] スクロールするとページトップボタンが出現するプラグイン | IT女子のお気に入りフォルダ
[jQuery] スクロールするとページトップボタンが出現するプラグイン この記事を読むのに必要な時間の目安: 3分ぐらい スクロールするとページトップボタンが出現するjQueryプラグインを紹介します。どのくらいのスクロールで表示するか、その表示位置などカスタマイズもできます。 画面をスクロールすると右下にページトップに戻るボタンが出現して、ボタンを押すとスルスルッとページトップに戻る、ページトップに戻るとボタンが消える動きを実装するjQueryプラグインです。 デモページ プラグインは以下からダウンロードできます。 Dynamic Drive DHTML scripts- jQuery Scroll to Top Control ボタンの画像もダウンロードできますが、ボタンは自作もOKです。デモページでは自作画像を使用しています。 ダウンロードしたscrolltopcontro
ページ内でどれくらいスクロールされているかをGoogleアナリティクスで解析する為のjQueryプラグイン・Scroll Depth
ユーザーにどれくらいページ内で スクロールされているかをGAの イベントAPIを使って解析する為 のjQueryプラグイン・Scroll Depth のご紹介。 スクロールに応じて視差効果を演出できるパララックス系サイトやペラサイトのような1ページで完結するタイプのコンテンツを持つサイトは割と見かけるので、どれくらいスクロールされているかを解析する方法もあるといいかもですね。という需要に応えたライブラリみたいです。 ※時間なくて動作テストしてないのでその程度の記事という事で今日はご了承下さい。 ユーザーのスクロール状況をパーセンテージでトラッキングするプラグイン。デフォルトでは25％、50％、75％といったポイントで解析できるようになってるみたい。また、任意のDOM要素をターゲットにする事も出来るそうです。 コード<script src="https://ajax.googleapis.c
scrolldeck.js
scrolldeck created by Chicago Web Developer John Polacek. I work at at AuctionsByCellular. We make mobile bidding and auction software for charities. Follow @johnpolacek A jQuery plugin for making scrolling presentation decks For example: animations, fullscreen images or parallaxing Powered by Scrollorama Download: zip tar How to Use Build a web page with each slide as a div. Pro-Tip: Use rem’s to
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
https://stackstock.net/archives/2012/
perfect-scrollbar
http://joelb.me/scrollpath/