Porthole!

Porthole provides a markup-based mechanism for activating items that are in the viewport. This helps trigger animations when they're in view, for example.

• Demo 1: activating elements once
• Demo 2: activating elements every time they enter viewport
• Demo 3: activating elements with tolerance
• Demo 4: manually opting elements in and out via CSS
• Porthole events

Demo 1: activating elements once

In this first demo, elements with a data-scroll-activate attribute will receive a inviewport class when they scroll into the viewport. The following CSS makes them fade in to full green when that class is applied:

Demo 2: activating elements every time they enter viewport

The following blocks have data-scroll-deactivate attributes in addition to the data-scroll-activate attributes, which will cause the class to be removed when the element is out of viewport.

Demo 3: activating elements with tolerance

The following blocks have data-scroll-activetolerance attributes with a value of 300, causing them to activate when they are above 300px from the bottom of the viewport. This is good for animations. A negative value causes elements to activate before they reach the bottom of the viewport, which is good for lazy-loading images.

Manually declaring visibility with CSS

Sometimes the built-in check for whether an element is in the viewport passes even though an element is not visible for a variety of reasons (opacity, visibility, positioning within a cropped parent element, etc.). To manually declare an element non-visible to porthole, you can set the element's :before pseudo-element content to "hidden".

/* hidden to porthole */
.myelement:before { content: "hidden"; display: none; }

/* visible to porthole */
.myelement-visible:before { content: ""; }

Events

Porthole will trigger an inviewport event on elements with a data-scroll-activate attribute when they enter the viewport, and it will trigger an outviewport event when it exits the viewport.

Once initialized, Porthole automatically checks for elements in the viewport on scroll and resize. The porthole.init.js file initializes porthole when the "enhance" event occurs on the document. We typically recommend triggering this "enhance" event on domready. You can also cause porthole to check which elements are in view by triggering a "porthole" event on the window.