Show the right things when you scroll
JavaScript HTML
Latest commit 69add5a Jul 7, 2016 @kopiro kopiro builder
Permalink
Failed to load latest commit information.
test
.gitignore
LICENSE
README.md
package.json
ulala.js
ulala.min.js

README.md

Ulala

Show the right things when you scroll

Usage

Include the script in your page. I suggest you to use the RAWGIT CDN.

<script src="https://rawgit.com/caffeinalab/ulala/master/ulala.min.js"></script>
<script>
Ulala.init(/* config */);
</script>

Features out of the box

Lazy loading

Just set data-image=[URL] to your tag HTML. The image will be loaded when it's visible and the -loaded class will be added.

If the tag is an IMG, the src attribute will be used. Otherwise, the image will be applied with a background-image.

Futhermore, unless you don't specify noSuffixes: true the image path will be rewritten based on device pixel ratio and the width.

Waypoint

Set data-waypoint on your tag, and when the scroll reach your element, the -visible class will be added.

NOTE: If the tag is an image or a lazy loading image, the class will be added only when the image is fully loaded.

Parallax

Set the data-parallax=[RATIO] on your image, and wrap it in a simple <div data-parallax-wrapper></div>.

So the HTML must looks like this:

<div data-parallax-wrapper>
    <img data-parallax="0.5" src="[URL]" /> 
</div>

The ratio value sets how much enlarge the image to apply the parallax; the default value is 0.25.

Config in .init()

Property Default Description
preloadIn 1 Ratio of the window to trigger the loading
visibilityIn 0 Ratio of the window to trigger the visibility
visibleClass -visible The class to add when visible
loadedClass -loaded The class to add when an image is loaded
useSuffixes true Tell the lib to use / not use suffix for images (like @2x

LICENSE

MIT.