【jQuery】ウェブサイトでスナップスクロールを可能にするsnapScroll

jQuery

snapScroll.js

February 9, 2018

snapScrollはあなたのウェブサイトでスナップスクロールを可能にする使いやすいライブラリ。

Compatibility

  1. Chrome: ≥ 26
  2. Firefox: ≥ 21
  3. Edge: ≥ 14*
  4. Opera: ≥ 15
  5. Safari: ≥ 6.2
  6. Internet Explorer: Not supported

How To Use

Including Files

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>

<!-- snapScroll JavaScript file -->
<script src="jquery.snapScroll.min.js" charset="utf-8"></script>

<!-- Additional easing file (optional) -->
<script src="jquery.easing.min.js" charset="utf-8"></script>

スクロールする要素にdata-snap-point属性を追加

<body>
  <div data-scroll-point></div>
  <section>
    <article data-scroll-point></article>
    <article data-scroll-point>
      <p></p>
    </article>
    <article></article>
    <article data-scroll-point></article>
  </section>
  ...

マークアップとは異なる順序でポイントにスクロールすることもできます。

<body>
  <div data-scroll-point="1"></div>
  <section>
    <article data-scroll-point="4"></article>
    <article data-scroll-point="2">
      <p></p>
    </article>
    <article></article>
    <article data-scroll-point="3"></article>
  </section>
  ...

Initialisation

$(document).ready(function() {
  var ss = new SnapScroll();
});
$(document).ready(function() {
  var ss = new SnapScroll({
    // Options
    arrowKeys: false,
    duration: 600,
    easing: 'swing',
    element: 'html',
    ordered: true,
    scrollBar: true,

    // Callbacks
    onLeave: function(currentPoint, targetPoint) {},
    onArrive: function(currentPoint, targetPoint) {}
  });
});

MIT

Latest Posts

Related Posts