Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

parallax-effect bundlephobia

Parallax effect in javascript using face tracking, can be a good improvement for 3d scenes. If the user prohibits using the camera, nothing loads. This library uses TFJS with WASM backend on CPU, so your GPU will be free.

Inspired by https://twitter.com/lucknknock

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="../dist/parallax-effect.js"></script>
  <script>
    Parallax.init( view => {
      console.log( view );
    } );
  </script>

Usage

View is a 3d vector with components similar to spherical coordinates: x/y in range [-1, 1] it's a value proportional to angle (because Ξ± β‰ˆ sin(Ξ±)) and z is a value 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,
    smoothDist: 0.25,
    defautDist: 0.12,
    threshold = 0.85
  }
).then( rafId => {
  console.log( 'cancelAnimationFrame(' + rafId + ')' );
}).catch( errorMessage => {
  console.log( errorMessage );
} );

Roadmap

  • deepview example
  • ema smoothing
  • iOS fix for camera
  • lazy load for tfjs
  • pixi.js example
  • mouse fallback
  • 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

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.