Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
parallaxis
Advanced tools
Readme
A tiny parallax library that updates styles on scroll
Parallax works by listening to every scroll event. Now, that's not great, as it can really mess performance up.
Parallaxis allows only a few of the best performing element styles to be updated on scroll.
opacity
translateX
translateY
scale
Still, overuse may kill performance. Especially on low-end devices.
Alternatively, take a look in /examples
.
npm install parallaxis
<h1
class="js-parallaxis"
data-start="0"
data-end="200"
data-opacity-start="1"
data-opacity-end="0"
>
Hello world
</h1>
import parallaxis from 'parallaxis'
parallaxis()
The above example translates to:
window.scrollY
equals 0
then the opacity
of the h1
will be 1
.window.scrollY
equals 200
, or more, then the
opacity
of the h1
will be 0
.window.scrollY
is somewhere between 0
and
200
then the opacity
of the h1
will be
somewhere between 0
and 1
.The parallaxis
function can take an object, that
may include the following properties.
The class name that Parallaxis uses to locate elements.
Defaults to js-parallaxis
.
parallaxis({ className: 'my-special-class' })
Parallaxis uses element data attributes for configuration.
This is the window.scrollY
position that will be the
element's update start point.
<h1
class="js-parallaxis"
data-start="0"
>
Hello world
</h1>
This is the window.scrollY
position that will be the
element's update end point.
<h1
class="js-parallaxis"
data-start="0"
data-end="200"
>
Hello world
</h1>
Defining data-opacity-start
and data-opacity-end
will
result in opacity
style updates.
<h1
class="js-parallaxis"
data-start="0"
data-end="200"
data-opacity-start="1"
data-opacity-end="0"
>
Hello world
</h1>
Defining data-translatex-start
and data-translatex-end
will result in transform: translateX()
style updates.
<h1
class="js-parallaxis"
data-start="0"
data-end="200"
data-translatex-start="0"
data-translatex-end="200"
>
Hello world
</h1>
Defining data-translatey-start
and data-translatey-end
will result in transform: translateY()
style updates.
<h1
class="js-parallaxis"
data-start="0"
data-end="200"
data-translatey-start="0"
data-translatey-end="200"
>
Hello world
</h1>
Defining data-scale-start
and data-scale-end
will result in transform: scale()
style updates.
<h1
class="js-parallaxis"
data-start="0"
data-end="200"
data-scale-start="1"
data-scale-end="4"
>
Hello world
</h1>
If data-relative
is set to true
, the data-start
and data-end
attributes will be relative to the
element, rather than the window.
<h1
class="js-parallaxis"
data-relative="true"
data-start="-200"
data-end="0"
data-opacity-start="0"
data-opacity-end="1"
>
Hello world
</h1>
Parallaxis is packaged with Babel, and
makes use of Array.from
.
If you want Parallaxis to work on browsers that don't support
this method (e.g. IE11), then you will need to
polyfill Array.from
before calling parallaxis
.
FAQs
A tiny parallax library that updates styles on scroll
The npm package parallaxis receives a total of 10 weekly downloads. As such, parallaxis popularity was classified as not popular.
We found that parallaxis 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.