Checkpoint

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Up</div>

$(".checkpoint").checkpoint();

Using Checkpoint

Main

checkpoint.js
checkpoint.css

Dependencies

jQuery
core.js

Basic

Checkpoint will apply CSS based animations and trigger events when the target element is scrolled into view.

$(".checkpoint").checkpoint();

<div class="checkpoint" data-checkpoint-animation="fade-up">
  ...
</div>

Offset and Intersect

Adjust the point the element becomes visible by setting the offset and intersect options:

$(".checkpoint").checkpoint({
  offset: 100, // distance from intersect position
  intersect: 'center-top' // '[window]-[element]'
});

These values can also be set as data attributes for more fine grain control:

<div class="checkpoint" data-checkpoint-animation="zoom-in" data-checkpoint-offset="100" data-checkpoint-intersect="center-top">
  ...
</div>

Container

Use the data-checkpoint-container attribute to define a parent element. The animation and events will still be trigger on the target element:

<div class="container">
  <div class="checkpoint" data-checkpoint-container=".container" data-checkpoint-animation="zoom-in">
    ...
  </div>
</div>

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-checkpoint-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Events

Events are triggered on the target instance's element, unless otherwise stated.

Methods

Methods are publicly available to all active instances, unless otherwise stated.

resize

Updates instance.

$(".target").checkpoint("resize");