PHPackages                             heimseiten/contao-inviewport-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. heimseiten/contao-inviewport-bundle

ActiveContao-bundle[Utility & Helpers](/categories/utility)

heimseiten/contao-inviewport-bundle
===================================

Jedem Element, welches die Klasse ivp (in view port) hat, werden die Klassen iivp (is in view port) und wivp (was in view port) hinzugefügt, wenn es dem Besucher angezeigt wird, wobei iivp wieder entfernt wird, sobald der Besucher das Element nicht mehr sieht. Zudem wird dem Body-Tag die Klasse ivp\_active hinzugefügt, wenn die Funktionalität aktiv ist. JavaScript und CSS werden automatisch auf jeder Frontend-Seite eingebunden – auch im modernen Twig-Layout; eine manuelle Einbindung ist nicht mehr nötig.

3.3.0(2w ago)41.7k[1 issues](https://github.com/heimseiten/contao-inviewport-bundle/issues)3GPL-3.0-or-laterCSS

Since Jan 3Pushed 2w ago1 watchersCompare

[ Source](https://github.com/heimseiten/contao-inviewport-bundle)[ Packagist](https://packagist.org/packages/heimseiten/contao-inviewport-bundle)[ RSS](/packages/heimseiten-contao-inviewport-bundle/feed)WikiDiscussions main Synced today

READMEChangelog (10)Dependencies (4)Versions (48)Used By (3)

inViewport
==========

[](#inviewport)

Jedem Element, welches die Klasse ivp (in view port) hat, werden folgende Klassen hinzugefügt:

- iivp (is in view port)
- wivp (was in view port)
- above\_viewport
- below\_viewport
- over\_half\_ivp

Zudem wird dem Body-Tag die Klasse ivp\_active hinzugefügt, wenn die Funktionalität aktiv ist.

---

Installation
------------

[](#installation)

```
composer require heimseiten/contao-inviewport-bundle

```

Das JavaScript wird ab Version 3.2 **automatisch** auf jeder Frontend-Seite eingebunden – sowohl im klassischen `fe_page`- als auch im modernen Twig-Layout. Eine manuelle Einbindung bzw. das Aktivieren des JavaScript-Templates ist dafür **nicht mehr nötig**.

Die mitgelieferten Standard-Styles (Einblende-Effekte) sind optional und lassen sich bei Bedarf über *Seitenlayout → JavaScript → JavaScript-Templates → `js_inviewport`* aktivieren.

---

Mit folgenden Klassen, plus der Klasse ivp, könnnen Elemente eingeblendet werden:

- einblenden
- einblendenVonUnten
- einblendenVonOben
- einblendenVonRechts
- einblendenVonLinks
- einblendenVonHinten
- einblendenVonVorne

###  Health Score

51

—

FairBetter than 95% of packages

Maintenance91

Actively maintained with recent releases

Popularity23

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity66

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~43 days

Recently: every ~249 days

Total

47

Last Release

17d ago

Major Versions

1.1.1 → 2.0.02022-11-03

2.2.1 → 3.0.02023-01-09

### Community

Maintainers

![](https://www.gravatar.com/avatar/3a20bfd2f0aef996aa7d402a8f4d4065dcfd47ff9489d09b7205824f8dbc5b84?d=identicon)[heimseiten.de - Webdesign aus Köln](/maintainers/heimseiten.de%20-%20Webdesign%20aus%20K%C3%B6ln)

---

Top Contributors

[![heimseiten](https://avatars.githubusercontent.com/u/6552484?v=4)](https://github.com/heimseiten "heimseiten (72 commits)")

---

Tags

cssviewportintersectionobserverKlasse

### Embed Badge

![Health badge](/badges/heimseiten-contao-inviewport-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/heimseiten-contao-inviewport-bundle/health.svg)](https://phpackages.com/packages/heimseiten-contao-inviewport-bundle)
```

###  Alternatives

[metamodels/core

MetaModels core

10156.4k68](/packages/metamodels-core)[terminal42/contao-node

Node bundle for Contao Open Source CMS

3177.0k6](/packages/terminal42-contao-node)[oveleon/contao-component-style-manager

Style and CSS-Class Manager for Contao Open Source CMS

2538.4k9](/packages/oveleon-contao-component-style-manager)[markocupic/calendar-event-booking-bundle

Contao Calendar Event Booking Bundle

135.2k1](/packages/markocupic-calendar-event-booking-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)