Skip to content

munrocket/parallax-effect

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Jun 12, 2021
src
Jun 12, 2021
Apr 26, 2020
Apr 26, 2020
Jun 30, 2020
Apr 26, 2020

parallax-effect bundlephobia

Parallax effect in javascript using face tracking, can be a good improvement for 3d scenes. This library uses TFJS with WASM backend on CPU, so your GPU will be free. Supports lazy loading.

Inspired by @lucknknock C# demo

Live examples

Installation

Run npm install parallax-effect and import it as ES module

  import * as Parallax from '../dist/parallax-effect.mjs';
  Parallax.init( view => {
    console.log( view );
  } );

or add it in script tag

  <script src="https://cdn.jsdelivr.net/npm/parallax-effect/dist/parallax-effect.min.js"></script>
  <script>
    Parallax.init( view => {
      console.log( view );
    } );
  </script>

Usage

View in code below is a 3d vector with components similar to spherical coordinates: x/y in range [-1, 1] and proportional to angle, z is proportional to distance from camera to head. Also you can check for successfull init or change default settings: smoothing, default distance between eyes to change z, threshold in blazeface model or change tfjs source links from jsdelivr to unpkg / own server.

Parallax.init(
  view => {
    console.log( view.x, view.y, view.z );
  }, {
    smoothEye: 0.8, // smoothing eye (x, y)
    smoothDist: 0.25, // smoothing distance (z)
    defautDist: 0.12, // parameter for distance estimation
    threshold = 0.85 // blazeface detection probability
  }
).then( rafId => {
  console.log( 'cancelAnimationFrame(' + rafId + ')' );
}).catch( errorMessage => {
  console.log( errorMessage );
} );

Roadmap

  • smoothing head detection with EMA
  • support for iOS/Macs
  • lazy load for tfjs
  • three.js/pixi.js examples
  • mouse fallback
  • fix head rotation but not commit it in main branch yet
  • gyroscope fallback

Contribution

Feel free to make issues or/and contribute.

About

πŸ€ΉπŸ»β€β™‚οΈ Parallax effect in javascript using face tracking. An immersive view in 3d with webcam.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published