Göcek is a lightweight scrolling state library that allows elements to be acted on when they become (or stop being) visible, such as applying CSS animations or loading as-yet-unloaded images.
Göcek looks for hooks in the DOM, in the form of data attributes, to know which elements to listen to as they become/stop being visible.
Example 1: Lazy load an image when it becomes visible. See Images.
Example 2: Listen for an element becomming partially visible and add a class to it (perhaps triggering an animation) when this happens.
Göcek listens for the following classes/attributes:
lazy- the main identifier Göcek looks for. All elements to use with Göcek must have this.
completely- denotes that the element must become completely visible/invisible for any events to fire, not partially (which is the default).
[data-src](images only) - the image URI to load into the image's
srcproperty once the element becomes visible
For elements inserted into the DOM later after page load, you can use these with Gocek via the
register() method discussed below.
on(event, el, callback[, once])- register an event callback,
callback, to fire when an element,
el(HTML element reference or DOM selector string), becomes partially or completely (depending on whether it has the class
completely) visible or invisible as denoted by
event- a string which is either 'visible' or 'hidden'. If
onceis true, this callback will fire only the first time this occurs, not subsequently. The callback is passed two arguments - the event object, and a reference to the target element.
is_visible(el[, completely])- a utility method to establish whether an element ,
el(a reference to an HTML element - and not necessarily an element registered with Göcek) is currently visible - partially or, if
compltetely(bool) is true, then completely. Returns a boolean denoting the result.
register_el(els)- register one or more elements,
els(an HTML element reference or array of element references) for use with Göcek. This is useful for elements injected into the DOM later, after page load, i.e. which would have been missed by Göcek's initial sweep.