流行のjQueryでスクロールするサイトを集めてみました
jQueryでコンテンツをスクロールさせる海外サイトを最近見るのですが、あれはかっこいいですね。そこで、今回の記事では、jQueryでコンテンツをスクロールさせているサイトをいくつか紹介しつつ、このタイプのサイトに特有の問題についても触れてみたいと思います。 はじめに コンテンツをスクロールバーではなく、JavaScriptでスクロールさせる場合、ブラウザのスクロールバーが出ないため、「ブラウザからはみ出るコンテンツをどのように扱うか」の課題に直面します。以下のサイトで、この問題をどのように解決しているかにも、注目して見てください。 01. Reverse Büro 自由自在に縦、横方向にスクロールします。マウススクロールにも対応しています。コンテンツ自体がブラウザ幅に合わせて拡大・縮小するのでスクロールは必要ないですね。写真だけのサイトでは、こういった解決策もアリなんだと思います。 ※サ
[JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll
live demo: IFrame iframeを使ったデモです。 div要素と同様にスクロールバーのカスタマイズ、コンテンツのズームが可能です。 NiceScrollの特徴 既存のコードの修正無しで、簡単に設置ができます。 ページのスペースを必要としないスクロールバーを設置できます。 スクロールバーのデザインを変更できます。 すべてのブラウザでマウス・キーボードでスクロールができます。 スクロールは慣性スクロールに対応しており、スピードは調整可能。 コンテンツのズーム機能。 対応ブラウザ IE6を含めたデスクトップブラウザだけでなく、iPhone, iPadなどモバイルブラウザ、タッチデバイスに対応しています。 Firefox 4+ Chrome 5+ Safari 4+ (win/mac) Opera 10+ IE 6+ iPhone, iPadなどのiOSデバイス [ad#ad-2]
jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。 - WEB人
jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。 公開：2009年11月 4日 21:06, 更新：2009年11月 5日 08:01 トラックバック(0) コメント(0) 最近の流行を抑えたサイトを見ていて気になる機能がありました。ページをスクロールして下へ移動すると、右下にスーッと出現する上向きのボタン。ポチっと押すと、ぬるっとスクロールしながらページのトップに戻ってくれる優れものです。 ホイールやスクロールバーを使って戻るのは、縦に長いページほど手間がかかるので、このプラグインがデザインの邪魔にならないのであれば是非実装してみましょう。場合によっては劇的にユーザビリティが向上します。 必要ファイルの準備 まずはjQueryのライブラリファイルを用意します。jQuery公式サイトに「Production (19KB, Minified and Gzi
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
JavaScriptを使った縦書きライブラリ·竹取 JS MOONGIFT
竹取 JSはJavaScript製のオープンソース・ソフトウェア。Webの世界（というよりもコンピュータの世界）では横書きが標準になっている。ずっと見続けていると、いつの間にか違和感がなくなっているが日本語は基本的に縦書きだ。 横書き文章をJavaScriptで縦書きに ワードプロセッサなどでは縦書きモードもあるが、それをそのままWebに反映するのは難しい。長音記号やカギ括弧などそのまま縦向きにしても使えない文字もある。そうした点を網羅した縦書き表示ライブラリが竹取 JSだ。 竹取 JSの面白いのは標準の左から右に書かれる文章をJavaScriptを使って縦書きにしている点だ。さらにそれだけでなく、長い文章の場合はスクロールが出るのだが、標準の上から下のスクロールで読み進めることが出来る。 強調は傍点に！ ルビ表示にも対応し、さらに強調表示は傍点になる。下線は左側に表示されたり、リストや画
ウェブページに固定表示させるエレメントの効果的な使い方
「positon: fixed;」などで配置した、スクロールしても固定位置に表示されるエレメントの効果的な使い方を紹介します。 Fixed position web elements [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブページで固定表示されたエレメントは、最近多く見かけるようになりました。これはページで表示されていない箇所へスクロールした時に、特定のエレメントのみ表示を残すものです。最もよく見かけるのは、ナビゲーションを含めたヘッダでしょう。 エレメントを固定表示することで最も大切なことは、それがユーザーにとって重要なものである、ということです。エレメントの重要性は変化することもありますが、基本的なゴールはページのいずれかの部分を永久にビューポートに表示することです。 もし、このテクニックを使うときは、慎重に検討することを勧めます。このエレメントは自動
こだわりのページ内リンクスムーズスクロール scrollsmoothly.js
「ページ内リンク スムーズスクロール」でググればいくらでも出てくるシロモノだけど、自分の要望をすべて満たすものが無かったので作ってみた。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル 以下のソースコードをサンプルページのようにhead内で読み込むだけでOK。 ソースコード(Javascript) scrollsmoothly.js 読み込み例 <script type="text/javascript" src="scrollsmoothly.js"></script> 特徴 縦横斜めにスクロール可能 スクロール中にもリンクをクリック可能 別のページからのリンクでも指定の場所までスムーズスクロールします MIT License 動作確認ブラウザ IE6, IE7 Firefox 2,3 Opera 9.27 Safari 3.1 関連エントリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]永遠にスクロールしていたくなる、気持ちいいエフェクト -CSS Scroll Effects