Slide Up & Fade In Elements On Page Load - Wakenbake

Slide Up & Fade In Elements On Page Load - Wakenbake
File Size: 5.11 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="" 
<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 ☝️ 

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

var Wakenbake = {
      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>');
        $( "*[data-fade=true]" ).each(function() {
          var This = $(this);
          }, 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.