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.

Alla fine arriveranno 8 robot umani di AI

I progressi nell'IA e nell'automazione hanno fatto ultimamente le notizie mainstream . Non sono solo i filippini oi messicani che prendono i lavori dei bianchi, anche i nostri padroni dei robot stanno prendendo il controllo del campo. Certo, è solo uno scherzo. Voglio dire, il primo è uno scherzo, ma quest'ultimo è vero. A

(Consigli tecnici e di design)

8 app Android per aumentare la velocità di Internet (e aiutarti a sopravvivere alle vacanze)

Le vacanze stanno arrivando e tu sai cosa significa - tutti quelli che sono tornati a casa stanno aiutando a fare il furbo sul Wi-Fi domestico. È anche il periodo dell'anno in cui siamo trattati con un sacco di contenuti online che possono zappare il piano dati più velocemente di quanto tu possa dire "Cosa c'è per cena?&q

(Consigli tecnici e di design)