🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

parallaxy

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

parallaxy

Adds parallax effect to images and videos

2.0.1
latest
Version published
Weekly downloads
2
-60%
Maintainers
1
Weekly downloads
 
Created

What it is

Adds parallax effect to images and videos.

Installation

parallaxy.js is available as an npm package.

npm install parallaxy --save

Add parallaxy.min.js to the bottom of the <body> like this:

<script src="parallaxy.min.js"></script>

Note

This is an very early version of parallaxy.

How to Use

Usage

In this example the image will have a parallaxy effect.

<div data-parallaxy>
	<img src="image.jpg">
	<div data-parallaxy-ignore>
		<h1>Content above</h1>
	</div>
</div>

After DOM change

If the DOM has changed and you want to reset Parallaxy, just run;

Parallaxy.refresh();

Options

Options must be passed via data-attributes. Append the option name to data-parallaxy-, as in data-parallaxy-speed="0.25".

NameTypeDefaultDescription
speedFloat0.5Adjust parallaxy effect from 0-1 (none-max)
ignoreBooleanfalseIgnore parallaxy effect on this element

Global options (data-attribute):

NameTypeDefaultDescription
ignoresmoothscrollBooleannullIgnore smoothMouseWheel. Place anywhere

Browser Support

Coming soon. Uses CSS translate2D to scale and position images.

License

The code is available under the MIT License.

FAQs

Package last updated on 27 Nov 2015

Did you know?

Socket

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.

Install

Related posts