Atropos Element Documentation

Browser Compatibility

Atropos is compatible with browsers which support the following features:

• Pointer Events
• CSS 3D Transforms
• CSS Transitions

Installation

We can install Atropos from NPM

npm i atropos

Styles

To style Atropos Component, you can target and customize various parts of the component using the part attribute. The following parts are available for styling:

• scale: This part represents the container for scaling the component. You can apply styles to this part to control the scaling behavior.
• rotate: This part represents the container for rotating the component. You can target this part to apply styles related to rotation.
• inner: This part represents the inner content of the component. You can style this part to modify the appearance of the inner content.

Here's an example of how you can write CSS rules to style the inner part of the atropos-component:

atropos-component::part(inner) {
  /* Your styles for the inner part */
}

Component Usage

<script>
  // import Atropos component
  import AtroposComponent from 'atropos/element';
  // register Atropos component
  customElements.define('atropos-component', AtroposComponent);
</script>
<atropos-component class="my-atropos">
    <!-- ... -->
</atropos-component>

In addition to Atropos's main CSS styles, we may need to add some custom styles, for example to set Atropos size:

.my-atropos {
  width: 320px;
  height: 160px;
}

Component Attributes

For example:

<script>
  import AtroposComponent from 'atropos/element';
  customElements.define('atropos-component', AtroposComponent);
</script>
<atropos-component class="my-atropos"
  active-offset="40"
  shadow-scale="1.05"
>
</atropos-component>
<script>
  const atroposComponent = document.querySelector('.my-atropos');
  atroposComponent.addEventListener('enter', function() {
    console.log('Enter');
  });
  atroposComponent.addEventListener('leave', function() {
    console.log('Leave');
  });
  atroposComponent.addEventListener('rotate', function(event) {
    console.log('Rotate', event.detail);
</script>

Get Instance

We can access Atropos instance as follows:

const atroposComponent = document.querySelector('atropos-component');
const atroposInstance = atroposComponent.atroposRef;

Control Elements Offsets

Atropos uses special data- attributes to control elements offset (parallax effect):

• data-atropos-offset - controls element offset/translate in percentage.

  For example:

  • data-atropos-offset="5" means that element will move 5% of its size on max rotate angles.
  • data-atropos-offset="-5" means that element will move -5% of its size on max rotate angles.

  Basically if you want the element to appear closer (be in front of the scene), then this value should be positive. And if you want the element to appear in the distance (be behind the scene), then this value should be negative.

• data-atropos-opacity - controls element opacity.
  For example:

  • data-atropos-opacity="0;1" - means element's opacity will change from 0 (on initial state) and up to 1 (on max rotate angles).
  • data-atropos-opacity="0.1;0.8" - means element's opacity will change from 0.1 (on initial state) and up to 0.8 (on max rotate angles).
  • data-atropos-opacity="1;0" - means element's opacity will change from 1 (on initial state) and down to to 0 (on max rotate angles).

For example:

<atropos-component>
  <!--
  Element with negative offset will move in reverse direction,
  making it appear behind the scene
  -->
  <img src="image-bg.png" data-atropos-offset="-5" />
  <!--
  Element with no offset will not move
  -->
  <img src="image-middle.png" data-atropos-offset="0" />
  <!--
  Element with positive offset will move in same direction,
  making it appear in front of the scene
  -->
  <img src="image-front.png" data-atropos-offset="5" />
</atropos-component>

What's next?

As you see it is easy to integrate Atropos into your website or app. So here are your next steps:

• If you have questions about Atropos ask them in StackOverflow or use GitHub Discussions
• Create issue on GitHub if you found a bug.