on:2014年2月3日sponsorsティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。-GitHubScrollStoryの特長ScrollStoryのデモScrollStoryの使い方ScrollStoryの特長ScrollStoryは、スクロールベースのページとインタラクションをシンプルな実装で作成できます。スタイルにとらわれない、自由なスクロールベースのページを作成可能。既存コンテンツの流用だけでなく、新たにオブジェクトを配列で生成することにも対応。UIの16種類のイベント・コールバックが利用できます。アクティブなコンテンツとそうでないコンテンツに、フォーカス・ブラーさせることができます。アイテムはカテゴリごとにグループ化でき、イベントでカテゴリを表示できます。アイテムがビューポート内に表示されたか判定できます。ページ上のあらゆるアイテムにアニメーションでスクロールできます。スクロールイベントの調整とDOMは最小限の使用。ScrollStoryのデモさまざまなスクロールベースのページのデモがあります。basic既存のページ要素を使ったベーシックなデモ。ビューポートに表示されると「.active」が付与されハイライトします。キーボードの左右矢印キーでの操作も可能です。selector基本動作はBasicと同じで、セレクタをカスタマイズできます。attributesdata属性を加えて、各アイテム個別にスタイルを変更しています。objects配列で各アイテムを生成しています。down右上のナビゲーションで各アイテムの上下にスクロールします。eventアクティブなイベントをチェックします。offsetアクティブな位置を決め、アイテムがそこに入るとチェックします。categoryアクティブなアイテムをチェックし、カテゴリ名を判定して表示します。imagesアイテムがビューポートに入った時に、画像をロードします。外部ファイルjquery.jsとjquery-ui.jsとunderscore.js、当スクリプトを外部ファイルとして記述します。HTMLHTMLは既存のものにclassとラッパーを加えて使用したり、配列で生成して使用することもできます。...</div>data属性を加えて、ビューポートに表示された際にスタイルを与えることもできます。JavaScriptjQueryのセレクタで適用するコンテンツを指定し、スクリプトを実行します。$('#container').ScrollStory();});</script>スクリプトのオプションでは、キーボード操作、スクロールのアニメーションのスピード、アイテムがアクティブ時の判定、カテゴライズなどを設定します。Posts関連記事が見つかりませんでした。WordPress当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。