Atropos for Angular

This is merely Atropos wrapped by an Angular component.

Installation

Install the package:

npm install atropos-angular

Add AtroposModule to your imports:

import { AtroposModule } from 'atropos-angular';

@NgModule({
    // ...
    imports: [
        // ...
        AtroposModule,
    ],
    // ...
})

Usage

You can use the atropos component inside your templates:

<atropos>
    // ... Your parallax content
</atropos>

Make sure the atropos element has some styling for it to work properly:

atropos {
    width: 320px;
    height: 160px;
}

Properties and events

Consult the Official Atropos Docs for a list of properties and events.

Slots

In order to place elements in certain containers within the atropos HTML layout, the following slots are available:

• root
• scale
• rotate

You can place elements in those slots like so:

<atropos>
    <div slot="root"><!-- Inside the root container --></div>
    <div slot="scale"><!-- Inside the scale container --></div>
    <div slot="rotate"><!-- Inside the rotate container --></div>
    <div><!-- Inside the inner container --></div>
</atropos>

Consult the Official Atropos Docs for more information.