JSFiddle - React, Tailwind, and code Playground

by Miky_Frazao

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<div id="wrapper"></div>

CSS

.fontFlake{
  position:absolute;
  left:0px;
  z-index:10;
  position:block;
}

JavaScript

var kissesAni = {
        init: function () {
            kissesAni.callAni();
        },
        callAni: function(){
            window.setInterval(function(){
                kissesAni.makeImgAni();
            }, 30);
        },
        stop: function() {
            window.clearInterval(kissesAni.callFontFlakes);
        },
        makeImgAni: function(){
            // let set some bloody vars
            var stageWidth = $(window).width();
            var stageHeight = $(window).height();
            var randomEntry = Math.ceil(Math.random()*stageWidth);
            var preRandomFontSize = Math.ceil(Math.random()*40);
            var randomFontSize = preRandomFontSize + 10;
            var flakeName = 'flake-'+randomEntry;
            var grayScale = Math.ceil(Math.random()*256);
            var hue = 'rgb('+grayScale+','+grayScale+','+grayScale+ ')';
            var imgs = ['http://images.clipartpanda.com/clipart-heart-heart-clip-art-images-3.jpg', 'https://athenasussexse.files.wordpress.com/2014/02/kiss.jpg?w=300&h=252'];
            var widthRandom = Math.floor(Math.random() * 100) + 30;
  
            $('<img />', {
                text: 'hey',
                src: imgs[Math.floor(Math.random()*imgs.length)],
                id: flakeName,
                width: widthRandom+ 'px'
            }).appendTo('#wrapper')
            .addClass('fontFlake').css('left', randomEntry)
            .css({
                'top': -widthRandom,
                'font-size': randomFontSize,
                'color': 'red'
            }).animate({
                "top": "+=" + stageHeight,
                opacity: 0
            }, 3000, function() {
                $('#'+flakeName).remove();                      
            }); 
        }
    };
    kissesAni.init();
        window.setTimeout(function() {
            console.log('heya');
            kissesAni.stop();
        }, 5000);