
Security News
MCP Community Begins Work on Official MCP Metaregistry
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
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 308 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
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
Research
Security News
Socket uncovers an npm Trojan stealing crypto wallets and BullX credentials via obfuscated code and Telegram exfiltration.
Research
Security News
Malicious npm packages posing as developer tools target macOS Cursor IDE users, stealing credentials and modifying files to gain persistent backdoor access.