logo

Vytvářejte rotující, mizející ikony pomocí CSS3 a jQuery

Minulý týden jsem zveřejnil populární blogový příspěvek s názvem Create Spinning, Fading Icons with CSS3 and MooTools. Příspěvek podrobně popisuje, jak můžete využít transformace a vlastnosti neprůhlednosti CSS3, stejně jako magický rámec JavaScriptu MooTools, k vytvoření rotujících, mizejících a animovaných ikon. Kvůli populárnímu požadavku jsem efekt duplikoval s další populární sadou JavaScriptu:jQuery.

Zobrazit ukázku

HTML

<div id="followIcons">
	<a href="http://feeds2.feedburner.com/Bludice" id="iconRSS">RSS Feed</a>
	<a href="http://twitter.com/davidwalshblog" id="iconTwitter">@davidwalshblog Twitter</a>
	<a href="http://github.com/darkwing" id="iconGitHub">@davidwalshblog Twitter</a>
	<a href="http://del.icio.us/dwizzlestar" id="iconDelicious">dwizzlestar de.licio.us</a>
	<a href="http://facebook.com/davidwalsh83" id="iconFacebook">David Walsh Facebook</a>
	<a href="http://linkedin.com/in/davidjameswalsh" id="iconLinkedIn">David Walsh LinkedIn</a>
	<a href="skype:davidwalsh83?chat" id="iconSkype">David Walsh Skype</a>
	<a href="mailto:[email protected]" id="iconMail">David Walsh Email</a>
	<a href="http://mootools.net/forge/profile/davidwalsh" id="iconForge">David Walsh MooTools Forge</a>
</div>

Odkazy jsou standardní tak, jak přicházejí. Ty se změní na dynamické ikony.

CSS

První částí procesu je použití standardních CSS k přesunutí textu mimo obrazovku a místo toho použití ikon jako obrázků na pozadí odkazu:

#followIcons a	{
display:inline-block;
width:48px;
height:48px;
text-indent:-3000px;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
position:absolute;
}

Jakmile jsme provedli tuto osvědčenou praxi, je čas zavést několik počátečních nastavení CSS3. Jak asi víte, v tuto chvíli jsou všechny vlastnosti transformace CSS specifické pro prohlížeč, takže naše CSS bude trochu zdlouhavé:

#followIcons a	{
transition-duration: 0.8s;
transition-property: transform;
}

Doba trvání přechodu bude 0,8 sekundy a vlastnost přechodu bude základní transformace. Trvání transformace můžete změnit na libovolnou dobu, kterou chcete. Příliš rychlé nebo příliš pomalé zkazí efekt (tak to řekla) .

JavaScript jQuery

První část náhodně umístí každý uzel/ikonu v kontejneru. Je důležité znát šířku a výšku kontejneru a poté od toho odečíst šířku a výšku ikony, abyste zjistili skutečnou oblast, do které se ikona vejde. Nic by nebylo chromější než kousek skryté ikony. Dalším krokem procesu je přidání událostí mouseenter a mouseleave, aby se obrázky během každé příslušné události otočily a zesílily.

jQuery(document).ready(function() {

	// "Globals" - Will make things compress mo-betta
	var $random = function(x) { return Math.random() * x; };
	var availableWidth = 400, availableHeight = 40;
	
	// Get the proper CSS prefix
	if(jQuery.browser.webkit) {
		cssPrefix = "webkit";
	}
	else if(jQuery.browser.mozilla) {
		cssPrefix = "moz";
	}
	else if(jQuery.browser.opera) {
		cssPrefix = "o";
	}

	// Apply opacity
	var zIndex = 1000;
	
	// Randomize each link
	jQuery.each(jQuery("#followIcons a"),function(index) {
		var startDeg = $random(360);
		var element = jQuery(this);
		var resetPlace = function() {
			element.fadeTo(250,0.6).css("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
		};
		element.attr("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex).hover(function() {
			element.fadeTo(250,1).css("zIndex",++zIndex).css("-" + cssPrefix + "-transform","rotate(0deg)");
		},resetPlace);
		resetPlace();
	});
	
});

Když dojde k události mouseenter, rotace se animuje na 0, žádná rotace. Když myš opustí prvek, prvek se animuje do své počáteční náhodné rotace. Také si všimnete, že jsem použil neprůhlednost, abych přidal k jemnému efektu.

Zobrazit ukázku

Tady to máte!