it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Rough.js rende grafica disegnata a mano con tela e SVG

È incredibile vedere quanto il Web sia arrivato con elementi dinamici come gli SVG nel browser . Puoi progettare qualsiasi cosa, dalle animazioni personalizzate ai giochi HTML5 con le librerie giuste.

Una delle più recenti librerie che valga la pena provare è Rough.js . È uno script di generazione grafica gratuito attualmente in beta che funziona su elementi canvas e SVG .

È possibile creare icone personalizzate, grafici a barre, praticamente tutto ciò che si desidera tutto in codice. E il risultato finale assume una splendida sensazione disegnata a mano .

Al momento della stesura di questo, Rough.js è ancora in v0.1 beta, quindi potrebbe non essere pronto per un sito di produzione dal vivo . Ma è una prova che gli standard web stanno progredendo velocemente e stiamo entrando in un'epoca in cui questo tipo di cose è possibile.

Prendi ad esempio questa barra di avanzamento generata attraverso Rough.js. Se fai clic sul pulsante "Start" noterai che esegue un'animazione personalizzata che sembra davvero disegnata a mano . Usa le linee SVG con pattern predefiniti per creare un effetto traballante che sembra davvero naturale.

Nella pagina principale di GitHub, troverai una sezione che elenca molti esempi di Rough.js in azione .

Tutti questi sono dotati di esempi di codice e dovrebbero essere abbastanza facili da rielaborare per qualsiasi sito web . Tutto ciò di cui hai bisogno è il file di script Rough.js e un po 'di pazienza nel pasticciare con JavaScript.

Ecco un esempio di snippet che dimostra come creare un rettangolo nel codice :

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); rough.rectangle (10, 10, 200, 200); // x, y, larghezza, altezza 

Abbastanza semplice una volta capito il codice ma probabilmente non lo script più intuitivo per i principianti.

Se desideri più frammenti di codice e demo di esempio, controlla la home page di Rough.js . È il posto perfetto per iniziare a imparare e trovare frammenti di codice che puoi rielaborare.

Inoltre, se hai domande o suggerimenti per funzionalità aggiuntive, puoi inviare un messaggio al creatore di Rough.js su Twitter @preetster.

5 modi creativi e unici documentano i loro viaggi

5 modi creativi e unici documentano i loro viaggi

Documentare i tuoi viaggi non è un nuovo concetto. È un modo per ricordare i tuoi viaggi e i ricordi che associ ai luoghi che hai visitato. Molti di noi farebbero un sacco di foto. Alcuni terranno un diario di viaggio o un blog di viaggio. Altri preferiscono vedere il video e persino trasformarlo in un mini film.M

(Consigli tecnici e di design)

Come guidare le vendite di e-commerce ricorrenti nel 2017

Come guidare le vendite di e-commerce ricorrenti nel 2017

Spesso vedo le aziende più preoccupate di ottenere nuovi clienti invece di conservare quelli esistenti . Ma sai che costa cinque volte di più attirare un nuovo cliente che mantenerne uno esistente!Considerando quanto sia importante mantenere i vecchi clienti di e-commerce per generare vendite ripetute, ho scritto questo articolo toccando tutti i punti chiave.

(Consigli tecnici e di design)