• Stars
    star
    135
  • Rank 269,297 (Top 6 %)
  • Language
    JavaScript
  • Created about 8 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A simple parallax API

Scrollmonitor Parallax

Installation

npm install -S scrollmonitor-parallax

Examples

Basic Usage

var parallax = require('scrollmonitor-parallax');
var eases = require('eases'); // https://github.com/mattdesl/eases


// Create a root element. Parallax will start when this
// element enters the viewport and stop when it exits.
var parallaxRoot = parallax.create(domElement);

// to make an element scroll at a speed relative to the
// scroll parent, just add a value for speed.
var parallaxChild2 = parallaxRoot.add(domElement, 0.5);

// for more complex animations you can start and end positions.
// If it's left blank, the start position is taken from the element's CSS.
var parallaxChild = parallaxRoot.add(
    domElement, {
	    start: {
	    	opacity: 0
		}
	    end: {
	        x: 100,
	        y: 50,
	        z: 100,
	        opacity: 0.7
	    },
	    easing: {
	        x: eases.linear,
	        y: eases.linear,
	        z: eases.circIn,
	        opacity: eases.bounceIn
	    }
    }
);

Existing ScrollMonitor

If you need to create your own ScrollMonitorContainer, you may create a parallax root and pass an existing container as the third parameter, and scrollmonitor-parallax will use that instead of using the default ScrollMonitorContainer instance:

var scrollMonitor = require('scrollmonitor');
var parallax = require('scrollmonitor-parallax');

var container = scrollMonitor.createContainer(document.body);
// Any other watching logic here.
var parallaxRoot = parallax.create(domElement, null, container);
// Any elements you wish to add to your parallax.

More Repositories

1

scrollmonitor

A simple and fast API to monitor elements as you scroll
TypeScript
3,296
star
2

scrollmonitor-react

React HOC for the scrollMonitor
JavaScript
138
star
3

redux-marionette

Because it's time to start that big migration
JavaScript
33
star
4

scrollmonitor-hooks

React Hooks for scrollmonitor.
JavaScript
27
star
5

polevault

An api to recieve gesture events from a Leap Motion device
JavaScript
26
star
6

cross-tab-middleware

Redux middleware for sending actions across open browser tabs
JavaScript
14
star
7

paperboy

A simple and lightweight event emitter mixin with advanced features.
JavaScript
13
star
8

apollo-server-service-worker

Put apollo server inside a service worker.
JavaScript
13
star
9

cross-tab-channel

A simple library for sending data across open browser tabs
JavaScript
10
star
10

dexie-hooks

Hooks for Dexie
TypeScript
9
star
11

leap-theremin

A theremin that works with the leap motion detector
JavaScript
5
star
12

imageSelector

A responsive image selector
HTML
4
star
13

fix-a-float

99.0000000000000005% of the time floating point math is perfect
JavaScript
3
star
14

bitcoin-bot

A simple bot that trades bitcoin
JavaScript
2
star
15

idaho

The 43rd State. Machine.
TypeScript
2
star
16

redux-action-wrapper

Simplifies your mapDispatchToProps significantly
JavaScript
2
star
17

entrokitty

Littering your box with files that have similar names? Use entrokitty to tell them apart.
JavaScript
2
star
18

altitude-finder

A simple web app to find your altitude while offline.
JavaScript
2
star
19

releasable

Adds retain/release to any object, letting you know when you can clean up.
JavaScript
1
star
20

ab-split

A simple A/B testing utility
JavaScript
1
star
21

prepend-selector-webpack-plugin

A webpack plugin to prepend all your CSS selectors with a string.
JavaScript
1
star
22

potterywebsite

Simple store made for pottery.
PHP
1
star
23

umpire-indicator

A simple umpire indicator app
JavaScript
1
star
24

epub-generator

A barebones epub generator that provides a full epub, or the files that make one.
TypeScript
1
star
25

unmask

A javascript tool to remove the background from an icon or logo
JavaScript
1
star
26

use-callback-ref

A friendlier, faster, less risky useCallback
TypeScript
1
star
27

mosaic

A tiled layout system
JavaScript
1
star
28

data-viz

An unfinished app for graphing data
JavaScript
1
star
29

storage.js

A simple interface to localStorage that adds expiration dates.
JavaScript
1
star
30

Elements-of-Typographic-Stylesheet

An extension for Chrome to improve the look of the web.
CSS
1
star
31

live-tongue-shape

An app to trace the shape of a tongue surface from an ultrasound image.
TypeScript
1
star