Dart.panelSnap

A Dart app which snaps to blocks of content (panels) when the user scrolls. You can nest sets of panels as you will see throughout this demo page.

Each following panel will explain a specific feature of PanelSnap.

http://github.com/ringstaff/dart-panelsnap

Ported from Guido Bouman's JQUERY.PANELSNAP

(Scroll down to see more.)

The basic setup

<html>
  <body>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
    <script type="application/dart">
      import 'dart:html';
      import 'package:panelsnap/panelsnap.dart';
      
      void main() {
        new PanelSnap(document.body);
      }
    </script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Configuration options

new PanelSnap(querySelector('.panel_container'))
    ..menu = false
    ..menuSelector = 'a'
    ..panelSelector = 'section'
    ..namespace = '.panelSnap'
    ..onSnapStart = () {}
    ..onSnapFinish = () {}
    ..onActivate = () {}
    ..directionThreshold = 50
    ..slideSpeed = 400;
      
      

Callback functions

First

Second

Third

Log:

Event capturing

First

Second

Third

Log: