Scrollbear -- Make your blog more smooth!
Scrollbear Scrollbear is a tool that maintains the container scroll position when images loaded. Scrollbear is suitable in blog platforms where exist many photos and images. When images loaded, the scroll position will jump and cause a unfriendly experience. Scrollbear will trace the container height and maintain the scroll position when the images loaded and container height change. Demo Installa
Clusterize.js
<!--HTML--> <div class="clusterize"> <table> <thead> <tr> <th>Headers</th> </tr> </thead> </table> <div id="scrollArea" class="clusterize-scroll"> <table> <tbody id="contentArea" class="clusterize-content"> <tr class="clusterize-no-data"> <td>Loading data…</td> </tr> </tbody> </table> </div> </div> <!--HTML--> <div class="clusterize"> <table> <thead> <tr> <th>Headers</th> </tr> </thead> </table> <
スクロールで何かするための処理まとめ。（JavaScriptおれおれAdvent Calendar 2014 – 21日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen
Leaflet.jsを使って、巨大な画像を地図のように表示するプラグイン「Leaflet.Zoomify」
下記は画像なので動きません。 「Leaflet.Zoomify」は、地図ライブラリのLeaflet.jsを使用して画像を地図のように表示するプラグインです。 下処理として、「ZoomifyExpress4」というアプリケーションを使って画像をタイル化します。（解凍したファイルの中から「Zoomify Converter.exe」を実行し、タイル化する画像を選択すれば後は自動で処理がおこなわれます） タイルに変換すると容量がかなり増えるので気を付けてください。 サンプル STARMEN.NETからダウンロードした「Full Map of MOTHER / EarthBound Zero」画像をZoomifyExpress4を使ってタイル化し、Leaflet.Zoomifyで地図として表示しました。 ※下記の地図は動きます。 leaflet.jsを読み込んだ後に、L.TileLayer.Zoo
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify
section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 ちょうどいい位置に自動でスクロール スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。 Scrollifyの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。 jQueryは1.6+で、どれでも可です。 <body> ... <script src="script/jquery-1.6.js"></script> <!--<script src="script/jquery-2.1.1.js"></script>--> <!--<scri
jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。
MouseWheelTrap - how to stop simultaneous Flash / browser scrolling - SPIKYTHING
MouseWheelTrap – how to stop simultaneous Flash / browser scrolling Update: This project is now hosted at GitHub. There are currently known issues with Chrome’s PPAPI plugin architecture. USE AT YOUR OWN RISK. I recently stumbled over a new AS3 gotcha that seems to be bugging a lot of the Flash community. Apparently a new ‘feature’ of AS3, whereby using the mousewheel inside an embedded Flash movi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
document.body.scrollTopが常に0を返す謎を調べてみた - Qiita
Google Code Archive - Long-term storage for Google Code Project Hosting.