Show the right things when you scroll
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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.