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.
Animating page elements is simpler than ever.
How do I animate an element?
Make sure you’ve followed the previous Getting Started articles before you continue.
Animating elements is simple:
- Add the
imagineclass to your element.
- Set the animation using the
- 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
That’s it! This way, you can apply imagine to anything in your page. Simple, hassle free, anywhere in your page.