jQuery

【jQuery】スクロールベースのストーリーを構築するためのjQueryプラグインScrollStory

December 13, 2018
ScrollStory

ScrollStoryは、スクロールベースのストーリーを構築するためのjQueryプラグイン。ページを下にスクロールするときにナビゲーションを更新するのに役立ちます。マウスクリックまたはカスタムイベントでストーリーのセクションに自動スクロールできます。

Basic Usage

.story要素を検索

<body>
  <!-- Default markup style -->
  <div id="container">
    <div class="story"><h2>Story 1</h2><p>...</p></div>
    <div class="story"><h2>Story 2</h2><p>...</p></div>
  </div>
  
  <!-- include jquery and scrollstory -->
  <script src="jquery.js"></script>
  <script src="jquery.scrollstory.js"></script>
  
  <script>
    // Instantiation
    $(function(){
      $("#container").scrollStory();
    });
  </script>
</body>
{
  id: 'story0-2', // globally unique across every instance of ScrollStory. User-assigned or auto generated.
  index: 0, // zero-based index for this item within this instance of ScrollStory
  el: $(), // jQuery object containing the item node
  data: {}, // user data for this item
  inViewport: true,
  fullyInViewport: false,
  active: false, // is this the exclusively active item
  filtered: false, // has this item been removed from the collection
  category: 'people', // optional. single, top-level association.
  tags: ['friend', 'relative'], // optional. array of strings defining lose relationships between items.
  distanceToOffset: -589, // px distance to global trigger,
  adjustedDistanceToOffet: -589, //px distance to trigger taking into account any local adjustments for this item
  scrollStory: {}, // reference to the scrollstory instance this item belongs to
  height: 582, // item element height
  width: 1341, // item element width
  scrollOffset: false, // a number if the scrollOffset for this item is different from the global one
  triggerOffset: false // a number if the triggerOffset for this item is different from the global one
}

MIT