JavaScript a CSS spinnery se spin.js

Myslím, že lze s jistotou říci, že dny používání obrázků k poskytování „malých dotyků“ jsou pryč. Nyní můžeme bezpečně vytvářet přechody, vržené stíny, zaoblené rohy a zmenšené, otočené a transformované animace. Zdá se, že jsme nyní přešli k nahrazení složitějších efektů, jako jsou obrázky spinneru. Objevil se skvělý projekt s názvem spin.js, který vývojářům umožňuje vytvářet spinnery založené na CSS, kde jsou k dispozici klíčové snímky, a používá VML jako záložní řešení pro Internet Explorer. spin.js je velmi přizpůsobitelný a je postaven s čistým JavaScriptem, takže není vyžadována žádná sada nástrojů (ačkoli je v ukázce webu k dispozici plugin jQuery). Pojďme se podívat na to, jak používat a upravovat spin.js!

Výše jsem slíbil, že spin.js umožňuje velmi přizpůsobitelné spinnery a nelhal jsem; spin.js vám umožňuje přizpůsobit počet čar, délku, šířku, poloměr čáry, stopu, rychlost otáčení, stín a barvu. Jednoduché použití spin.js vypadá takto:

// Create the Spinner with options
var spinner = new Spinner({
	lines: 12, // The number of lines to draw
	length: 7, // The length of each line
	width: 5, // The line thickness
	radius: 10, // The radius of the inner circle
	color: '#000', // #rbg or #rrggbb
	speed: 1, // Rounds per second
	trail: 100, // Afterglow percentage
	shadow: true // Whether to render a shadow
}).spin(document.getElementById("ajaxContentHolder")); // Place in DOM node called "ajaxContentHolder"

Instance Spinner přijímá možnosti a metoda spin přijímá uzel DOM, který by měl hostit vygenerovaný spinner. Výhodou poskytnutí uzlu DOM pro metodu show je, že můžete použít stejnou instanci Spinner ve více spotech tím, že pokaždé jednoduše přiřadíte jiný uzel DOM. S rozsáhlou sadou možností můžete vytvořit odstředivku jakékoli velikosti, rychlosti a barvy!

spin.js je skutečné umělecké dílo – velké rekvizity Felixu Gnassovi za jeho vynikající práci. Spinnery porostou na důležitosti, zatímco webové stránky budou více využívat AJAX, takže přizpůsobitelná JavaScriptová alternativa k obrázkům je nesmírně užitečná. Jakou techniku ​​nahrazení obrázku bychom měli hledat dál?