JSFiddle - React, Tailwind, and code Playground
HTML
<link href='http://fonts.googleapis.com/css?family=Corben:700' rel='stylesheet' type='text/css'>
<div id="header"><p>Firefly<br />kachibito</p</div>
CSS
body{
background:#111;
}
#header{
width:600px;
height:400px;
margin:25px;
}
p{
color:#000;
text-shadow:0px 0px 35px #fff;
font-family: 'Corben', cursive;
font-size:80px;
opacity:0.06;
margin:50px;
text-align:center;
}
JavaScript
/*
* jQuery firefly plugin 0.2
*
*
* Copyright (c) 2010 Dharmveer Motyar
* http://motyar.blogspot.com
*
* $Id$
*
* licensed under the MIT licenses:
* http://www.opensource.org/licenses/mit-license.php
*
*
* Creates a firefly effect.
*
* @example $.firefly();
*
* @name firefly
* @type jQuery
* @cat Plugins/firefly
*/
(function($) {
/*
* Plugin defaults
*/
var defaults = {
images: ['http://dharmmotyar.googlecode.com/svn/trunk/images/spark.png', 'http://dharmmotyar.googlecode.com/svn/trunk/images/spark2.png',
'http://dharmmotyar.googlecode.com/svn/trunk/images/spark3.png', 'http://dharmmotyar.googlecode.com/svn/trunk/images/spark4.png'],
total: 10,
ofTop: 0,
ofLeft: 0,
on: 'document.body'
};
$.firefly = function(settings) {
$.firefly.settings = $.extend({}, defaults, settings);
$.firefly.eleHeight = $($.firefly.settings.on).height();
$.firefly.eleWidth = $($.firefly.settings.on).width();
if ($.firefly.settings.on != 'document.body') {
var off = $($.firefly.settings.on).offset();
$.firefly.offsetTop = off.top;
$.firefly.offsetLeft = off.left;
$.firefly.eleHeight = $($.firefly.settings.on).height();
$.firefly.eleWidth = $($.firefly.settings.on).width();
}
else {
$.firefly.offsetTop = 0;
$.firefly.offsetLeft = 0;
$.firefly.eleHeight = $(document.body).height();
$.firefly.eleWidth = $(document.body).width();
}
if ($.firefly.preloadImages()) {
for (i = 0; i < $.firefly.settings.total; i++) {
$.firefly.fly($.firefly.create($.firefly.settings.images[$.firefly.random(($.firefly.settings.images).length)]));
}
}
return;
};
/*
* Public Functions
*/
$.firefly.create = function(img) {
spark =...