In 2013, I’ve released Emerge.js, a framework for coordinated page loading:
Normally, when a complex web page is loading, images appear in random order, causing unpleasant flashing. To replace it with nice and coordinated animations, programming is required. Emerge.js simplifies the task by removing the need to write any JavaScript code. The framework uses a declarative approach, where you specify a desired behaviour for each element and do not think about the implementation.
See also the introductory blog post. I’ve since updated it with new features.
Spinner stuff
In version 1.1 I’ve added a built-in loading spinner. Emerge.js no longer requires spin.js for that. But you can use a custom spinner, including spin.js, if you like.
As before, to display a spinner while an element loads, use data-spin="true". Use the new attributes data-spin-size, data-spin-color, data-spin-direction to control the appearance of the spinner (see documentation on the Emerge.js’s page).
To use another indicator (i.e. one of the nice ones by Sam Herbert) just wrap it into a named div and tell Emerge.js to use the contents of the div as an indicator:
<div id="cool-spinner" style="display: none">
<svg> ... </svg>
</div>
<div class="emerge" data-spin-element="cool-spinner">
<!-- while this loads, the cool spinner will be displayed -->
</div>
To use spin.js, make it run inside your div and align as necessary:
<script src="/path/to/spin.js"></script>
...
<div id="spinjs-spinner" style="display: none">
<div style="position: absolute; left: 50%; top: 50%; margin: -8px"></div>
</div>
<script>
var spinner = new Spinner ({
lines: 12,
length: 4,
width: 2,
radius: 8,
corners: 0,
rotate: 0,
color: 'rgba(96, 96, 96, .75)',
hwaccel: true
})
spinner.spin ($ ('#spinjs-spinner div')[0])
</script>
...
<div class="emerge" data-spin-element="spinjs-spinner">
<!-- while this loads, spin.js will be displayed -->
</div>
Scrolling stuff
In Version 1.2 with the new data-expose attribute you can make an element emerge only when the user scrolls enough for it to get into view.
<div class="emerge" data-expose="true">
<!-- this will emerge only when within view -->
</div>
Of course you can combine it with other attributes and effects. This div will emerge with a zoom effect in a quarter second after the users scrolls enough for it to become visible:
<div class="emerge" data-effect="zoom" data-hold="250" data-expose="true">
<!-- this will emerge quickly after getting into view -->
</div>
For an example, see my Projects page. The data-hold value varies slightly between elements there to add a nice randomness effect.
Update for free
If you’ve bought Emerge.js, you get the updates for free. Drop me a line if you have any questions.
