What can I apply parallax effects to?

Anything! You can apply Imagine on virtually any element in your page. Imagine will animate whatever you need when scrolling the page.

How do I animate an element?

Make sure you’ve followed the previous Getting Started articles before you continue.

Animating elements is simple:

1. Add the imagine class to your element.
2. Set the animation using the data-imagine attribute.
3. Initialize imagine for the chosen element.

Let’s take the example above.

<div class="imagine" data-imagine="rotationY 0.5, rotationZ 0.5, scale 0.5">
  <h1>Hello imagine!</h1>
  <p>Animating page elements is simpler than ever.</p>
</div>

You can see we’re using the data-imagine attribute to set the element’s animation. You can read more about animations in the custom animations guides.

Imagine will process the animation from the attribute we’ve set. All that’s left after adding the data-imagine attribute is to initialize imagine using javascript.

$('.imagine').imagine()

That’s it! This way, you can apply imagine to anything in your page. Simple, hassle free, anywhere in your page.