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

Cílem mého posledního redesignu blogu bylo trochu více procvičit to, co jsem kázal; přidat trochu jemnější nádech. Jedním ze způsobů, jak jsem toho dosáhl, bylo použití animací CSS3 ke změně zobrazení ikon mého profilu (RSS, GitHub atd.)  Nechtěl jsem však CSS animace úplně opustit; Přidal jsem trochu MooTools, abych náhodně upravil počáteční polohu a rotaci ikony. Dovolte mi ukázat vám, jak používat CSS3 a MooTools k vytváření dynamických, rotujících prvků.

Zobrazit ukázku

HTML

Pro vytváření odkazů použijeme standardní, přístupný a SEO přátelský kód HTML:

<div id="followIcons">
	<a href="http://feeds2.feedburner.com/Bludice" rel="nofollow" id="iconRSS">RSS Feed</a>
	<a href="http://twitter.com/davidwalshblog" rel="nofollow" id="iconTwitter">@davidwalshblog Twitter</a>
	<a href="http://github.com/darkwing" rel="nofollow" id="iconGitHub">@davidwalshblog Twitter</a>
	<a href="http://del.icio.us/dwizzlestar" rel="nofollow" id="iconDelicious">dwizzlestar de.licio.us</a>
	<a href="http://facebook.com/davidwalsh83" rel="nofollow" id="iconFacebook">David Walsh Facebook</a>
	<a href="http://linkedin.com/in/davidjameswalsh" rel="nofollow" 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" rel="nofollow" id="iconForge">David Walsh MooTools Forge</a>
</div>

CSS tyto odkazy vylepší.

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 dokončíme tuto osvědčenou praxi, je čas zavést několik počátečních nastavení CSS3. Jak pravděpodobně 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. Dobu trvání transformace můžete změnit na libovolnou dobu trvání. Příliš rychlé nebo příliš pomalé zkazí efekt (tak to řekla) .

JavaScript MooTools

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.

// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 200, availableHeight = 40;

// Find the appropriate prefix icon
var cssPrefix = false;
switch(Browser.name) {
	case "safari":
		cssPrefix = "webkit";
		break;
	case "chrome":
		cssPrefix = "webkit";
		break;
	case "firefox":
		cssPrefix = "moz";
		break;
	case "opera":
		cssPrefix = "o";
		break;
	case "ie":
		cssPrefix = "ms";
		break;
}

// The Icons
var icons = $$("#followIcons a");
// Apply opacity
var zIndex = 1000;

// Randomize each link
icons.each(function(element,index) {
	// Generate the random rotation amount
	var startDeg = $random(360);
	// Place the image at the default rotation and opacity
	var resetPlace = function() {
		element.fade(0.6).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
	};
	// Randomly position the element
	element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
	// Rotate the image initially
	resetPlace();
	// Add events
	element.addEvents({
		mouseenter: function() {
			element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");
		},
		mouseleave: 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 na jemném efektu.

Zobrazit ukázku

A tady to máte: otáčení, mizení, animované prvky. Jaká je alternativa? Statické, nudné, tradiční ikony. Co myslíš? Příliš mnoho? Příliš málo? Podělte se o své nápady!