https://github.com/lnardon/interactiveparallax

A simple npm package to add parallax to HTML targets.
https://github.com/lnardon/interactiveparallax

css javascript mouse-tracking npm package parallax typescript

Last synced: 3 months ago
JSON representation

A simple npm package to add parallax to HTML targets.

• Host: GitHub
• URL: https://github.com/lnardon/interactiveparallax
• Owner: lnardon
• Created: 2021-04-12T05:00:50.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2021-11-12T06:41:31.000Z (over 4 years ago)
• Last Synced: 2025-01-10T17:49:54.496Z (over 1 year ago)
• Topics: css, javascript, mouse-tracking, npm, package, parallax, typescript
• Language: HTML
• Homepage: https://www.npmjs.com/package/interactiveparallax
• Size: 8.46 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Interactive Parallax

A module to create a parallax that interacts with the mouse move.

[![NPM](https://img.shields.io/npm/v/interactiveparallax.svg)](https://www.npmjs.com/package/interactiveparallax) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Demo



  



Live Demo [Here](https://lnardon.github.io/InteractiveParallax/ "Interactive Parallax Demo")

## Installation

```bash

npm install interactiveparallax

```

## Usage

### JavaScript

```ts

import useParallax from "animationsequence";

// containerClass = the class name of the container where the parallax will happen.

// targetClass = the class name of the targets to apply the effect.

// alertMobileUser = argument to inform in case the device has no support for the package.(Optional)

useParallax(containerClass: string, targetClass: string, alertMobileUser?: boolean)

```

### HTML Element

```html



```


## Example

```html



  
Interactive Parallax

  


  




```


```js

// Javascript

useParallax("splash", "target", true);

```

The full source code of the [Live Example](https://lnardon.github.io/InteractiveParallax/ "Interactive Parallax Demo") can be found in the `./index.html` file.