迫力のあるページ切り替えが可能なマルチスクロール効果実装「multiscroll.js」:phpspot開発日誌
multiscroll.js - split multi-scrolling pages plugin 迫力のあるページ切り替えが可能なマルチスクロール効果実装「multiscroll.js」。 ページを半分に分割してそれぞれ逆方向にスクロールして迫力のあるページ切替え効果が作れます パララックスはもうよくみる物になってしまいましたが、こちらは新鮮かも。 関連エントリ フルページスクロールするサイトを作るのに使える「fullPage.js」 スクロールに連動してアニメーションやパララックス効果が作れる「ScrollMagic」 スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」 スクロールにより積み重なるナビゲーションヘッダーを作れる「Slinky.js」
Googleが推奨するSEOに適した無限スクロールの構成方法
[対象: 上級] Googleは英語版ウェブマスター向け公式ブログで、検索エンジンが処理しやすい無限スクロール（Infinite Scroll）の推奨構成を説明しました。 細かな話は後回しにして、その推奨構成をさっそく日本語で紹介します。 なお逐一の訳ではなく、理解しやすくするために表現や構成を原文とは多少変えてあります。 構成の概要 無限スクロールからリンクされている個々のアイテム（記事やコンテンツなど）を検索エンジンが確実にクロールできるように、利用しているシステムが、無限スクロールとともにページネーションしたページも作成できるように必ずしておく（無限スクロールで、1つのURLに収めるのではなく、分割して複数のページに分けるということ）。 ※拡大画像はオリジナルのURLで表示します（もう1つの画像も同様） 無限スクロールは、分割したページに変換されることで検索エンジンが処理しやすくなる
単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」:phpspot開発日誌
Echo.js, simple JavaScript image lazy loading 単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」。 スクロールがいってはじめて画像を読み込むライブラリ。jQueryなどに依存せず、軽量。 空の画像をsrcに設定しておきつつdata-echoでソースを指定するだけです。 読込中の画像にはローディングアニメーションもついてます 関連エントリ LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」
パララックスサイトを簡単に作成できるjQueryプラグイン8選
twitter facebook hatena google pocket いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollToを駆使しています。 URL：http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ demo：http://ianlunn.co.uk/plugins/jquery-parallax/ #2 JoelBesada/scrollpath 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でスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」:phpspot開発日誌
Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下のナビゲーションでページ送りをしたりも出来るみたい 今なら、これを使ってサイトを作れば、玄人なWEB業界の人も目を丸くするかもしれませんね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」
スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」:phpspot開発日誌
スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」 2011年08月18日- Smart sticky floating box | jQuery Plugins スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」。 スクロールするとアニメーションでついてくるサイドバー。いろんなところでよく見ますが、実装の仕方によっては酔っちゃったりかえってユーザ利便性をそこないかねないUIですが、常にサイドにあることで便利に使えるという目的で設置されているものです。 こういうUIを実装する際に使えるのがこのプラグインで、位置移動の際のアニメーション方法が多数選べるだけでなく、遅延やアニメーションの速度が自由に設定できます。 デモページで動作確
ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル:phpspot開発日誌
Animated Scroll to Top ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル。 ページの上の方にいる場合は必要ないかもしれないボタン。下に行くにつれ表示されることで上に戻れることが分かりやすく、上にいるときは邪魔にならないという使いやすいボタンが作れますね。 jQueryにて実装するチュートリアルとなっており、サンプルのダウンロードも出来るのでいざ実装する際に参考にできそう。 デモページ 最近WEBを巡回していると散見するUIですね。 関連エントリ 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」
カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」:phpspot開発日誌
カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 2010年10月28日- jQuery vScroll ? Simple animated vertical content scroller supporting varying heights HibboBlog カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」 通常、divなんかにサイズを指定して、overflow:auto とかにすると次のようにスクロールバーがでますよね。 ただ、このスクロールバーはブラウザ依存でちょっとデザインにあわなかったりしてカッコ悪いという場合があります。 デモページ そこでこのプラグインを使えば、スクロールバーを消してしまうことが可能。 消しちゃうとコンテンツ見れないじゃん、という心配は不要で、ボタンをクリック
ページ内スクロールのjQueryプラグインいろいろ - かちびと.net
ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery 3種類あります。div要素を1ページ表示してスムーズなスクロールで移動。 Create a Vertical, Horizontal an
ページ内リンクを使用する際の注意点 (ユーザビリティ実践メモ)
しかし、ユーザはリンクをクリックする際、そのリンクが「別ページへの移動」なのか「同一ページ内でのリンク」なのかは事前に把握していません。弊社のユーザ行動観察調査では、ページ内リンクをクリックしたユーザが、クリックした先のコンテンツをスクロールしながら閲覧する途中で、自分がクリックの前と同じページにいる（ページ内リンクだった）ことを知って混乱する行動が多く見られます。 これは、自分がページ内の移動をしていることや、現在自分がいる位置について充分なフィードバックを得ないままユーザが行動することで起こる混乱と考えられます。 ページ内リンクの利点を活かしつつ、ユーザに「現在自分がどういう状態にいるのか」を伝え、混乱を最小限に抑える方法としては以下のようなものがあります。 【クリック前】 リンクのすぐそばに、上下の動きを示すアイコンを置くことによって、そのリンクが同一ページ内での移動であることを伝え
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」:phpspot開発日誌
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 2010年03月31日- AjaxScroll ? Ajax Scroll jQuery Plugin | blogfreakz.com スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 「MSN Image Search」は画面遷移なしに画像をガンガンよんでくれて、スクロールすれば次の画像を見れるためストレスが少なく、画像を探せます。 これと同様の機能を実現するためのjQueryプラグインのご紹介です。 デモページはこちら。スクロールすると次の画像を読んでいっているのが分かると思います。 Ajaxで次の内容を読むので、一回における転送量を少なくした上で、利用者には画面遷移なしの利便性を提供出来ると言うわけですね。 垂直方向だけでなく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
