Costruisci un dispositivo di scorrimento immagine a tema iPad con jQuery

Se non sei uno sviluppatore web esperto, può essere piuttosto intimidatorio avvicinarsi a un progetto in cui il tuo cliente è alla ricerca di qualcosa di trendy e interattivo come uno slideshow Apple-centric.

Oggi ti insegneremo come creare un tale progetto in pochi minuti usando alcune fantastiche risorse gratuite da tutto il web. Ti guideremo attraverso dieci semplici passaggi, quindi anche se hai poca o nessuna esperienza sul web, questo progetto dovrebbe essere un gioco da ragazzi!

Cosa stiamo costruendo

Lo scopo di questo tutorial è di mostrare quanto sia facile creare una pagina web interattiva e incredibilmente animata utilizzando risorse completamente gratuite e uno sforzo minimo per riunirle tutte insieme. Utilizzeremo jQuery, un'immagine iPad gratuita e un plug-in di immagine gratuito per ottenere il seguente effetto.

• Pagina di dimostrazione
• Scaricare files

Passaggio 1: avvia l'HTML

La prima cosa che vogliamo fare è ottenere una struttura di base per il nostro codice HTML. Basta incollare il tipico documento di avvio HTML. Ho usato HTML5 sotto, ma puoi usare qualcosa di più vecchio se ritieni che sia appropriato.

Titolo della pagina

Si noti che a questo punto ho incluso due collegamenti: uno in un foglio di stile e uno in jQuery. Assicurati di includere entrambi. Molti sviluppatori consigliano anche di includere una versione locale di jQuery nel caso in cui la versione collegata non riesca per qualche motivo.

L'unico vero markup che abbiamo a questo punto è un contenitore div. Aggiungeremo più tardi ma per ora è perfetto.

Passaggio 2: scarica l'iPad

Ovviamente, avremo bisogno di un'immagine per iPad. L'iPad è abbastanza semplice da poter creare il tuo abbastanza velocemente, ma prenderemo una versione pre-costruita per accelerare il processo.

Se tu Google? IPad PSD ,? la prima opzione che si apre è un fantastico file gratuito di Teehan + Lax con non solo l'iPad stesso, ma anche un sacco di elementi dell'interfaccia utente.

Scarica questa immagine iPad e lanciala in Photoshop per prepararti al passaggio successivo.

Passaggio 3: preparare il PSD

Prendi i livelli contenenti solo l'iPad vuoto e inseriscili in un nuovo documento con le dimensioni impostate su 883 px per 535 px. Imposta il colore di sfondo su # 1b1a1b e ridimensiona l'iPad in modo che lo schermo sia largo circa 460px.

Per aggiungere un po 'di interesse visivo ho gettato anche un'ombra e un riflesso. Si noti che il riflesso si attenua prima di colpire la porzione dello schermo. Ciò semplifica moltissimo le cose annullando la necessità di una riflessione dal vivo che si aggiorni con ogni diapositiva.

Passaggio 4: avviare il CSS

Ora che abbiamo la nostra immagine di sfondo per iPad, avvia un file style.css e imposta l'immagine dell'iPad come sfondo.

* {margine: 0; padding: 0; } body {background-color: # 1b1a1b; } #container {width: 883px; altezza: 535 px; background-image: url (images / ipad.jpg); overflow: nascosto; margine: 30px auto; }

Come sempre, ho inserito un reset CSS di base per assicurarmi che tutti i browser si trovino sulla stessa pagina con margini e padding. Ho anche impostato il colore di sfondo sullo stesso colore che avevamo nel nostro PSD. Alla fine ho gettato l'immagine dell'iPad e l'ho centrata sulla pagina impostando una larghezza e usando? Auto? per i margini.

Anteprima del progresso

A questo punto la tua anteprima dal vivo dovrebbe assomigliare all'immagine qui sotto. Per ora c'è solo un iPad centrato su uno sfondo solido, ma sta già iniziando a sembrare abbastanza bello!

Passaggio 5: aggiungi un'immagine

Prima di importare la presentazione vera e propria, vorremmo ottenere il nostro posizionamento elaborato con una singola immagine statica. Fare questo ora ci rende le cose più facili, quindi non dobbiamo posizionare un oggetto attivo che potrebbe funzionare o meno.

Innanzitutto vorrete ovviamente creare o catturare un'immagine da qualche parte. Ho appena usato una foto del mio brutto set di mug a 460 x 345. Getta la tua immagine in un "cursore"? div all'interno del contenitore.

<img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-ipad-themed-image-slider-with-jquery_5.jpg"> <h2>Passaggio 6: scarica Nivo Slider</h2> <p>jQuery rende la costruzione di cursori di immagini personalizzati un gioco da ragazzi, ma i plug-in jQuery precablati come Nivo Slider riducono davvero la quantità di lavoro necessario a circa zero e spesso possono fornire un risultato finale bello e professionale. </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-ipad-themed-image-slider-with-jquery_6.jpg"> <p>Vai a scaricare una copia gratuita di Nivo Slider. Questo dispositivo di scorrimento di facile implementazione ha nove opzioni di transizione, supporta didascalie e collegamenti ed è completamente personalizzabile. È un esempio perfetto del tipo di omaggi di qualità che puoi trovare sul Web se sai dove guardare. </p> <p>Prendi i seguenti due file dal download e inseriscile nella directory principale della tua pagina:</p> <ul> <li>jquery.nivo.slider.pack.js</li> <li>nivo-slider.css</li> </ul> <p>Ricordati di collegare questi file nella parte principale del tuo codice HTML. Ora dovresti avere quattro file collegati come nel seguente codice:</p> <textarea wrap="soft" readonly="">

Passaggio 7: aggiungere altre immagini

Ora che abbiamo la nostra presentazione, vorremmo aggiungere qualche altra immagine. Nivo prenderà automaticamente tutte le immagini contenute nel tuo cursore slider in modo da non dover fare nulla di speciale qui, ma lascialo cadere.

<img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-ipad-themed-image-slider-with-jquery_7.jpg"> <h2>Passaggio 9: Disegnare i controlli</h2> <p>Tecnicamente, dovremmo probabilmente creare tutti questi stili da soli perché i bravi ragazzi che forniscono il cursore Nivo ci incoraggiano a farlo. Tuttavia, per concludere rapidamente questo tutorial, utilizzeremo semplicemente il foglio di stile di esempio che forniscono qui.</p> <p>Nel download sono incluse alcune immagini e un altro foglio di stile da includere nel codice HTML? Custom-nivo-slider.css.? Piuttosto che collegarsi a un milione di fogli di stile diversi, in pratica sarebbe probabilmente una buona idea combinarli per evitare sovrapposizioni. </p> <p>La cosa fondamentale che devi fare con questo foglio di stile è eliminare la prima sezione di stili che appaiono in quanto interferiscono con il posizionamento che abbiamo già implementato. Qui sotto puoi vedere come ho commentato tutto tranne il colore di sfondo e il grafico di caricamento. </p> <textarea wrap="soft" readonly=""> #slider {/ * position: relativo; margine: 30px 30px 60px 30px; * / background: # 1b1a1b url (loading.gif) no-repeat 50% 50%; / * - moz-box-shadow: 0px 0px 10px # 333; -webkit-box-shadow: 0px 0px 10px # 333; box-shadow: 0px 0px 10px # 333; * /}

Step 10: Controlla il prodotto finale!

Come potete vedere qui sotto, quell'ultimo gruppo di stili ha davvero ben rifinito la presentazione. Ora abbiamo frecce che ci portano avanti e indietro e una lista orizzontale di proiettili per navigare e tracciare il progresso della presentazione.

Assicurati di controllare la demo dal vivo per vederlo in azione. Passa anche un po 'di tempo sul sito di Nivo Slider e sfoglia i vari miglioramenti disponibili.

Che altro vorresti vedere?

Questo tutorial è nato da me che trovavo grandi risorse sul web e volevo condividerle con i nostri lettori. Lascia un commento qui sotto e fammi sapere se ci sono altri plugin jQuery o omaggi web che vorresti vedere qui dimostrati e vedrò se riuscirò a creare un breve tutorial per aiutarti.

Vuoi condividere l'articolo? Ecco un pratico URL abbreviato che puoi incollare su Twitter o Facebook: http://ow.ly/2xtcZ