JSFiddle - React, Tailwind, and code Playground
by devangkantharia
HTML
<script src="http://scripts.gayadesign.com/queryLoader2/queryloader2.js"></script>
<img src="http://i.imgur.com/PWSOy.jpg" id="background" />
<img src="http://i.imgur.com/6l6v2.png" id="ballon" />
<img src="http://image.shutterstock.com/display_pic_with_logo/72695/135572054/stock-photo-bunch-of-fresh-asparagus-on-wooden-table-135572054.jpg" />
<img src="http://image.shutterstock.com/display_pic_with_logo/808747/150149918/stock-photo-modern-creative-workspace-with-computer-and-red-chair-the-office-of-a-creative-worker-150149918.jpg" />
<img src="http://image.shutterstock.com/display_pic_with_logo/11544/11544,1131370273,2/stock-photo-small-church-in-alftanes-borgarnes-borgarfj-rdur-iceland-700107.jpg" />
<img src="http://image.shutterstock.com/display_pic_with_logo/283021/143311846/stock-photo--year-old-toddler-looking-up-at-white-butterflies-flying-143311846.jpg" />
<img src="http://image.shutterstock.com/display_pic_with_logo/283021/283021,1320570676,1/stock-photo-cute-boy-looking-up-in-awe-portrait-with-sunlight-haze-88175782.jpg" />
<img src="http://image.shutterstock.com/display_pic_with_logo/283021/184768091/stock-photo-happy-and-cute-child-in-nature-184768091.jpg" />
<img src="http://image.shutterstock.com/display_pic_with_logo/283021/283021,1315587729,1/stock-photo-cute-baby-boy-bathing-outdoors-in-a-tub-84330856.jpg" />
<img src="http://i.istockimg.com/file_thumbview_approve/46944624/2/stock-photo-46944624-bike-messenger-in-new-york-city.jpg" />
<img src="http://i.istockimg.com/file_thumbview_approve/40554420/2/stock-photo-40554420-hong-kong-in-sunset.jpg" />
<img src="http://www.freewallsource.com/img/2014/11/nature-background-12007-12544-hd-wallpapers.jpg" />
<img src="http://www.zeitgasm.com/images/MirrorsEdgeMegaHighres.jpg" />
<img src="http://s3images.coroflot.com/user_files/individual_files/original_197080_3S8oHGKTjvkW7SAG1ahJC9jGU.jpg" />
<img src="http://www.andybarratt.co.uk/downloads/March-on-Campus-v1.jpg" />
<img...
CSS
#canvas {
}
#background {
display: none;
}
#ballon {
position: absolute;
top: 50px;
left: 50px;
cursor: move;
opacity: 0.5;
}
JavaScript
window.addEventListener('DOMContentLoaded', function () {
new QueryLoader2(document.querySelector("body"), {
barColor: "#efefef",
backgroundColor: "#111",
percentage: true,
barHeight: 1,
minimumTime: 200,
fadeOutTime: 1000
});
});