ngx-intersection-observer

Observe visiblity of elements and get notified when they visit/leave the window viewport.

Features

• Observe elements via IntersectionObserver API or fallback to scroll listener to detect if the element enters/leaves the viewport.
• Apply or remove classes based on element visiblity
• Specify threshold, how many precentage of the element need to be visible to trigger intersection.
• Specify intersection method (IntersectionObserver API or scroll listener)
• Event binding for intersecting elements.

Dependencies

ngx-intersection-observer | Angular --- | --- 1.0.13 | >=13.x

Install

Install the package via NPM

$ npm install --save  ngx-intersection-observer

Import the module Import the module to your angular application

//...
import { IntersectionObserverModule } from 'ngx-intersection-observer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    IntersectionObserverModule.forRoot({
      debounce: 50,
      threshold: 30,
      autoRemove: true
    } as IntersectionObserverConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage and Options

Name | Type | Description | Optional | Default --- | --- | --- | --- | --- visitClass | String | List of classes to apply, when the element visits the windows viewport. | Yes leaveClass | String | List of classes to apply, when the element leaves the window viewport. | Yes removeVisitClass | String | List of classes to remove, when the element visits the window viewport. removeLeaveClass | String | List of classes to remove, when the element leaves the windows viewport. | Yes autoRemove | Boolean | true / false If true classes will be removed automatically when the element leaves the viewport, otherwhise use removeVisitClass property. | Yes | true useScroll | Boolean | true / false If true, use scoll listener otherwhise use IntersectionObserver. By default IntersectionBehavior is used, fallback to scroll listener. | Yes | true threshold | Number | Specifies how many precentage of the element need to be visible in the viewport to treat it as intersection. Specify a value between 0% and 100% | Yes | 30% intersection | Event | Function which is called when the element enters/leaves the viewport. | Yes

Example

<div intersectionObserver
     [visitClass]="'bg-blue border'"
     [autoRemove]="true"
     [threshold]="30"
     [useScroll]="false"     
     (intersection)="intersect($event)"
     class="bg-red"
     id="my-div"></div>
</div>

#my-div {
  width: 300px;
  height: 300px;
  margin-top: 2000px;
}

.bg-red {
  background-color: red;
}

.bg-blue{
    background-color: blue;
}

.border{
    border: 5px solid black;

Use with animate.css

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints. https://animate.style/

If you want to apply animations from animate.style, use those two classes to prevent flickering.

.hide-on-init {
  visibility: hidden;
}

.animate__animated {
  visibility: visible !important;
}

Example

<div intersectionObserver
     [visitClass]="'bg-blue border'"
     [autoRemove]="true"
     [threshold]="30"
     [useScroll]="false"     
     (intersection)="intersect($event)"
     class="bg-red hide-on-init"
     id="my-div"></div>
</div>

License

MIT

GitHub @tobiasschiebel | Twitter @SchiebelTobias