JSFiddle - React, Tailwind, and code Playground

by elvinci

HTML

<audio id="audio" controls autoplay>
	<source src="http://weirdtownescape.com/audio/dark-tense-piano-drone.mp3">
</audio>

JavaScript

$(document).ready(function(){
  $("#audio").get(0).play(); 
  $('#audio').prop("volume", 0.2);
});

(function($) {
    $WIN = $(window);
    var doc = document.documentElement;
    doc.setAttribute('data-useragent', navigator.userAgent);
   /* Preloader
    * -------------------------------------------------- */
    var clPreloader = function() {
        
        $("html").addClass('cl-preload');

        $WIN.on('load', function() {

            //force page scroll position to top at page refresh
            // $('html, body').animate({ scrollTop: 0 }, 'normal');

            // will first fade out the loading animation 
            $(".loader").fadeOut("slow", function() {
                // will fade out the whole DIV that covers the website.
                $("#preloader").delay(300).fadeOut("slow");
                $('.transition-img-load').attr('src',imagettt.src);  
               
            }); 


            var imagettt = new Image();
            imagettt.src='images/back.png';
            
            // for hero content animations 
            $("html").removeClass('cl-preload');
            $("html").addClass('cl-loaded');    
        });
    };

   /* Animate On Scroll
    * ------------------------------------------------------ */
    var clAOS = function() {
        
        AOS.init( {
            offset: 200,
            duration: 600,
            easing: 'ease-in-sine',
            delay: 300,
            once: true,
            disable: 'mobile'
        });

    };

   /* Initialize
    * ------------------------------------------------------ */
    (function on() {
        
        clPreloader();

    })();      
})(jQuery);