finger-mover

Overview

finger-mover is a motion effect library that integrates Fingerd (a development kit for finger unit event management in mobile development) and Moved (a micro movement framework). finger-mover provides many useful plugins, such as Vertical scroll simulation (simulation-scroll-y.js), Horizontal scroll simulation (simulation-scroll-x.js) and so on.

Features

• Just 11.12KB after compression

• Plugin support, motion components are available as plug-ins and you can also develop your own plugin, reference Plugin Development Guide

Installation

npm install --save finger-mover

finger-mover released as a umd module. You can use it in any way for your favorite. You can get global variable Fmover by serving as <script> tag.

Getting Started

// Import finger-mover
import Fmover from 'finger-mover'
// Import vertical scroll simulation plugin simulation-scroll-y
import simulationScrollY from 'simulation-scroll-y'
// Import horizontal scroll simulation plugin simulation-scroll-x
import simulationScrollX from 'simulation-scroll-x'

// While using both simulation-scroll-y and simulation-scroll-x plugins to implement 2D scrolling
let fm = new Fmover({
    el: '#scroll-box',
    plugins: [
        simulationScrollX(),
        simulationScrollY()
    ]
})

• 2D scrolling live demo

Access the Plugin Object

Fmover can access the plugin object by the order of the plugin import. Take the above code as an example:

// fm[0] access the first plugin object `simulationScrollX`
// Call the instance method of the object
fm[0].scrollTo(-300, 1000)

Plugins List

Vertical scroll simulation

Description: There are many scroll simulation lib on mobile device, such as: iscroll, xscroll, better-scroll and so on. Why do you should be know to simulation-scroll-y？The feature of simulation-scroll-y you should to know 。

Horizontal scroll simulation

Description: Use simulation-scroll-x simulat horizontal scroll on mobile device.

2D scrolling

Description: You just need to use the vertical scrolling plugin simulation-scroll-y and horizontal scrolling plugin simulation-scroll-x at the same time to implement 2D scroll.

Horizontal slide show

Description: Lightweight and simple horizontal slide show solution on mobile device.

Vertical slide show

Description: Lightweight and simple vertical slide show solution on mobile device.

Custom Plugins

You can develop your own plugin for finger-mover, reference Plugin Development Guide

Package

Fingerd

Fingerd is a development kit for finger unit event management in mobile development

Moved

Moved is a micro movement framework.