Socket
Socket
Sign inDemoInstall

react-scroll-parallax

Package Overview
Dependencies
3
Maintainers
1
Versions
109
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0-alpha.2 to 1.0.0-beta.1

__tests__/isElementInView.test.js
lib/libs/ParallaxController.js
lib/utils/isElementInView.js
lib/utils/testForPassiveScroll.js
src/libs/ParallaxController.js
src/utils/isElementInView.js
src/utils/testForPassiveScroll.js

4

examples/parallax-example/client.js
import React from 'react';
import ReactDOM from 'react-dom';
import { ParallaxExample } from 'components';
import { ParallaxScroller } from 'react-scroll-parallax';
import { ParallaxController } from 'react-scroll-parallax';
ParallaxScroller.init();
ParallaxController.init();

@@ -8,0 +8,0 @@ const root = document.getElementById('root');

1

examples/parallax-example/components/Intro/Intro.js

@@ -30,2 +30,3 @@ import React from 'react';

</div>
<p className={style.scroll}>Scroll</p>
</div>

@@ -32,0 +33,0 @@ );

4

examples/parallax-example/components/Overlap/Overlap.js

@@ -12,2 +12,4 @@ import React from 'react';

<Parallax
offsetYMax={150}
offsetYMin={-50}
offsetXMax={-40}

@@ -22,2 +24,4 @@ offsetXMin={20}

<Parallax
offsetYMax={150}
offsetYMin={-50}
offsetXMax={40}

@@ -24,0 +28,0 @@ offsetXMin={-20}

17

examples/parallax-example/components/ShapeField/ShapeField.js

@@ -74,4 +74,4 @@ import React, { Component } from 'react';

<Parallax
offsetYMax={30}
offsetYMin={-30}
offsetYMax={60}
offsetYMin={-20}
className="triangle-top"

@@ -88,6 +88,5 @@ slowerScrollRate

<Parallax
offsetYMax={30}
offsetYMin={-30}
offsetYMax={60}
offsetYMin={-60}
className="triangle-big"
slowerScrollRate
>

@@ -104,6 +103,5 @@ <Svg svg={cluster03TriangleBig} />

<Parallax
offsetYMax={30}
offsetYMin={-30}
offsetYMax={60}
offsetYMin={-60}
className="triangle"
slowerScrollRate
>

@@ -116,3 +114,2 @@ <Svg svg={cluster04Triangle} />

className="hemi-right"
slowerScrollRate
>

@@ -127,2 +124,2 @@ <Svg svg={cluster04HemiRight} />

}
}

8

examples/parallax-example/components/TriangleGrid/TriangleGrid.js

@@ -15,2 +15,10 @@ import React from 'react';

/>
<article className={style.copy}>
<p>
<code>npm i react-scroll-parallax</code>
</p>
<p>
<a className="btn" href="https://github.com/jscottsmith/react-scroll-parallax">View on GitHub</a>
</p>
</article>
<div className={style.container}>

@@ -17,0 +25,0 @@ <Parallax

4

examples/parallax-test/client.js
import React from 'react';
import ReactDOM from 'react-dom';
import { ParallaxTest } from 'components';
import { ParallaxScroller } from 'react-scroll-parallax';
import { ParallaxController } from 'react-scroll-parallax';
ParallaxScroller.init();
ParallaxController.init();

@@ -8,0 +8,0 @@ const root = document.getElementById('root');

19

examples/parallax-test/components/ParallaxTest/ParallaxTest.js

@@ -15,2 +15,3 @@ import React from 'react';

unitPercent: false,
disabled: false,
};

@@ -60,2 +61,9 @@

toggleDisabled = () => {
const disabled = !this.state.disabled;
this.setState({
disabled,
});
};
mapToParallax() {

@@ -74,3 +82,3 @@ const offsetY = this.state.offsetY;

tag="span"
disabled={false}
disabled={this.state.disabled}
offsetYMax={offsetYMax}

@@ -107,3 +115,3 @@ offsetYMin={offsetYMin}

Y Offsets:
<span className="value">{this.state.offsetY}</span>
<span className="value">{this.state.offsetY}{this.state.unitPercent ? '%' : 'px'}</span>
</h4>

@@ -127,2 +135,9 @@ <button onClick={this.increaseOffsetY}>Increase</button>

</div>
<div className={style.currentState}>
<h4>
Disabled:
<span className="value">{this.state.disabled ? 'True' : 'False'}</span>
</h4>
<button onClick={this.toggleDisabled}>{this.state.disabled ? 'Enable' : 'Disable'}</button>
</div>
</div>

@@ -129,0 +144,0 @@ </div>

44

lib/components/Parallax.js

@@ -52,19 +52,39 @@ 'use strict';

// add this Parallax element to the global listener
if (typeof ParallaxScrollListener === 'undefined') {
throw new Error('Must import/require the global ParallaxScrollListener before adding React Parallax components.');
if (typeof ParallaxController === 'undefined') {
throw new Error('Must initialize the ParallaxController before adding React Parallax components.');
}
// create a new parallax element and save the reference
this.element = ParallaxScrollListener.createElement({
_inner: this._inner,
_outer: this._outer,
props: this.props
this.element = ParallaxController.createElement({
elInner: this._inner,
elOuter: this._outer,
props: {
disabled: this.props.disabled,
offsetXMax: this.props.offsetXMax,
offsetXMin: this.props.offsetXMin,
offsetYMax: this.props.offsetYMax,
offsetYMin: this.props.offsetYMin,
slowerScrollRate: this.props.slowerScrollRate
}
});
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
if (this.props !== prevProps) {
// updates the elements props when changed
ParallaxScrollListener.updateElement(this.element.id, { props: this.props });
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
// updates the elements props when changed
if (this.props !== nextProps) {
ParallaxController.updateElement(this.element, {
props: {
disabled: nextProps.disabled,
offsetXMax: nextProps.offsetXMax,
offsetXMin: nextProps.offsetXMin,
offsetYMax: nextProps.offsetYMax,
offsetYMin: nextProps.offsetYMin,
slowerScrollRate: nextProps.slowerScrollRate
}
});
}
// resets element styles when disabled
if (this.props.disabled !== nextProps.disabled && nextProps.disabled) {
ParallaxController.resetElementStyles(this.element);
}
}

@@ -74,3 +94,3 @@ }, {

value: function componentWillUnmount() {
ParallaxScrollListener.removeElement(this.element);
ParallaxController.removeElement(this.element);
}

@@ -77,0 +97,0 @@

8

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';

});
exports.ParallaxScroller = exports.Parallax = undefined;
exports.ParallaxController = exports.Parallax = undefined;

@@ -13,5 +13,5 @@ var _Parallax2 = require('./components/Parallax');

var _ParallaxScroller2 = require('./libs/ParallaxScroller');
var _ParallaxController2 = require('./libs/ParallaxController');
var _ParallaxScroller3 = _interopRequireDefault(_ParallaxScroller2);
var _ParallaxController3 = _interopRequireDefault(_ParallaxController2);

@@ -21,2 +21,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.Parallax = _Parallax3.default;
exports.ParallaxScroller = _ParallaxScroller3.default;
exports.ParallaxController = _ParallaxController3.default;

28

lib/utils/index.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
exports.scaleBetween = exports.parseValueAndUnit = exports.getParallaxOffsets = exports.clamp = undefined;
exports.testForPassiveScroll = testForPassiveScroll;
exports.testForPassiveScroll = exports.scaleBetween = exports.parseValueAndUnit = exports.isElementInView = exports.getParallaxOffsets = exports.clamp = undefined;

@@ -17,2 +16,6 @@ var _clamp2 = require('./clamp');

var _isElementInView2 = require('./isElementInView');
var _isElementInView3 = _interopRequireDefault(_isElementInView2);
var _parseValueAndUnit2 = require('./parseValueAndUnit');

@@ -26,2 +29,6 @@

var _testForPassiveScroll2 = require('./testForPassiveScroll');
var _testForPassiveScroll3 = _interopRequireDefault(_testForPassiveScroll2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -31,16 +38,5 @@

exports.getParallaxOffsets = _getParallaxOffsets3.default;
exports.isElementInView = _isElementInView3.default;
exports.parseValueAndUnit = _parseValueAndUnit3.default;
exports.scaleBetween = _scaleBetween3.default;
function testForPassiveScroll() {
var supportsPassiveOption = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function get() {
supportsPassiveOption = true;
}
});
window.addEventListener('test', null, opts);
window.removeEventListener('test', null, opts);
} catch (e) {}
return supportsPassiveOption;
}
exports.testForPassiveScroll = _testForPassiveScroll3.default;

3

package.json
{
"name": "react-scroll-parallax",
"version": "1.0.0-alpha.2",
"version": "1.0.0-beta.1",
"description": "React component to create parallax scrolling effects",

@@ -58,4 +58,5 @@ "repository": {

"webpack": "^2.2.1",
"webpack-merge": "^4.1.0",
"webpack-node-externals": "^1.5.4"
}
}

83

README.md
# React Scroll Parallax
Provides a React component and single global passive scroll listener to add **vertical** scroll based offsets to elements based on their position in the viewport. Works with server side rendering and universal react apps.
Provides a React component and single global passive scroll listener to add **vertical** scrolling based offsets to elements based on their position in the viewport. Works with server-side rendering and universal React apps.
[View on NPM](https://www.npmjs.com/package/react-scroll-parallax)
## Examples
[Example](https://jscottsmith.github.io/react-scroll-parallax/examples/parallax-example/)
🔗 [Example](https://jscottsmith.github.io/react-scroll-parallax/examples/parallax-example/)
[Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax/examples/parallax-test/)
🔗 [Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax/examples/parallax-test/)
## Install
Install
⚠️ **Warning: This is a beta pre-release**
[1.0.0 Release goals](https://github.com/jscottsmith/react-scroll-parallax/issues/3)
```
npm i react-scroll-parallax
npm i --save react-scroll-parallax@beta
```

@@ -21,8 +25,8 @@

Import `ParallaxScroller` on the client side and call `ParallaxScroller.init()` to create the global singleton `ParallaxScrollListener` which will handle updating all parallax elements on scroll.
Import `ParallaxController` on the client side and call `ParallaxController.init()` to create the global `ParallaxController` which will handle updating all parallax elements on scroll.
```
import { ParallaxScroller } from 'react-scroll-parallax';
```javascript
import { ParallaxController } from 'react-scroll-parallax';
ParallaxScroller.init();
ParallaxController.init();
```

@@ -32,3 +36,3 @@

```
```javascript
import { Parallax } from 'react-scroll-parallax';

@@ -39,3 +43,3 @@ ```

```
```jsx
<Parallax

@@ -52,14 +56,16 @@ className="custom-class"

## Parallax Component API
## Parallax Component Props
The following are all props that can be passed to the React `<Parallax />` component:
**`className`**
- string
- type: `String`
Optionally pass additional class names to be added to the parallax element.
Optionally pass additional class names to be added to the outer parallax element.
**`disabled`**
- boolean
- default `false`
- type: `Boolean`
- default: `false`

@@ -70,4 +76,4 @@ Determines if the component will have parallax offsets applied. If `true` parallax styles are completely removed from the element and it is no longer updated.

- number or string
- default `0`
- type: `Number` or `String`
- default: `0`

@@ -78,4 +84,4 @@ Maximum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width.

- number or string
- default `0`
- type: `Number` or `String`
- default: `0`

@@ -86,4 +92,4 @@ Minimum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width.

- number or string
- default `0`
- type: `Number` or `String`
- default: `0`

@@ -94,4 +100,4 @@ Maximum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height.

- number or string
- default `0`
- type: `Number` or `String`
- default: `0`

@@ -102,15 +108,26 @@ Minimum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height.

- boolean
- type: `Boolean`
- default `false`
Determines whether the scroll rate of the component will move faster or slower than the default rate of scroll.
Determines whether the scroll rate of the parallax component will move faster or slower than the default rate of scroll.
**`tag`**
- string
- type: `String`
- default `div`
Optionally pass a tag name to be applied to the outer most parallax element.
Optionally pass a tag name to be applied to the outer most parallax element. For example: `<Parallax tag="figure" />`.
## Parallax Controller
The following are public methods available on the `ParallaxController` global:
**`update()`**
Updates all cached attributes for parallax elements then updates their positions.
**`destroy()`**
Removes window scroll and resize listeners, resets all styles applied to parallax elements, and sets the global `ParallaxController` to `null`.
## Development

@@ -122,2 +139,4 @@

Run webpack watch:
`npm run dev`

@@ -133,5 +152,4 @@

## Optimizations to Reduce Jank
## Optimizations to reduce Jank and keep scrolling smooth
React Scroll Parallax uses a single [passive scroll listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners) (dependent on browser support) with the minimal amount of work done on the scroll event to prevent [jank](http://jankfree.org/) (calculations that cause layout, reflow and paint are cached initially and only updated when layout changes). Request animation frame is then used to decouple the scroll handler and further reduce jank. All offsets are applied with 3D transforms to utilize the GPU and prevent paints. If you have ideas to further optimize scrolling please PR or post an issue.

@@ -141,5 +159,2 @@

It's 2017 and you probably shouldn't be building parallax sites—but if you do (like I did) and you use this package try and use it responsibly. Keep images small and optimized. Reduce the number of moving elements in view and on the page. Disable scroll effects on mobile devices. Just keep things performant and animation silky smooth.
It's 2017 and you probably shouldn't be building parallax sites—but if you do (like I did) and you use this package try and use it responsibly. Keeping images small and optimized, reducing the number of moving elements in view and on the page, and disabling scroll effects on mobile devices should help achieve silky smooth animations and minimize annoying visitors.

42

src/components/Parallax.js

@@ -31,22 +31,42 @@ import React, { Component } from 'react';

// add this Parallax element to the global listener
if (typeof ParallaxScrollListener === 'undefined') {
throw new Error('Must import/require the global ParallaxScrollListener before adding React Parallax components.');
if (typeof ParallaxController === 'undefined') {
throw new Error('Must initialize the ParallaxController before adding React Parallax components.');
}
// create a new parallax element and save the reference
this.element = ParallaxScrollListener.createElement({
_inner: this._inner,
_outer: this._outer,
props: this.props,
this.element = ParallaxController.createElement({
elInner: this._inner,
elOuter: this._outer,
props: {
disabled: this.props.disabled,
offsetXMax: this.props.offsetXMax,
offsetXMin: this.props.offsetXMin,
offsetYMax: this.props.offsetYMax,
offsetYMin: this.props.offsetYMin,
slowerScrollRate: this.props.slowerScrollRate,
},
});
}
componentDidUpdate(prevProps) {
if (this.props !== prevProps) {
// updates the elements props when changed
ParallaxScrollListener.updateElement(this.element.id, { props: this.props });
componentWillReceiveProps(nextProps) {
// updates the elements props when changed
if (this.props !== nextProps) {
ParallaxController.updateElement(this.element, {
props: {
disabled: nextProps.disabled,
offsetXMax: nextProps.offsetXMax,
offsetXMin: nextProps.offsetXMin,
offsetYMax: nextProps.offsetYMax,
offsetYMin: nextProps.offsetYMin,
slowerScrollRate: nextProps.slowerScrollRate,
},
});
}
// resets element styles when disabled
if (this.props.disabled !== nextProps.disabled && nextProps.disabled) {
ParallaxController.resetElementStyles(this.element);
}
}
componentWillUnmount() {
ParallaxScrollListener.removeElement(this.element);
ParallaxController.removeElement(this.element);
}

@@ -53,0 +73,0 @@

2

src/index.js
export Parallax from './components/Parallax';
export ParallaxScroller from './libs/ParallaxScroller';
export ParallaxController from './libs/ParallaxController';

17

src/utils/index.js
export clamp from './clamp';
export getParallaxOffsets from './getParallaxOffsets';
export isElementInView from './isElementInView';
export parseValueAndUnit from './parseValueAndUnit';
export scaleBetween from './scaleBetween';
export function testForPassiveScroll() {
let supportsPassiveOption = false;
try {
const opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassiveOption = true;
},
});
window.addEventListener('test', null, opts);
window.removeEventListener('test', null, opts);
} catch (e) {}
return supportsPassiveOption;
}
export testForPassiveScroll from './testForPassiveScroll';

61

webpack.config.js

@@ -1,15 +0,25 @@

const PRODUCTION = process.env.NODE_ENV === 'production';
// Change this root to point to the desired example when
const EXAMPLE_ROOT = './examples/parallax-example/';
const createBabelConfig = require('./babelrc');
const merge = require('webpack-merge');
const nodeExternals = require('webpack-node-externals');
const path = require('path');
const webpack = require('webpack');
const createBabelConfig = require('./babelrc');
const nodeExternals = require('webpack-node-externals');
const exampleRoot = './examples/parallax-example/';
const baseConfig = {
resolve: {
alias: {
'react-scroll-parallax': path.resolve('./src'),
'components': path.resolve(EXAMPLE_ROOT + 'components'),
},
},
};
const clientConfig = {
entry: path.resolve(exampleRoot + 'client.js'),
const clientConfig = merge(baseConfig, {
entry: path.resolve(EXAMPLE_ROOT + 'client.js'),
output: {
path: path.resolve(
PRODUCTION ? exampleRoot + 'static' : exampleRoot + 'dist'
EXAMPLE_ROOT + 'dist'
),

@@ -19,9 +29,2 @@ filename: 'bundle.js',

resolve: {
alias: {
'react-scroll-parallax': path.resolve('./src'),
'components': path.resolve(exampleRoot + 'components'),
},
},
module: {

@@ -32,3 +35,3 @@ rules: [

include: [
path.resolve(exampleRoot),
path.resolve(EXAMPLE_ROOT),
path.resolve('./src'),

@@ -43,3 +46,3 @@ ],

include: [
path.resolve(exampleRoot),
path.resolve(EXAMPLE_ROOT),
],

@@ -50,3 +53,3 @@ },

include: [
path.resolve(exampleRoot),
path.resolve(EXAMPLE_ROOT),
],

@@ -73,5 +76,5 @@ loaders: [

},
};
});
const serverConfig = {
const serverConfig = merge(baseConfig, {
target: 'node',

@@ -87,6 +90,7 @@

entry: path.resolve(exampleRoot + 'server.js'),
entry: path.resolve(EXAMPLE_ROOT + 'server.js'),
output: {
path: path.resolve(
PRODUCTION ? exampleRoot + 'static' : exampleRoot + 'dist'
EXAMPLE_ROOT + 'dist'
),

@@ -96,9 +100,2 @@ filename: 'server.js',

resolve: {
alias: {
'react-scroll-parallax': path.resolve('./src'),
'components': path.resolve(exampleRoot + 'components'),
},
},
module: {

@@ -109,3 +106,3 @@ rules: [

include: [
path.resolve(exampleRoot),
path.resolve(EXAMPLE_ROOT),
path.resolve('./src'),

@@ -119,3 +116,3 @@ ],

include: [
path.resolve(exampleRoot),
path.resolve(EXAMPLE_ROOT),
],

@@ -140,4 +137,4 @@ loaders: [

},
};
});
module.exports = PRODUCTION ? [clientConfig] : [clientConfig, serverConfig];
module.exports = [clientConfig, serverConfig];
lib/libs/ParallaxScroller.js
src/libs/ParallaxScroller.js
.eslintrc

Sorry, the diff of this file is not supported yet

examples/parallax-example/components/Intro/Intro.scss

Sorry, the diff of this file is not supported yet

examples/parallax-example/components/IntroCopy/IntroCopy.scss

Sorry, the diff of this file is not supported yet

examples/parallax-example/components/Marquee/Marquee.scss

Sorry, the diff of this file is not supported yet

examples/parallax-example/components/Overlap/circle-rings.svg

Sorry, the diff of this file is not supported yet

examples/parallax-example/components/ParallaxExample/ParallaExample.scss

Sorry, the diff of this file is not supported yet

examples/parallax-example/components/ShapeField/ShapeField.scss

Sorry, the diff of this file is not supported yet

examples/parallax-example/components/TriangleGrid/TriangleGrid.scss

Sorry, the diff of this file is not supported yet

examples/parallax-example/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc