Hello Yummi!
Hey! What's this? The Yummi-loader is nothing more than a simple LESS file with some CSS3 animations. Use them just adding 'off' class on your body element and changing it with 'on' on $(window).load() or $(document).ready() events. Try it now.
Browser compatibility IE10+ // Webkit // Firefox 
<body class="off">
<div class="scaleInv anim_1">
<p class="scaleInv anim_2">
<a class="scale anim_n"></a>
</p>
</div>
</body>
On this page we toggle on/off class on $(window).load() event.
$(window).load(function() {
$('body').toggleClass('on off');
});
You can also use an optional handy little jQuery plugin that waits for animation to end before opening a link. Usage is straightforward just add `.trigger` class to any link you wish to apply this effect to.
<a class="trigger" href="example.html">I'm a fancy link</a>
Configuring the LESS file is easy, just choose the number of elements you are working with, the delay between each other and your are good to go.
@iterations: 15; // number of elements to apply effects on
@delay: 0.15; // delay between elements transitions
There are some other options you can set too, it's up to you.
@opacity_start: 0;
@opacity_finish: 1;
@opacity_speed_in: 0.5s; // seconds
@opacity_speed_out: 0.5s; // seconds
@opacity_delay_in: 0.5s; // seconds
@opacity_delay_out: 0.5s; // seconds
@opacity_easing_in: cubic-bezier(0,0,1,1);
@opacity_easing_out: cubic-bezier(0,0,1,1);
Yummi-loader uses lesshat mixing, you can download it.
You can compile LESS files using one of these compilers.
Support or Contact
Having trouble or suggestions? Tweet me