Letter Drop – jQuery Plugin for Letter Drop Effect

Download   Demo

Letter Drop (jQuery)

jQuery add on for CSS letter drop animation effect. The plugin takes the text string within the defined element and splits each letter out adding a random delay to each from 1.0 to 1.9 secs before dropping and rotating the letters down like rain.

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800);

html, body

height: 100%;

width: 100%;

margin: 0;

padding: 0;

font-size: 100%;

background: #EEEEEE;

text-align: center;

h1

margin: 0;

padding: 0;

font-family: ‘Raleway’;

font-weight: 400;

font-size: 2.4em;

color: #9A12B3;

.letterDrop

position: relative;

top: 0.60em;

display: inline-block;

text-transform: uppercase;

letter-spacing: 0.5em;

opacity: 0.8;

transform: rotateX(-90deg);

animation: letterDrop 1.2s ease 1 normal forwards;

@keyframes letterDrop

10%

opacity: 0.5;


20%

opacity: 0.8;

top: 3.75em;

transform: rotateX(-360deg);


100%

opacity: 1;

top: 4.50em;

transform: rotateX(360deg);

span:nth-child(2n)

color: #663399;

Js

jQuery.fn.letterDrop = function()

var obj = this;

var drop =

arr : obj.text().split( ” ),

range :

min : 1,

max : 9

,

styles : function()

var dropDelays = ‘\n’, addCSS;

for ( i = this.range.min; i <= this.range.max; i++ )

dropDelays += ‘.ld’ + i + ‘ animation-delay: 1.’ + i + ‘s; \n’;

addCSS = $( ‘<style>’ + dropDelays + ‘</style>’ );

$( ‘head’ ).append( addCSS );

,

main : function()

var dp = 0;

obj.text( ” );

$.each( this.arr, function( index, value )

dp = dp.randomInt( drop.range.min, drop.range.max );

if ( value === ‘ ‘ )

value = ‘&nbsp’;

obj.append( ‘<span class=”letterDrop ld’ + dp + ‘”>’ + value + ‘</span>’ );

);

;

Number.prototype.randomInt = function ( min, max )

return Math.floor( Math.random() * ( max – min + 1 ) + min );

;

// Create styles

drop.styles();

// Initiate

drop.main();

;

$( ‘h1′ ).letterDrop();

Letter Drop – jQuery Plugin for Letter Drop Effect

FlexGauge - jQuery Animated Gauge

Download   Demo

FlexGauge is a Extremely customizable HTML5/jQuery Animated Gauge. Built to work with RequireJS or manually including the file.

1. INCLUDE JS FILES

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="FlexGauge.js"></script>

2. HTML

 <div id="example1"></div>

3. JAVASCRIPT

var gauge = new FlexGauge(
	appendTo: '#example1'
);

4. OPTIONS

/**
 * String Element that you would like to append to. ie '#idname', '.classname', 'div#idname', etc..
*/
appendTo: 'body',
/**
 * String Id of Canvas already created or Id of canvas that will be created automatically
 */
elementId: 'canvas',
/**
 * String Class of canvas created
 */
elementClass: 'canvas',
/**
 * Int Canvas Width & Height
 */
elementWidth: 200,
elementHeight: 200,
/**
 * Boolean Generate Dial Value for the Gauge, true will use arcFillPercent or arcFillInt
 * depending on provided values and specified dialUnits, string will use specified value
 */
dialValue: false,
/**
 * String Class applied to div when dial is generated.
 */
dialClass: 'fg-dial',
/**
 * $ Type of unit to use for the dial
 */
dialUnit: '%',
/**
 * after Where the dial unit will be displayed
 */
dialUnitPosition: 'after',
/**
 * Boolean Generate Label for the Gauge, true will use default "FlexGauge", string will use specified
 */
dialLabel: false,
/**
 * String Class applied to div when label is generated.
 */
dialLabelClass: 'fg-dial-label',
/**
 * Int Radius of the arc
 */
arcSize: 85,
/**
 * double Starting and Ending location of the arc, End always needs to be larger
 * arc(x, y, radius, startAngle, endAngle, anticlockwise)
 */
arcAngleStart: 0.85,
arcAngleEnd: 2.15,
/**
 * double Percentage the arc fills
 */
arcFillPercent: .5,
/**
 * Int Starting and Ending values that are used to
 * find a difference for amount of units
 * ie: 60 (arcFillEnd) - 10 (arcFillStart) = 50
 */
arcFillStart: null,
arcFillEnd: null,
/**
 * Int Data used to find out what percentage of the
 * arc to fill. arcFillInt can be populated by
 * the difference of arcFillStart and arcFillEnd
 */
arcFillInt: null,
arcFillTotal: null,
/**
 * Int Color lightness: 0 - 255, 0 having no white added, 255 having all white and no color
 */
arcBgColorLight: 80,
/**
 * Int Color saturation: 0 - 100, 0 having no color, 100 is full color
 */
arcBgColorSat: 60,
/**
 * Int Size of the line marking the percentage
 */
arcStrokeFg: 30,
/**
 * Int Size of the container holding the line
 */
arcStrokeBg: 30,

/**
 * string: hex Color of the line marking the percentage
 */
colorArcFg: '#5bc0de',
/**
 * string: hex Color of the container holding the line, default is using the Fg color and lightening it
 */
colorArcBg: null,

/**
 * String Instead of providing a color or hex for the color, you can provide a class from the style
 * sheet and specify what you would like to grab for the color in styleSrc
 */
styleArcFg: null,
styleArcBg: null,
styleSrc: 'color',

/**
 * Boolean If set to false, then the graph will not be animated
 */
animateEasing: true,
/**
 * Int Speed for the animation, 1 is fastest, higher the number, slower the animation
 */
animateSpeed: 5,
/**
 * Int Math used in animation speed
 */
animateNumerator: 12,
animateDivisor: 15

FlexGauge - jQuery Animated Gauge

jQuery Accordion - Responsive and CSS powered

Download   Demo

jQuery Accordion uses CSS transitions to animate opening/closing with a fallback to jQuery’s animate when CSS transitions are not supported. It takes little configuration or code to use it on your project.

Supports IE9+ and modern browsers.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="css/jquery.accordion.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>

2. HTML

<section id="only-one" data-accordion-group>
 <section data-accordion>
	<button data-control>Accordion 1</button>
	<div data-content>
	 <article>Item</article>
	 <article data-accordion>
		<button data-control>2nd Level</button>
		<div data-content>
		 <article>Item</article>
		 <article>Hoodie ennui Godard aesthetic, art party whatever trust fund slow-carb kogi tattooed single-origin coffee banjo. Deep v tote bag brunch, artisan distillery chillwave Williamsburg sartorial. Mustache blog wayfarers Carles, forage biodiesel butcher street art. Hashtag small batch bitters deep v gluten-free. Semiotics butcher blog, paleo asymmetrical narwhal selvage pug Pitchfork DIY artisan Wes Anderson put a bird on it drinking vinegar whatever. Artisan McSweeney's Shoreditch, wolf yr Marfa street art locavore craft beer aesthetic 90's gentrify. Yr hella fingerstache, Echo Park VHS +1 church-key XOXO Vice selvage gastropub readymade literally wayfarers.</article>
		 <article>Item</article>
		 <article>Item</article>
		 <article>Item</article>
		 <article>Item</article>
		</div>
	 </article>
	 <article data-accordion>
		<button data-control>2nd Level</button>
		<div data-content>
		 <article>Item</article>
		 <article>Item</article>
		 <article data-accordion>
			<button data-control>3rd Level</button>
			<div data-content>
			 <article>Item</article>
			 <article>Item</article>
			 <article>Item</article>
			 <article>Item</article>
			 <article>Item</article>
			 <article>Item</article>
			</div>
		 </article>
		 <article data-accordion>
			<button data-control>3rd Level</button>
			<div data-content>
			 <article>Item</article>
			 <article>Item</article>
			 <article>Item</article>
			 <article>Item</article>
			 <article>Item</article>
			 <article>Item</article>
			</div>
		 </article>
		</div>
	 </article>
	 <article>Item</article>
	 <article>Item</article>
	 <article>Item</article>
	</div>
 </section>

 <section data-accordion>
	<button data-control>Accordion 2</button>
	<div data-content>
	 <article>Item</article>
	 <article>Item</article>
	 <article>Item</article>
	 <article>Item</article>
	 <article>Item</article>
	 <article>Item</article>
	</div>
 </section>
</section>

3. JAVASCRIPT

$(document).ready(function() 
 $('#only-one [data-accordion]').accordion();
);

jQuery Accordion - Responsive and CSS powered

Responsive mobile first navigation bar

Download Demo

This Plugin uses jQuery and CSS to create a mobile first navigation bar with minimal impact. There’s really not much more to it. As its stands its mostly a one-trick pony.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="style/main.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="script/main.js"></script>

2. HTML

<div id="toggle_m_nav" href="#">
	<div id="m_nav_menu" class="m_nav">
		<div class="m_nav_ham" id="m_ham_1"></div>
		<div class="m_nav_ham" id="m_ham_2"></div>
		<div class="m_nav_ham" id="m_ham_3"></div>
	</div>
</div>

<!-- This is the general container and content that makes up the navbar itself -->
<div id="m_nav_container" class="m_nav">
	<ul id="m_nav_list" class="m_nav">
		<li class="m_nav_item" id="m_nav_item_1">
			<a href="#section_1">nav_item_1</a>
		</li>
		<li class="m_nav_item" id="moble_nav_item_2">
			<a href="#section_2">nav_item_2	</a>
		</li>
		<li class="m_nav_item" id="moble_nav_item_3">
			<a href="#section_3">nav_item_3</a>
		</li>
		<li class="m_nav_item" id="moble_nav_item_4">
			<a href="#section_4">nav_item_4</a>
		</li>
		<li class="m_nav_item" id="moble_nav_item_5">
			<a href="#section_5">nav_item_5</a>
		</li>
	</ul>
</div>
<!-- This is where content will go -->

<div id="wrapper">

	<div id="header">
		<h1>We're tying the knot.</h1>
	</div>
	<div class="main_sections" id="section_1">
		<h1>Section 1.</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>
	</div>
	<div class="main_sections" id="section_2">
		<h1>Section 2.</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>
	</div>
	<div class="main_sections" id="section_3">
		<h1>Section 3.</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>

	</div>
	<div class="main_sections" id="section_4">

		<h1>Section 4.</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>
	</div>
	<div class="main_sections" id="section_5">

		<h1>Section 5.</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, laborum nihil aut nesciunt tempora debitis recusandae quaerat voluptate consequuntur adipisci repellendus architecto, dicta hic quae harum sequi soluta doloribus!</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque harum expedita, veniam nostrum necessitatibus incidunt eaque atque aperiam modi porro ad impedit, illo illum! Laborum, magnam, earum. Corporis, autem, deserunt.</p>
	</div>
</div>

Responsive mobile first navigation bar

ImageCloud

Download Demo

ImageCloud is a jQuery plug-in based on Google’s Doodle designed for the Christmas holidays on 2010. “Basically” it was a bunch of frames with images that, when you mouse over, grow to their real size:

ImageCloud, takes all the images within a DIV tag (it could be any other though) and creates random smaller frames that grow when the mouse goes over them, and shrink when the mouse goes out. This frames are randomly positioned so you get a different imageCloud every time that you reload the page!

1. INCLUDE JS FILES

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.imageCloud.mini.js"></script>

2. HTML

<div id="ic1" class="imagecloud">
	<img src="./upload/cloud1.jpg" width="350" height="250" alt="1" />
	<img src="./upload/cloud2.jpg" width="200" height="300" alt="2" />
	<img src="./upload/cloud3.jpg" width="300" height="200" alt="3" />
	<img src="./upload/cloud4.jpg" width="200" height="300" alt="4" />
	<img src="./upload/cloud5.jpg" width="250" height="175" alt="5" />
	<img src="./upload/cloud6.jpg" width="250" height="200" alt="6" />
	<img src="./upload/jaen2.jpg" width="145" height="196" alt="13" />
	<img src="./upload/cloud7.jpg" width="300" height="225" alt="7" />
	<img src="./upload/cloud8.jpg" width="300" height="200" alt="8" />
	<img src="./upload/cloud9.jpg" width="300" height="200" alt="9" />
	<img src="./upload/cloud10.jpg" width="300" height="225" alt="10" />
	<img src="./upload/cloud11.jpg" width="300" height="225" alt="11" />
	<img src="./upload/cloud12.jpg" width="250" height="150" alt="12" />
</div>

3. JAVASCRIPT

$(document).ready(function() 
	$("#ic1").imageCloud(
		width: 600,
		height: 400,
		color: '#aabb44',
		link: true,
		speed: 150,
		borderSize: 3,
		borderStyle: "groove",
		borderRadius: 3
	);
);

4. OPTIONS

The imageCLoud plug-in is highly customizable. You can provide different parameters:

• Width: Number. It sets the width of the area where the image will be displayed. Default value: 600px.


• Height: Number. It sets the height of the area where the image will be displayed. Default value: 400px.


• Color: Color type. This is the border color for the images, it can be any color format (i.e.: #444, #304050, rgb(100,150,200), etc). Default value: #800000 (dark red).


• Link: true|false. If sets to true, then the images will link to the page indicated in the title. Default value: false.


• Speed: Number. It indicated the speed of the effect; a lower value means a faster effect, a higher value will result in a slower effect. Default value: 200.


• BorderSize: Number. It is the size of the border in pixels. Default value: 6.


• BorderStyle: Border-style type (solid|dotted|dashed|inset|…). Default value: “solid”.


• BorderRadius: Number. Makes the frame border round (similar to border-radius, doesn’t work in all versions of IE). Default value: 0.

 

ImageCloud