
Security News
/Research
npm Phishing Email Targets Developers with Typosquatted Domain
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
react-springy-parallax
Advanced tools
A springy, composable parallax-scroller for React.
npm install react-springy-parallax --save
Demo: http://react-springy-parallax.surge.sh
Simple example: http://react-springy-parallax-simple.surge.sh
Example source: https://github.com/drcmda/react-springy-parallax/blob/master/example/index.js
More complex example: https://github.com/drcmda/awv3node-homepage (the one in the thumbnail)
How to use
import Parallax from 'react-springy-parallax'
// Pages determines the total height of the inner content container
// Each page takes 100% height of the visible outer container by default
<Parallax ref='parallax' pages={3}>
// Add as many layers as you like
<Parallax.Layer
// Page offset, or where the layer will be at when scrolled to
// 0 means start, 1 second page, 1.5 second and half, and so on ...
offset={0}
// Parallax factor, allows for positive and negative values
// Shifts the layer up or down in accordance to its offset
speed={0.5}>
<span>Layers can contain anything</span>
</Parallax.Layer>
</Parallax>
Can the effect be configured or muted?
Yes, you can use anything the Animated library offers: http://browniefed.com/react-native-animation-book
import Animated from 'animated/lib/targets/react-dom'
import Easing from 'animated/lib/Easing'
<Parallax
effect={(animation, toValue) =>
Animated.timing(animation, { toValue, duration: 200, easing: Easing.elastic(2) })}
... >
Or a zero timer for a tame, old-school parallax:
effect={(animation, toValue) =>
Animated.timing(animation, { toValue, duration: 0 })}
Is it possible disable the scroll bar for custom page navigation?
Yes. In this mode it will also make sure window-resize retains the last page seen.
You can always use scrollTo
, scroll bar or not, there is no restriction.
<Parallax
ref={ref => this.parallax = ref}
scrolling={false}
... >
<Parallax.Layer>
<div onClick={() => this.parallax.scrollTo(1)}>
Click to get to the next page
Does it scroll horizontally as well?
Sure does.
<Parallax horizontal ... >
FAQs
composeable springy parallax
The npm package react-springy-parallax receives a total of 441 weekly downloads. As such, react-springy-parallax popularity was classified as not popular.
We found that react-springy-parallax demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.
Security News
The EU Cyber Resilience Act is prompting compliance requests that open source maintainers may not be obligated or equipped to handle.