How to make use of it:

1. Install the Atropos with NPM.

# NPM
$ npm i atropos --save

2. Import the Atropos.

import Atropos from './build/esm/atropos.esm';
import './build/atropos.css';

3. Add photos to the Atropos container and decide the aspect’s offset/translate in proportion as follows:

<div href="#" class="atropos atropos-banner">
  <div class="atropos-scale">
    <div class="atropos-rotate">
      <div class="atropos-inner">
        <img class="atropos-banner-spacer" src="./i/atropos-bg.svg">
        <img data-atropos-offset="-4.5" src="./i/atropos-bg.svg">
        <img data-atropos-offset="-2.5" src="./i/atropos-mountains.svg">
        <img data-atropos-offset="0" src="./i/atropos-forest-back.svg">
        <img data-atropos-offset="2" src="./i/atropos-forest-mid.svg">
        <img data-atropos-offset="4" src="./i/atropos-forest-front.svg">
        <img data-atropos-offset="5" src="./i/atropos-logo-en.svg">
      </div>
    </div>
  </div>
</div>

4. Activate the Atropos and performed.

window.atropos = new Atropos({
  el: document.querySelectorAll('.atropos')[0],
});

5. You can even apply opacity transitions to these parallax photos.

<div href="#" class="atropos atropos-banner">
  <div class="atropos-scale">
    <div class="atropos-rotate">
      <div class="atropos-inner">
        <img class="atropos-banner-spacer" src="./i/atropos-bg.svg">
        <img data-atropos-offset="-4.5" data-atropos-opacity="0.1;0.8" src="./i/atropos-bg.svg">
        <img data-atropos-offset="-2.5" src="./i/atropos-mountains.svg">
        <img data-atropos-offset="0" data-atropos-opacity="1;0" src="./i/atropos-forest-back.svg">
        <img data-atropos-offset="2" src="./i/atropos-forest-mid.svg">
        <img data-atropos-offset="4" src="./i/atropos-forest-front.svg">
        <img data-atropos-offset="5" data-atropos-opacity="0;1" src="./i/atropos-logo-en.svg">
      </div>
    </div>
  </div>
</div>

6. Available configs to customize the 3D parallax hover effect.

window.atropos = new Atropos({

  // target element
  el: document.querySelectorAll('.atropos')[0],

  // active offset in px
  activeOffset: 50,

  // shadow offset in px
  shadowOffset: 50,

  // shadow scale factor
  shadowScale: 1,

  // duration
  durationEnter: 300,
  durationLeave: 600,

  // when enabled, it won't rotate the container until pointer move out from originally entered quarter
  rotateLock: true,

  // rotate container on pointer move
  rotate: true,

  // rotate container on touch move
  rotateTouch: true,

  // max rotation along the X-axis
  rotateXMax: 15,

  // max rotation along the Y-axis
  rotateYMax: 15,

  // inverts rotation
  rotateXInvert: false,
  rotateYInvert: false,

  // show shadow
  shadow: true,

  // enable highlight
  highlight: true,

  // callbacks
  onEnter: function(){
    // do something
  }
  onLeave: function(){
    // do something
  }
  onRotate: function(x, y){
    // do something
  }
  
});

7. Available properties and API strategies.

// get the current element
instance.el;

// check if is active
instance.isActive

// get options
instance.params;

// destroy the instance
instance.destroy();

// check if is destroyed
instance.destroyed

8. The library additionally works with React framework.

// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import './build/atropos.css';
import App from './App.jsx';
ReactDOM.render(React.createElement(App), document.getElementById('app'));

// app.jsx
import React from 'react';
import Atropos from './build/react';
const App = () => {
  return (
    <div className="container">
      <Atropos className="atropos-banner" highlight={false} onEnter={() => console.log('enter')}>
        <img className="atropos-banner-spacer" src="./i/atropos-bg.svg" alt="" />
        <img data-atropos-offset="-4.5" src="./i/atropos-bg.svg" alt="" />
        <img data-atropos-offset="-2.5" src="./i/atropos-mountains.svg" alt="" />
        <img data-atropos-offset="0" src="./i/atropos-forest-back.svg" alt="" />
        <img data-atropos-offset="2" src="./i/atropos-forest-mid.svg" alt="" />
        <img data-atropos-offset="4" src="./i/atropos-forest-front.svg" alt="" />
        <img data-atropos-offset="5" src="./i/atropos-logo-en.svg" alt="" />
      </Atropos>
    </div>
  );
};
export default App;

9. And Vue framework.

import { createApp } from 'vue';
import './build/atropos.css';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');

// app.vue
<template>
  <div class="container">
    <Atropos class="atropos-banner" @enter="onEnter">
      <img class="atropos-banner-spacer" src="./i/atropos-bg.svg" alt="" />
      <img data-atropos-offset="-4.5" src="./i/atropos-bg.svg" alt="" />
      <img data-atropos-offset="-2.5" src="./i/atropos-mountains.svg" alt="" />
      <img data-atropos-offset="0" src="./i/atropos-forest-back.svg" alt="" />
      <img data-atropos-offset="2" src="./i/atropos-forest-mid.svg" alt="" />
      <img data-atropos-offset="4" src="./i/atropos-forest-front.svg" alt="" />
      <img data-atropos-offset="5" src="./i/atropos-logo-en.svg" alt="" />
    </Atropos>
  </div>
</template>
<script>
import Atropos from './build/vue';
export default {
  components: {
    Atropos,
  },
  setup() {
    const onEnter = () => {
      console.log('Enter');
    };
    return {
      onEnter,
    };
  },
};
</script>

See Demo And Download