#Hello Yummi!
Hey! What's this? The Yummi-loader is nothing more than a simple LESS file with some CSS3 animations for a fancy page load effect. Use them just adding off class on your body element and changing it with on on $(window).load() or $(document).ready() events.
Browser compatibility IE10+ // Webkit // Firefox
<body class="off"> <div class="fadein scaleInv anim_1"> <p class="fadein scaleInv anim_2"> <a class="fadein scale anim_n"></a> </p> </div> </body> A little example where 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 too, 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); Don't forget that Yummi-loader uses lesshat mixing, you can download it here: http://lesshat.com/ and then put it in the less folder before compiling.
You can compile LESS files using one of these compilers. https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js
Support or Contact Having trouble or suggestions? Tweet me @gummibear_lab. Github page: http://gummibearlab.github.io/Yummi-loader/
