Reveal elements on the page as they come into view. It will also wait for images inside the main element to load before reveal any content.
IE9+ with polyfills.
To support IE<=11, you will need to add
Native Android browsers will fade the text in immediately. Browsers without transitions will see the text appear abruptly. You may modify
OdoTypeAnimation.HAS_SCROLL_ANIMATION to choose whether the text fades in upon viewport enter or immediately.
OdoDevice, OdoHelpers, OdoViewport
This component has required css - css/odo-reveal.css.
odo-reveal class on the top level element of the module. This is used by the component to determine how far you have scrolled into the module.
Then add the
odo-reveal__target class to any element which needs to be faded in.
odo-reveal--3, .etc. (up to 10) to add a delay to other elements.
<section class="odo-reveal"> <h2 class="odo-reveal__target">Markup</h2> <p class="odo-reveal__target odo-reveal--2">…</p> </section>
Odo Reveal will look for a
data-threshold attribute on the main element (
<section class="odo-reveal"> above) and pass that along to OdoViewport as the threshold value. The threshold is
25% by default.
<section class="odo-reveal" data-threshold="50%">…</section>
You can instantiate all the odo reveal elements currently on the page with
initializeAll which will return an array of
OdoReveal instances. They can also be created with
var instances = OdoReveal.initializeAll();
Odo Reveal waits for images inside the main element to load before revealing the content. Warning if you’re using deferred image loading (like Odo Responsive Images), images won’t start loading until they’re in the viewport, which can cause unexpected results with Odo Reveal.
Sometimes you really don’t want to wait for an image to load when using Odo Reveal. In this case, you can add the
.odo-reveal__ignore class to the parent of the image and it will not be waited on. For Odo Responsive Images, the class should be added directly to the placeholder:
<div class="odo-responsive-img odo-reveal__ignore">