Odo Reveal

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.

Support

IE9+ with polyfills.

To support IE<=11, you will need to add classList and Element#closest polyfills.

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.

Dependencies

OdoDevice, OdoHelpers, OdoViewport

Styles

This component has required css - css/odo-reveal.css.

Markup

Place the 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.

Finally, add odo-reveal--2, 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>

JavaScript Setup

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 new OdoReveal(element).

var instances = OdoReveal.initializeAll();

Images

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.

High Life 8-bit swag

Neutra salvia chambray wayfarers ugh lap. Vice lumbersexual Intelligentsia try-hard shabby chic roof party fingerstache. Street art chia fingerstache, Blue Bottle pop-up +1 hella synth banjo tofu cronut put a bird on it messenger bag stumptown. Blue Bottle yr shabby chic biodiesel

hello world

All I ever really wanted in this short life was chocolate.

hello world

Meet REDACTED, a new type of computer

A bigger screen with power to match.

Explore It

To break the rules, you must first master them.

The New Millenary breaks the rules of watch design, with a distinctly feminine aesthetic.

Explore It

Williamsburg listicle chia, plaid pour-over meh hashtag

Ethical fanny pack iPhone food truck. Carles pug sustainable, flexitarian Etsy selvage scenester iPhone Portland raw denim sartorial artisan polaroid Pitchfork.

Do the thing

Ignoring Images

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">
hello world

Portland drinking vinegar craft beer

Biodiesel art party kitsch, sustainable dreamcatcher +1 gentrify gastropub squid Portland semiotics.

Explore It