Slide Up & Fade In Elements On Page Load - Wakenbake

Wakenbake is a small jQuery script to create a subtle reavel effect that uses CSS3 animations to slide up & fade in any element on page load just like a floating card.

How to use it:

1. Load the main JavaScript wakenbake.js after jQuery library.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="wakenbake.js"></script>

2. Add the data-fade="true" attribute to the element you'd like to animate on page load. That's it.

<div class="block" data-fade="true">
  ☝️ Slide Up & Fade In ☝️ 
</div>

3. Extend the script to create your own reveal effects.

var Wakenbake = {
    Wait: 0,
    Add: 75, // how long in ms between each animation
    Speed: 0.5,
    Boot:function(){
        $('head').append('<style>*[data-fade=true]{-moz-transition: margin-top ' + Wakenbake.Speed + 's ease-out, opacity ' + Wakenbake.Speed + 's ease-out;-webkit-transition: margin-top ' + Wakenbake.Speed + 's ease-out, opacity ' + Wakenbake.Speed + 's ease-out;-o-transition: margin-top ' + Wakenbake.Speed + 's ease-out, opacity ' + Wakenbake.Speed + 's ease-out;transition: margin-top ' + Wakenbake.Speed + 's ease-out, opacity ' + Wakenbake.Speed + 's ease-out;</style>');
        $('head').append('<style>*[data-fade=true]:not(.faded){margin-top: 50px!important;opacity: 0;}</style>');
        $('head').append('<style>*[data-fade=true]:not(.init){-webkit-transition: none !important;-moz-transition: none !important;-ms-transition: none !important;-o-transition: none !important;}</style>');
    },
    Go:function(callback){
        var _loc_wait = Wakenbake.Wait;
        var _loc_add = Wakenbake.Add;   
        setTimeout(function(){
            $( "*[data-fade=true]:not(.faded)" ).each(function() {
                var This = $(this);
                setTimeout(function(){
                    This.addClass('faded');
                    This.addClass('init');
                    setTimeout(function(){
                        if (typeof callback == "function"){
                            callback(); 
                        }
                    }, Wakenbake.Speed * 1000 / 5);
                }, _loc_wait);
                
                _loc_wait = _loc_wait + _loc_add;
            });
        }, _loc_add);
    }
};

Changelog:

2020-04-17

• Added callbacks

---

This awesome jQuery plugin is developed by genericmilk. For more Advanced Usages, please check the demo page or visit the official website.