New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.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 - npm Package Compare versions

Comparing version 1.0.1 to 1.0.3

4

package.json
{
"name": "react-parallax-effect",
"version": "1.0.1",
"version": "1.0.3",
"description": "A React component for applying a parallax scroll to content.",
"main": "react-parallax-effect.js",
"main": "index.js",
"scripts": {

@@ -7,0 +7,0 @@ "test": "echo \"Error: no test specified\" && exit 1",

@@ -1,4 +0,4 @@

## React Parallax
## React Parallax Effect
Parallax 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 content.
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 content.

@@ -17,18 +17,19 @@ ### Features

### Repository
[https://github.com/uismithing/react-parallax](https://github.com/uismithing/react-parallax)
[https://github.com/uismithing/react-parallax-effect](https://github.com/uismithing/react-parallax-effect)
### Install
`npm install react-parallax -s`
`npm install react-parallax-effect -s`
### Deploy
`import Parallax from "react-parallax"`
`import Parallax from "react-parallax-effect"`
```html
<Parallax ref="reactparallax" {...props}>
<!--
- parallax children
- rangeIndex must be >= 1
- the first child assumes scroll authority af sibling child layers
- rangeIndex determines the scroll speed; e.g. rangeIndex=2 scrolls half the speed of rangeIndex=1
-->
<div ref="layer_0" rangeIndex="1">
<!--
- layer children
- rangeIndex must be >= 1
- the first child assumes scroll authority af all child layers
- rangeIndex determines the scroll speed; e.g. rangeIndex=2 scrolls half the speed of rangeIndex=1
-->
<!-- layer children -->
</div>

@@ -35,0 +36,0 @@ <div ref="layer_1" rangeIndex="2">

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