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


Come ingrandire le immagini come medie

La piattaforma di blogging Medium utilizza un effetto zoom personalizzato sulle pagine del proprio blog. Ogni volta che l'utente fa clic su un'immagine, verrà automaticamente ingrandita in dimensioni maggiori.

È un grande effetto e sicuramente unico per Medium, ma non è mai stato qualcosa che potrebbe facilmente essere copiato.

Ora, con lo script di MediaLightbox, è più facile che mai. Questo script JS è leggero e facile da aggiungere a qualsiasi sito Web o blog.

Se vuoi vedere come funziona, puoi visitare la pagina demo dal vivo ospitata dal creatore Davide Calignano.

Ha passato un po 'di tempo a inchiodare l'esatta transizione e l'effetto dell'animazione personalizzata per creare un'immagine speculare dello zoom dell'immagine di Medium . L'intera libreria è scritta in puro JavaScript, quindi non si basa su script di terze parti come jQuery.

Avrai bisogno di sapere un po 'di JS per configurarlo, ma certamente non devi essere un esperto.

Ogni immagine può prendere gli attributi data- * per impostare l'altezza e la larghezza a dimensione intera, che vengono tutti estratti dinamicamente dal plug-in lightbox. Il codice di installazione è molto semplice e può indirizzare le immagini stesse o contenitori come il

elemento

Ecco lo snippet di codice singolo necessario per eseguire il plug-in:

 MediumLightbox ( 'figure.zoom-effetto'); 

All'interno della funzione, si passa un selettore per tutti gli elementi (ad es

) con la classe .zoom-effect . Questa classe è definita in modo specifico nel foglio di stile MediumLightbox, quindi è consigliabile utilizzarla anche nella tua pagina.

E, una volta impostato, sei pronto!

Nell'area del contenuto della pagina, puoi avvolgere tutte le immagini in a
tag usando questa classe. Otterranno automaticamente questo amato effetto Medium click-to-zoom per gli utenti desktop e mobili .

Per scaricare una copia di questo script e iniziare, visita il repository principale di GitHub. Qui troverai anche la documentazione insieme ai frammenti di codice che puoi copiare per ottenere rapidamente le impostazioni.

Designer: perché le tariffe flat possono aumentare il valore

Designer: perché le tariffe flat possono aumentare il valore

Un sacco di designer hanno una strategia di fissazione dei prezzi quando si tratta di addebitare ai clienti il ​​loro lavoro. Molti preferiscono addebitare una tariffa oraria, che è specifica e garantisce che non vi sarà annullato da creep di ambito o altri problemi.Ma cosa succede se ti senti sottovalutato dai tuoi attuali clienti, e le tariffe orarie non lo stanno più riducendo ? Oggi

(Consigli tecnici e di design)

Come abilitare CSS3 Border Rius in Internet Explorer 8 e versioni successive

Come abilitare CSS3 Border Rius in Internet Explorer 8 e versioni successive

CSS3 ci dà la possibilità di creare angoli arrotondati con la proprietà border-radius . Ma come forse già saprai, questa nuova funzionalità non è riconosciuta in Internet Explorer 8 (IE8) e nelle sue versioni precedenti. Pertanto, quando applichi il Raggio bordo CSS3 a un elemento, esso appare ancora come una scatola con punte appuntite.Potre

(Consigli tecnici e di design)