» jInvertScrollの可変幅対応で陥りやすいトラップ技術ブログ
縦スクロールアクションで横スクロールをしてくれるjQueryのライブラリjInvertScrollについて 言葉で説明するより実物を、と言う事であの有名な兄弟レーサーのページ http://www.nintendo.com.au/gamesites/mariokartwii/ これについて、下記の条件を加えるカスタマイズをしました。 『各コンテンツ(１枚の表示)はウィンドウサイズに揃える』 これを実現するために、ダウンロードしたファイル群の中にあるサンプルをカスタマイズ。 ステップとしては １．現在のWindowサイズを取得する ２．frontクラスの幅をWindowサイズの5倍に指定(ページが5枚あるため) ３．pageクラスの幅をWindowサイズに指定 ４．各ページクラスを段階的にWindowサイズを加算してゆく ５．これらをリサイズ毎に実行する 簡単に言えば、全体幅と各ページの横幅
アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」:phpspot開発日誌
Scroll To アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」。 ページ内に沢山の<a name="***">や<a href="#***">があっても自動で初期化されるのでデフォルトでアニメーションスクロール化できます。 一瞬で飛んでしまうスクロールより便利なのは誰が見ても明らかということでデフォルト化しちゃうのもよさそう。 アニメーションの速度やスクロール位置のオフセット、アニメーションエフェクトのカスタマイズ等も可能 関連エントリ Flashみたいに美しいCSSテキストアニメーションデモ canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」 美しいアニメーションを使ったフィルタ＆ソートが可能なjQueryプラグイン「MixItUp」 Canvasベースの読込中アニメーションデモ「Sonic」 スプ
jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
スクロールについてくるフローティングメニュー at softelメモ
問題 サイドメニューなどで、スクロールについてきて一緒に移動するメニューを作りたい。 解答例 jQueryが使える状況なら、こんなのでどうでしょう。 ・Javascript $(function(){ var o = $("#sidebar"); var offset = o.offset(); var topPadding = 30; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { o.stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { o.stop().animate({ marginTop: 0 }); }; }); }); ・HTML <div id="sideb
jQueryで画面をスクロールさせる時の注意点
jQueryで画面をスクロールさせる時の注意点 jQueryを使って画面をスクロールさせる場合animateメソッドとscrollToプロパティを組み合わせるのが一般的です。 selector.animate({ scrollTop: 0 }); // ページの一番上にスクロール この時どのセレクタに対して実行すべきかはブラウザごとに異なります。詳しくはjQueryでscrollToを使うときの注意点 - NoteBookにまとまっていてありがたいです。簡単に言うとWebKitではbodyに効き、それ以外のブラウザではhtmlに効きます。 $('html').animate({ scrollTop: 0 }); // WebKit以外 $('body').animate({ scrollTop: 0 }); // WebKit これに対して var selector = $('html,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
写真やテキストを無限に横スクロールさせるjQueryプラグイン « Webの小ネタ
