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ázkuHTML
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ázkuA 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!