宣伝になるんですが、この度、「俺のDMM」というサイトを制作いたしました。 http://oreno-dmm.com DMMで販売されているDVDのパッケージを、大きな画像で一覧できるサイトです。 スクロールしていくと次ページの内容を自動で読み込むため、マウスホイールのみの操作で閲覧を進めることができることが特徴です。 もしよろしければ、ご利用いただけるとうれしいです。 もし気に入っていただけたら、お知り合いにも紹介いただければ、もっとうれしいです。 ではでは、よろしくお願いいたします。
「俺のDMM」というサイトを作りました
宣伝になるんですが、この度、「俺のDMM」というサイトを制作いたしました。 http://oreno-dmm.com DMMで販売されているDVDのパッケージを、大きな画像で一覧できるサイトです。 スクロールしていくと次ページの内容を自動で読み込むため、マウスホイールのみの操作で閲覧を進めることができることが特徴です。 もしよろしければ、ご利用いただけるとうれしいです。 もし気に入っていただけたら、お知り合いにも紹介いただければ、もっとうれしいです。 ではでは、よろしくお願いいたします。
ナビゲーションをスクロールの途中でヘッダーに固定する方法 * R4 * Webサービスレビューサイト
最初からヘッダーに固定するタイプではなく、スクロールしていく途中で、ヘッダーが固定される方法の紹介です。ANTEPRIMAやIWCなど、多くのWebサイトで使われています。 <script src="jquery.js"></script> <script> $(function(){ hTop = $('#header').offset().top; }); $(window).scroll(function () { if($(window).scrollTop() > hTop - 0) { $('#header').css('position', 'fixed'); $('#header').css('top', '0px'); }else{ $('#header').css('position', 'static'); } }); </script> #header に固定したい
jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」:phpspot開発日誌
どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」 2012年11月21日- any list scroller - jQuery scrolling plugin by musings.it to scroll any list with any content - musings.it web design and development どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」。 <ul><li>なリストを初期化すれば次のようなスクロールするUIに変化するみたい。 表示アイテム数の他、アイテムの間隔など細かい所もオプションやCSSで制御できるようです 動作原理は以下のようになっているらしい。 このてのスクロール系ライブラリは豊富にありますが、１つの選択肢として覚えておいてもよさそう。
http://lagoscript.org/jquery/autopager/demo
See related links to what you are looking for.
【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
[JS]画像やコンテンツを水平・垂直に気持ちよくスクロールさせて表示することにこだわったスクリプト -Sly
水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。 IE6にも対応してるのがびっくりです！ 特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。 操作は上部のバー、FRAME上でホイール、パネルのクリック、下部のナビゲーションがあり、また下部のボタンでは前・次、最初・最後・中央などの操作もできます。 ナビゲーションでの操作は次に表示するアイテムを先頭に配置します。 デモでは、水平方向のスクロールだけでなく、垂直方向、無限スクロールもあります。
ライブドアみたいにスクロールしたらサイドバーの広告を固定する - ぼくはまちちゃん！
こんにちはこんにちは！！ 夏ですね！ 真夏ですね！！ ところで最近、ライブドアの一部の人気ブログで、サイドバーの挙動に「んん？」って思ったことありませんか！ …百聞は一見にしかずってことで、実際の例をみてみましょう！ ※PC版のみです ハムスター速報 (左のサイドバーを見ながら、下にスクロールしてください) 痛いニュース(ﾉ∀`) (右のサイドバーを見ながら、下にスクロールしてください) ある程度スクロールすると、サイドバーの広告がぴたっと固定されますね！ これって流行りなんでしょうか…！ そんなわけで、もしかしたら同じことをやりたい人が他にもいるのかも？と思って、 コピペで使えるJavaScriptにしてみました！ ↓ 動作サンプルです！ スクロールしたらサイドバーの広告を固定するスクリプトの動作サンプル ↓ コードはこれです！ 適当にコピペしてブログに貼り付けてね！ <script t
SEKAI NO OWARI オフィシャルサイト
SEKAI NO OWARI オフィシャルサイト。スケジュール、ディスコグラフィなど掲載。ファンクラブ「R.A.I.N.S」「S.N.O.W.S」入会受付中。
[DEMO]スクロールすると上部に固定するナビゲーション | webOpixel
こんにちは これはスクロールするとナビゲーションが上部に固定されるサンプルです。 jQueryを使用しています。 CSS3は装飾しているだけなので動作には関係ないです。 このサンプルの記事はこちら
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。
ボックス内をスクロールすると自動でコンテンツをロードするjQueryをちょっと変えてみた
この記事は11年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。ボックス内をスクロールすると自動でコンテンツをロードするjQuery – かちびと.net を読んで、ちょっとやってみたくなったので作った。 言ってもたいしたことやってませんがｗ かちびと.netのシロさんには許可を頂いてます。 詳細は以下。 上記記事では、下までスクロールしたあとにワンテンポ置いてから（タイマー処理で）コンテンツがロードされる形になってます。 しかし、IEで見てみるとわかるのですが、内側のスクロールが完了した時点で外側のスクロールも動いちゃうんですね。 なので、ロードされる前にページの下に行ってしまう。 これをちょっと改善できないかなーと思って作ったのがこちら。 Auto Scroll Test コードは以下。 <script type=”text/javascript”> $(functio
スクロールすると左右から画像が集まってくるWebデザインのNizoっぽいやつをjQueryで作る
以前少し話題になった、Nizoというサイト がああります。このサイトで導入している、 スクロールに応じて要素をアニメーション させるエフェクトがちょっと素敵なんです が、これと同じような効果をjQueryで作る、 というのが今日の記事内容です。 どんなエフェクト？って思われた方はNizoでスクロールしてみてください。このエフェクトをjQueryで作る方法が公開されていたので一応メモです。 Intriguing animate-on-scroll effect スクロールすると左右からいろいろ集まってきます。まぁそれだけなんですが、インパクトはありますね。 IE7でも問題なく動作しました。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
ページ内のパンくず的なものを実装するjQueryプラグイン・Sausage
うまく説明出来ないんですがページ内の 右端にパンくずっぽいページ内リンクを 作成するjQueryプラグイン・Sausage。 視覚的に分かりやすくなり、コンテンツ内に 目次のようなものを置く必要も無くなります。 縦に長いページにせざるを得ないコンテンツ に良さそうです。 パンくずっていうとちょっと語弊あるかもですが他にいい表現が思いつかないのでこいつ頭悪いなと思ったらデモ見てください。URLに#も付かないのでSEO的に妨げることも無いかと思います。また、ツールチップも出るので今どこにいるかを把握しやすくなりそうです。 たぶん、ソーセージのようにパンくずっぽいものが繋がってるからだと思います・・デモを見れば納得出来る（といいんですけどね） 右端にこのようなパンくずのようなものを設置するプラグインです。クリックでその段落の頭に飛ぶことができます。 使い方<script type="text/j
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
IDEA * IDEA