Smooth Scroll Snapping Framework Agnostic Library | PanelSnap

PANELSNAP is a JavaScript plugin that, after scrolling, snaps onto blocks of content that I like to call panels. Its API makes it easy to design the plugin according to the needs of your project. Each of the following panels will explain a specific aspect of the PanelSnap plug-in.

PanelSnap is a JavaScript library that does not depend on the framework. This means that it works in every JavaScript project, whether you’re using Vue, React, jQuery, or plain vanilla JavaScript. It can capture both horizontally and vertically, call menus, and fire events based on user behavior.

Read More – jQuery Plugin That Creates Fast, Styleable Snappable Range Input In CSS

How to make use of it:

1. Install and import the panelSnap with NPM.

# NPM
$ npm i panelsnap --save
import PanelSnap from 'panelsnap';

2. Or include the panelSnap’s JavaScript on the web page.

<!-- jQuery Is Optional -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- panelSnap Plugin -->
<script src="/path/to/lib/panelsnap.umd.js"></script>

3. Create a set of panels you need to scroll.

<section>
  Section 1
</section>

<section>
  Section 2
</section>

<section>
  Section 3
</section>

...

4. Make the content sections full on web pages.

section {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
}

5. Enable the plugin.

new PanelSnap();

5. Possible choices to customize the plugin.

new PanelSnap({

    // parent container
    container: document.body,

    // panel selector
    panelSelector: '> section',

    // threshold
    directionThreshold: 50,

    // scroll delay
    delay: 0,

    // duration in milliseconds
    duration: 300,

    // easing function
    easing: function(t) { return t }
    
});

6. API strategies.

const instance = new PanelSnap();

// scroll to a specific element
instance.snapToPanel(element);

// destroy the instance
instance.destroy();

7. Event handlers.

const instance = new PanelSnap();

instance.on('activatePanel', function(){
  // do something
})

instance.on('snapStart', function(){
  // do something
})

instance.on('snapEnd', function(){
  // do something
})

instance.on('snapStop', function(){
  // do something
})

Read More – A Simple Vue Component That Allows Fullscreen and Horizontal Scroll Snapping Library

OPTIONS EXPLAINED

container
(element) The (scrolling) container that contains the panels.
panelSelector
(string) The css selector to find the panels. (scoped within the container).
directionThreshold
(interger) The number of pixels required to scroll before the plugin detects a direction and snaps to the next panel.
delay
(integer) The number of milliseconds the plugin pauses before snapping to a panel.
duration
(integer) The number of milliseconds in which the plugin snaps to the desired panel.
easing
(function) An easing function specifying the snapping motion.

API

on([string] eventName, [function] callbackFunction(panel))
Subscribe to a specific event with your own function. Where eventName is one of `activatePanel`, `snapStart`, `snapStop` and callbackFunction is a function that gets called with the panel that is the subject of the event.
off([string] eventName, [function] callbackFunction(panel))
Unsubscribe from one of your subscriptions. Where eventName is one of `activatePanel`, `snapStart`, `snapStop` and callbackFunction is the function that was used to subscribe to the event.
snapToPanel([DOM Element] panel)
Trigger a snap to a panel. Where the panel is one of the panels within the container.
destroy()
Destroy the panelsnap instance and clear all state & eventlisteners. This allows for a new PanelSnap instance to be created on the same container if so desired.

Smooth Scroll Snapping, PanelSnap Plugin/Github, smoothscroll js demo, full page scroll jquery plugin

Read More – 

Smooth Scrolling In Pure Javascript For The Web | iscroll
Smooth Scroll And Sticky Header jQuery Plugin | sp.stickyHeader.js


See Demo And Download

Official Website(guidobouman): Click Here

This superior jQuery/javascript plugin is developed by guidobouman. For extra Advanced Usage, please go to the official website.

Share