InviewComponent

InviewComponent applies a CSS class to an element when it comes visible.

InviewComponentOptions

Example

Scroll down to view the inview element.

(scroll down)

HTML

<div class="spacer"></div>

<div class="inview">
  This should change from red to blue when the element is inview.
</div>

<div class="spacer"></div>

CSS

.inview {
  background-color: #ba2121;
  color: white;
  padding: 100px 40px;
  text-align: center;
  transition: background-color 1s ease;
}
.inview--visible {
  background-color: #428bca;
}

.spacer {
  min-height: 100vh;
}

JavaScript

import {Registry} from 'airkit2';
import {InviewComponent} from 'airkit2/inview';


const app = new Registry();
app.register('inview', InviewComponent, {
  inviewClass: 'inview--visible',
});
document.addEventListener('DOMContentLoaded', () => {
  app.run();
});