Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-parallax-effect

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-parallax-effect

A React component for applying a parallax scroll to content.

  • 1.0.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2
decreased by-60%
Maintainers
1
Weekly downloads
 
Created
Source

React Parallax Effect

React-Parallax-Effect is a React component designed for deploying content into a view that relies on srolling for navigation. The content can be arranged in layers that mimic the parallax effect, and move at different velocities while scrolling. Layers are assigned by passing them in as children to the component. The first child node determines the scrolling range and motion of its siblings. The parallax differential is determined by the rangeIndex property assigned to each child. The value of the rangeIndex determines the magnitude of the speed differential applied to the layer. Callbacks are abailable for onReady and onChange, and a jumpTo() method is used to adjuste the scroll location of the first child. The effect presents the designer and user creative ways for presenting and interacting with content.

Features

  • Full React/Flux pattern
  • Minimal dependencies (lodash, react-velocity)
  • Callbacks for onReady and onChange
  • Method for jumpTo
  • Fluid layout
  • CSS Rich

Learn more

See the demo at http://www.uismithing.com/main/wares/parallax.

Repository

https://github.com/uismithing/react-parallax-effect

Install

npm install react-parallax-effect -s

Deploy

import Parallax from "react-parallax-effect"

<Parallax ref="reactparallax" {...props}>
  <!--
    - parallax children
    - rangeIndex must be >= 1
    - the first child assumes scroll authority of sibling child layers
    - rangeIndex determines the scroll speed; e.g. rangeIndex=2 scrolls half the speed of rangeIndex=1
    - the stack order of the children determines thier order in the z-index stack
  -->
  <div ref="layer_0" rangeIndex="1">
    <!-- layer children -->
  </div>
  <div ref="layer_1" rangeIndex="2">
    <!-- layer children -->
  </div>
  ...
  <div ref="layer_n" rangeIndex="n">
    <!-- layer children -->
  </div>
</Parallax>

props

  • Panel:{}
  • Viewport:{}

Keywords

FAQs

Package last updated on 10 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc