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


5 script di scorrimento di confronto immagine gratuiti

I cursori sovrapposti consentono di effettuare confronti tra due immagini, di solito un tipo pre-dopo, con le due immagini sovrapposte l'una sull'altra. Un cursore che può essere manipolato, può essere trascinato dall'utente per mostrare meno dell'immagine precedente e più dell'immagine successiva, e viceversa.

È il modo perfetto per alcuni scenari come la visualizzazione degli effetti duri dell'atmosfera di Marte o di come i paesaggi delle città cambiano nell'arco di mezzo secolo.

Per i designer, è anche un ottimo modo per riflettere sulla quantità di cambiamento che una tecnica o un approccio ha su un'immagine originale. Esistono varie librerie JS che è possibile utilizzare a scopo di confronto. Qui ci sono 5 di loro.

Twentytwenty

Twentytenty è uno strumento visivo per rendere più facile notare le differenze tra due immagini. Questo strumento utilizza jQuery e jquery.event.move per funzionare. È molto facile da usare, basta impilare due immagini in un contenitore, quindi chiamare twentytwenty(); per il contenitore.

Poi:

 $ ( "# Contenitore") twentytwenty ().; 

Twentytenty è reattivo e funziona per tutti i dispositivi, e se si utilizza il framework Foundation, questo funzionerà immediatamente.

Giustapporre

Juxtapose ti aiuta a confrontare due elementi multimediali (foto o GIF) e ti consente di evidenziare facilmente il cambiamento tra le immagini nel tempo. Questo plugin è facile da usare e funziona su tutti i dispositivi. Basta fornire due immagini quindi chiamare il plugin con le opzioni disponibili.

Sulle opzioni, puoi impostare la posizione iniziale del cursore, impostarla in verticale o orizzontale, aggiungere etichetta e credito, animazione e altro.

Prova una demo qui sotto:

imgSlider

imgSlider è un semplice plugin jQuery per rendere il cursore del confronto delle immagini. L'uso è semplice e semplice: dopo aver incluso JS e CSS, avvolgere le immagini in div con la classe left per l'immagine precedente e la classe right per l'immagine after, quindi attivarla chiamando .slider(); . Le opzioni del plugin includono l'impostazione della posizione iniziale del cursore e l'aggiunta / visualizzazione delle istruzioni sul cursore.

Chiama il plugin:

 $ ( 'Cursore') cursore ().; 
Cocoen

Cocoen abilita il tocco con l'uso dell'evento jQuery-Touch. È facile da applicare grazie a una struttura HTML simile al plug-in Twentytwenty . Nello stack di script, oltre a jQuery devi includere la libreria di eventi jQuery Touch, insieme a questo plugin.

$ (document) .ready (function () {$ ('. cocoen'). cocoen ();});

Prova una demo qui sotto:

Cursore di confronto immagine

CodyHouse ha realizzato una demo di un dispositivo di scorrimento per il confronto di immagini con CSS3, jQuery e alcuni script per gestire l'evento di trascinamento e per aggiungere il supporto mobile. Puoi seguire la spiegazione completa e le istruzioni per utilizzare questo plugin qui e vedere la demo qui.

Prova una demo qui sotto:

Eccone altri 3:

Catone : altri plugin necessitano di jQuery come dipendenza, ma Cato non richiede alcuna dipendenza per funzionare, rendendolo una libreria più leggera per i cursori di confronto delle immagini. L'uso è semplice, basta includere la libreria CSS e JS di Cato e seguire la sua struttura HTML.

Sono disponibili opzioni da applicare sul dispositivo di scorrimento, tra cui l'aggiunta di suggerimenti, la modifica della direzione del cursore e l'aggiunta di effetti filtro come seppia e scala di grigi. Comunque dovresti notare che Cato attualmente ha solo il supporto per WebKit.

Prima Dopo : è leggero, completamente reattivo e funziona su qualsiasi layout e dimensione. Puoi vedere le demo live su Codepen.

Indicatore di comparazione video HTML5 - Quando un altro sviluppatore tenta di creare un dispositivo di scorrimento di confronto per le immagini, Dudley Storey applica il dispositivo di scorrimento al video. Per lavorare, usa jQuery e solo poche righe di codice. Guarda la demo su Codepen per vedere l'azione.

Crea grafica dall'aspetto professionale in modo facile con Canva

Crea grafica dall'aspetto professionale in modo facile con Canva

Avere una grafica di bell'aspetto è uno dei modi migliori per attirare i lettori sul tuo blog o sito web. Ma inventare una grafica di qualità professionale da soli è più facile a dirsi che a farsi. Il software di progettazione grafica è spesso costoso, complicato o entrambi, e se sei già impegnato a lavorare sul tuo blog, probabilmente non avrai il tempo di insegnarti come usare qualcosa come Adobe Photoshop.Beh,

(Consigli tecnici e di design)

20 Inspiring Instagrammers che devi seguire

20 Inspiring Instagrammers che devi seguire

Con 150 milioni di utenti mensili attivi (a settembre 2013) in tutto il mondo, Instagram è chiaramente una delle app più popolari al mondo . È utilizzato da molti grandi fotografi ed è anche una grande fonte di ispirazione per i web designer.Ci sono molte persone creative che amano condividere la loro creatività nell'arte e nel design attraverso i loro account Instagram. E p

(Consigli tecnici e di design)