Slide Up & Fade In Elements On Page Load - Wakenbake

Slide Up & Fade In Elements On Page Load - Wakenbake
File Size: 3.25 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 = {
    Boot:function(){
      var Wait = 0; // time to wait
      var Add = 300; // animation speed
      $('head').append('<style>*[data-fade=true]{-moz-transition: margin-top .5s ease-out, opacity .5s ease-out;-webkit-transition: margin-top .5s ease-out, opacity .5s ease-out;-o-transition: margin-top .5s ease-out, opacity .5s ease-out;transition: margin-top .5s ease-out, opacity .5s 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>');
      setTimeout(function(){
        $( "*[data-fade=true]" ).each(function() {
          var This = $(this);
          setTimeout(function(){
            This.addClass('faded');
            This.addClass('init');
          }, Wait);
          Wait = Wait + Add;
        });
      }, Add);
    }
};

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