JSFiddle - React, Tailwind, and code Playground

by sarfarazdesigner

HTML

<div id="div1" style="width:400px;height:400px;background-color:red;margin:10px; padding:10px; float:left">
		<h2>div1</h2>
		Mauris quis mollis nunc. Proin eget sapien lectus, vitae placerat mi. Nulla lobortis magna vitae diam aliquet tempus. Nulla dignissim odio quis ante tincidunt faucibus. Nam in mi felis, ac hendrerit nisl. Praesent in venenatis est. Aenean lacinia accumsan nisi dignissim pellentesque. Vestibulum pellentesque placerat erat, sit amet pulvinar libero commodo sed. Nulla dapibus mi auctor mi sollicitudin in molestie mi euismod. Pellentesque sodales tincidunt congue. Curabitur pharetra condimentum interdum. Donec et sem ac neque bibendum euismod. Mauris commodo vulputate dui, eu sagittis sem vehicula non. Ut ultricies ultrices placerat. Ut tristique arcu nec augue ornare iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris urna ante, accumsan sed tristique quis, suscipit nec magna.
	</div>

JavaScript

/* Simple jQuery background image rotator plug-in by Dan 'Diplo' Booth */
	(function($)
	{
		$.fn.extend({
			bgrotate: function(options)
			{
				var defaults = {
					delay: 1000,
					images: [],
					imagedir: "/images/"
				}

				var o = $.extend(defaults, options);
				var $obj = $(this);
				var cache = [];
				var i = 0;
				var preCache = true;

				return this.each(function()
				{
					setTimeout(function() { setBack($obj, o.images, o.imagedir) }, o.delay);
				});

				function setBack(elem, backgrounds, imagedir)
				{
					//elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")");
					var newElement = elem.clone();
					$(newElement).css({'background-image': "url(" + imagedir + backgrounds[i] + ")"})
					$(newElement).css("position","absolute");
					$(newElement).css("top",$(elem).position().top + "px");
					$(newElement).css("left",$(elem).position().left + "px");
                    $(newElement).hide();
					$(elem).after(newElement);
					$(newElement).fadeIn('slow', function() {
						$(newElement).css("position",$(this).css("position"));
						$(newElement).css("top",$(this).css("top"));
						$(newElement).css("left",$(this).css("left"));
						$(elem).remove();
						setTimeout(function() { setBack($(newElement), o.images, o.imagedir) }, o.delay);
					});
					i++;
					if (i == backgrounds.length)
					{
						i = 0;
						preCache = false;
					}
					if (preCache)
					{
						var cacheImage = document.createElement('img');
						cacheImage.src = imagedir + backgrounds[i];
						cache.push(cacheImage);
					}
				}
			}
		});
	})(jQuery);

$("#div1").bgrotate({ delay: 800, imagedir: "http://www.diplo.co.uk/images/backgrounds/", images: ["pattern8-pattern-58a.png", "419.gif"] });