View on GitHub

Yummi-loader

Less//Css classes for fancy page load

Download this project as a .zip file Download this project as a tar.gz file

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 nokia aktie kurs

<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