Contenuto
- Introduzione alle transizioni CSS
- Introduzione alle trasformazioni CSS
- Creazione di un widget jQuery della galleria a fogli mobili
- Markup HTML
- Crea il widget
- Aggiungi markup dinamico
- Animare
Questo articolo è apparso per la prima volta nel numero 223 di .net magazine, la rivista più venduta al mondo per web designer e sviluppatori.
Le transizioni e le trasformazioni CSS sono ancora relativamente nuove e la sintassi può cambiare prima di diventare uno standard. Tuttavia, possiamo ancora iniziare a utilizzare queste proprietà ora: dobbiamo solo assicurarci di utilizzare le versioni con prefisso del fornitore. Per fornire supporto agli utenti di tutti i browser è importante includere tutte le versioni con prefisso del fornitore. Questo, tuttavia, non rende il codice particolarmente conciso, quindi per motivi di chiarezza userò solo il prefisso -webkit durante questo tutorial.
Introduzione alle transizioni CSS
Le transizioni CSS sono una nuova funzionalità di CSS3 che ti dà la possibilità di animare gli elementi semplicemente modificando le proprietà CSS. Usando le transizioni si dice al browser quali proprietà dovrebbero essere animate, quanto tempo dovrebbero impiegare e quale funzione di andamento dovrebbe essere usata. Ecco un esempio di come un elemento potrebbe essere automaticamente sfumato semplicemente aggiungendo una classe:
div # test {-webkit-Transition-property: opacity; -webkit-Transition-Duration: 500ms; -webkit-Transition-Timing-Function: Easy; Opacity: 1.0;} div # test.hidden {Opacity: 0.0;}
Introduzione alle trasformazioni CSS
Anche le trasformazioni CSS sono nuove in CSS3 e consentono di eseguire manipolazioni 2D e 3D su elementi come il ridimensionamento, la traduzione e la rotazione. Ecco un esempio di come puoi usare una trasformazione per ruotare del testo:
p # test {-webkit-transform: rotate (45deg);}
L'utilizzo di transizioni e trasformazioni CSS insieme è un modo semplice per creare animazioni davvero accattivanti per il tuo sito web o app web. Le transizioni possono anche essere accelerate dall'hardware in modo che funzionino molto meglio sui dispositivi mobili rispetto alle tradizionali animazioni JavaScript basate su timer.
Creazione di un widget jQuery della galleria a fogli mobili
Per dimostrare la potenza della combinazione di trasformazioni CSS3 con transizioni, creiamo un widget galleria per jQuery che imiti un effetto di cambio pagina. La maggior parte dei browser moderni ora supporta le transizioni CSS, ma non tutti supportano ancora le trasformazioni 3D. Poiché stiamo creando un effetto 3D, prenderemo di mira solo i browser WebKit come Safari, Chrome e iOS.
Markup HTML
Per cominciare, dobbiamo impostare il nostro markup in modo che il widget abbia qualcosa con cui lavorare:
div> img src = "images / photo1.webp" alt = "Foto 1" /> img src = "images / photo2.webp" alt = "Foto 2" style = "display: none" /> img src = "immagini /photo3.webp "alt =" Foto 3 "style =" display: none "/> / div>
Per fare questo creiamo una struttura semplice con una serie di elementi immagine all'interno di un div contenitore. Daremo anche a questo elemento una classe in modo che l'accesso tramite jQuery sia più semplice. È importante impostare la proprietà display su none per tutte tranne la prima immagine: in questo modo il rendering peggiorerà meglio se, per qualche motivo, il browser del client non supporta JavaScript.
Crea il widget
Ora che abbiamo il nostro markup dobbiamo creare il widget jQuery (i widget jQuery fanno parte della libreria jQuery UI). In un file separato, crea il seguente modello di widget di base:
(function ($) {$ .widget ("ui.flipGallery", {opzioni: {}, _ create: function () {// Setup widget}}});
Useremo il costruttore dei widget (_create ()) per impostare il DOM in modo che sia pronto per gli effetti di inversione. Abbiamo anche bisogno di aggiungere del codice al documento HTML principale per creare la galleria al caricamento. Per fare ciò, aggiungi quanto segue alla tua pagina HTML:
tipo di script = "text / javascript" charset = "utf-8"> jQuery (document) .ready (function ($) {$ (’div.gallery’). flipGallery ();}); / script>
Quindi la prima cosa che dobbiamo fare è una configurazione generale. Aggiungi quanto segue alla funzione _create () dei tuoi widget:
var that = this; // Trova tutte le immagini per gallerythat.images = that.element.find ('img'); // Se abbiamo solo un'immagine allora non procedereif (that.images.length = 1) return; that.currentImageIndex = 0; // Ottieni image dimensionsthat.height = that.images.first (). height (); that.width = that.images.first (). width (); // Assicurati che la galleria l'elemento rimane questo sizethat.element.width (that.width) .height (that.height); // Consenti il posizionamento assoluto dei sottoelementi all'interno di gallerythat.element.css ('position', 'relative'); // Setup l'elemento per supportare perspectivethat.element.css ({'- webkit-prospettiva': 1100, '- webkit-prospettiva-origin': '50% 50% '})
Il codice precedente ottiene un elenco di tutte le immagini che abbiamo specificato nel markup e garantisce che l'elemento contenitore sia dimensionato correttamente. Crea anche una variabile di istanza per tenere traccia del numero di indice dell'immagine visualizzata. Lo useremo un po 'più tardi per progredire nella sequenza di immagini.
La parte finale di questo codice imposta la prospettiva sull'elemento della galleria. Dato che stiamo creando un effetto 3D, dobbiamo dire all'elemento di avere una prospettiva, altrimenti la pagina non sembrerà uscire dallo schermo quando eseguiamo la transizione. Più piccolo è il numero utilizzato per -webkit-prospettiva, più pronunciata è la prospettiva. Per questo effetto ho scoperto che i valori intorno a 1.100 sembrano i migliori.
Aggiungi markup dinamico
Ora siamo pronti per fare in modo che il widget faccia qualcosa. Per prima cosa dobbiamo capire di quali elementi avremo bisogno per l'effetto desiderato. Mentre creiamo un capovolgimento di pagina, dobbiamo pensare a cosa succede quando giri una pagina in un libro.
- Vogliamo iniziare vedendo la prima immagine nella sua interezza.
- Vogliamo quindi vedere il lato destro di questa prima immagine ruotare attorno al centro, rivelando il lato destro della seconda immagine.
- Dopo che l'elemento ruotato è perpendicolare allo schermo, vogliamo continuare a ruotare, ma visualizzare invece il lato sinistro della seconda immagine.
Per ottenere ciò, vorremo creare una struttura di elementi DOM che rifletta il diagramma sopra.
Ora creiamo alcuni elementi DOM per abbinare la stratificazione desiderata. Poiché dobbiamo essere in grado di mostrare solo alcune parti delle immagini, invece di visualizzare gli elementi img /> applicheremo le immagini allo sfondo degli elementi. Questo essenzialmente ci consentirà di ritagliare (o ritagliare) dinamicamente le immagini a nostro piacimento. Per creare i livelli uno e due dobbiamo aggiungere il seguente codice:
// Crea un elemento per mostrare la diapositiva sinistra dell'immagine Athat.imageLeftA = $ ('div />', {'class': 'imageLeftA'}). Css ({width: '100%', height: '100 % ', position:' relative '}); // Crea un elemento per mostrare il lato destro dell'immagine Bthat.imageRightB = $ (' div /> ', {' class ':' imageRightB '}). css ({ // Altezza intera, metà larghezza: '50% ', altezza:' 100% ', // Copri la parte destra di imageLeftAposition:' absolute ', in alto:' 0px ', a destra:' 0px ', // Allinea a destra the background imagebackgroundPosition: 'right top'}). appendTo (this.imageLeftA); // Aggiungi a DOMthat.imageLeftA.appendTo (that.element);
Successivamente aggiungeremo gli elementi che rappresenteranno la pagina che girerà. Questo conterrà i livelli tre e quattro:
// Ora crea la 'pagina' che verrà capovolta.page = $ ('div />', {'class': 'page'}). Css ({// Full height, half widthwidth: '50% ', height: '100%', // Copri la parte destra dell'immagine posizione: 'absolute', top: '0px', right: '0px', // Dobbiamo dire a questo elemento di preservare l'orientamento dei sottoelementi come esso è trasformato'-webkit-transform-style ':' preserv-3d '}); that.imageRightA = $ (' div /> ', {' class ':' imageRightA '}). css ({// Fill the container (che è tutta altezza, metà larghezza) larghezza: '100%', altezza: '100%', // Allinea a destra l'immagine di sfondobackgroundPosition: 'right top', // Assicurati che l'elemento inizi in alto a sinistra della posizione della pagina : 'absolute', top: '0px', left: '0px', // Non vogliamo vedere l'immagine quando è rivolta verso di noi '-webkit-backface-visible': 'hidden'}). appendTo (that.page); that.imageLeftB = $ ('div />', {'class': 'imageLeftB'}). css ({// Fill the container (which is full height, half width) width: '100 % ', height:' 100% ', // Assicurati che l'elemento inizi in alto a sinistra della posizione della pagina: 'assoluto', in alto: '0px', a sinistra: '0px', // Dobbiamo ruotare questo pannello in quanto dovrebbe iniziare con la parte posteriore rivolta verso l'esterno dello schermo'-webkit-transform ':' rotateY ( 180deg) ', // Non vogliamo vedere l'immagine quando è rivolta verso di noi'-webkit-backface-visible ':' hidden '}). AppendTo (that.page); that.page.appendTo (that .elemento);
La cosa importante da notare nel codice sopra è che il lato sinistro dell'elemento che rappresenta l'immagine B è ruotato di 180 ° in modo che quando inizia sia rivolto verso lo schermo. È anche importante che diciamo a entrambi i livelli all'interno dell'elemento della pagina di mostrare solo la loro faccia anteriore. Ciò si ottiene utilizzando la proprietà CSS3 "-webkit-backface-visible":
"Nascosto" e significa che qualsiasi parte dell'elemento che non è rivolta verso lo schermo non può essere vista dall'utente. Impedendo la visualizzazione del retro degli elementi, creiamo l'impressione che i due sottoelementi siano su entrambi i lati della pagina.
Abbiamo anche utilizzato un'altra nuova proprietà CSS3 "-webkit-transform-style": "preserv-3d" sull'elemento della pagina che contiene i due livelli. Questa proprietà forza il calcolo delle trasformazioni sui sottoelementi rispetto a questo elemento. Questo crea un po 'di confusione, ma per questo esempio significa che quando l'elemento di pagina viene ruotato, i due elementi figlio ruoteranno con esso. Senza di esso otterrai un comportamento inaspettato.
Animare
A questo punto abbiamo impostato tutti i nostri elementi DOM, quindi dobbiamo rimuovere le immagini originali dal contenitore e dipingere le immagini corrette sui nostri vari livelli. Per completare la funzione _create () aggiungere le seguenti due righe di codice:
// Rimuove le immagini da DOMthat.images.remove (); that._setupImages ();
Poiché ora stiamo chiamando una nuova funzione, dovremo quindi definire cosa fa la funzione _setupImages (). Aggiungi il seguente codice al tuo widget:
_setupImages: function () {var that = this; var nextImageIndex = that.currentImageIndex + 1; // Range check the next image indexif (nextImageIndex> = this.images.length) nextImageIndex = 0; // Imposta gli elementi segnaposto con il corretto backgroundsthat.element.add (that.imageLeftA) .add (that.imageRightA) .css ('background-image', 'url (' + $ (that.images.get (that.currentImageIndex)) .attr ('src ') +') '); that.imageRightB.add (that.imageLeftB) .css (' background-image ',' url ('+ $ (that.images.get (nextImageIndex)) .attr (' src ') + ')');}
Ora abbiamo tutto a posto per poter inizializzare la galleria, ma a questo punto tutto ciò che vedremo nel browser è la prima immagine. Ora aggiungiamo una funzione per eseguire effettivamente il capovolgimento della pagina.
Per prima cosa abbiamo bisogno di un modo per attivare l'effetto. Puoi farlo aggiungendo un pulsante al tuo file HTML:
button type = "button"> Mostra immagine successiva / pulsante>
Dobbiamo anche modificare il nostro codice jQuery.ready per allegare un listener al pulsante. Cambia la funzione in questo modo:
jQuery (document) .ready (function ($) {$ ('div.gallery'). flipGallery (); $ ('button.next'). click (function (event) {event.preventDefault (); // Trigger un capovolgimento di pagina $ ('div.gallery'). flipGallery ('turn');});});
Quando il pulsante viene premuto, ora attiverà la funzione di accensione sul nostro widget. Ora implementiamo questa funzione in modo che crei l'effetto di cambio pagina. Aggiungi il codice seguente:
turn: function () {var that = this; // Imposta la Transitionthat.page.css ({'- webkit-Transition-property': '-webkit-transform', '- webkit-Transition-Duration': '1000ms' , '- webkit-Transition-timing-function': 'ease', // Assicurati che la rotazione ruoti attorno al bordo sinistro'-webkit-transform-origin ':' left '}); // Usa setTimeout () per assicurati che le impostazioni precedenti abbiano avuto effetto prima di procedere con il setTimeout (function () {that.page.css ({// Flip da sinistra a destra attorno all'asse Y'-webkit-transform ':' rotateY (-180deg) '});}, 50);}
Quindi cosa fa il codice sopra? Per prima cosa, diamo al nostro elemento di pagina un po 'di CSS per dirgli quale proprietà animare e come vorremmo che fosse visualizzata l'animazione. In questo caso, vogliamo che le modifiche alla proprietà -webkit-transform siano animate per una durata di 1.000 ms e vorremmo utilizzare la funzione di temporizzazione della facilità. Specifichiamo anche che vorremmo eseguire trasformazioni attorno al lato sinistro dell'elemento. Ciò assicurerà che quando ruotiamo l'elemento della pagina (che rappresenta il lato destro dell'immagine) ruoterà attorno al centro dell'immagine.
La seconda parte del codice si applica quindi alla rotazione, impostando la nuova posizione in cui vogliamo che si trovi l'elemento della pagina. Perché abbiamo detto che tutte le modifiche alla proprietà -webkit-transform dovrebbero essere animate, invece di passare immediatamente alla nuova posizione di rotazione , l'elemento di pagina si animerà uniformemente, dando l'effetto di voltare pagina desiderato.
Può sembrare che abbiamo finito, ma come ci prepariamo per l'immagine successiva in modo da poter scorrere un numero arbitrario di immagini? Fortunatamente, quando una transizione è completata, il browser attiverà un evento, che possiamo ascoltare nello stesso modo in cui potremmo fare un clic o una pressione di un tasto. Modifichiamo la nostra funzione turn () aggiungendo un listener di eventi da ripristinare per la transizione successiva. Sostituisci la prima riga della funzione turn () con il seguente nuovo codice:
var that = this; // Imposta una funzione da attivare quando la transizione è terminata var transitEnd = function (event) {// Smetti di ascoltare la transizione eventsthat.page.unbind ('webkitTransitionEnd', transitEnd); that.currentImageIndex ++; // Range controlla la nuova immagine indexif (that.currentImageIndex> = that.images.length) that.currentImageIndex = 0; // Imposta lo sfondo della galleria sul nuovo imagethat.element.css ('background-image', that.imageLeftB. css ('background-image')); // Nasconde gli elementi DOM creati per rivelare gli elementi backgroundvar della galleria = that.imageLeftA.add (that.page) .hide (); // Impedisce alle modifiche alla pagina di essere animate. page.css ({'- webkit-transition-property': 'none'}); setTimeout (function () {// Reimposta gli elementi per il prossimo turnthat.page.css ('- webkit-transform', 'none' ); that._setupImages (); elements.show ();}, 50);} // Ascolta quando la transizione è terminata that.page.bind ('webkitTransitionEnd', transitEnd);
Ora, quando una transizione viene completata, eseguiamo i seguenti passaggi per ripristinare per il turno di pagina successivo:
- Incrementa l'indice dell'immagine corrente.
- Imposta lo sfondo degli elementi della galleria come nuova immagine.
- Nascondi i nostri livelli personalizzati.
- Disabilita le transizioni e ripristina la rotazione sul nostro elemento della pagina.
- Chiama _setupImages () per dipingere le immagini correnti sui nostri livelli per l'immagine corrente e quella successiva nella sequenza.
E dopo tutto questo duro lavoro abbiamo il nostro prodotto finito: un widget jQuery riutilizzabile in grado di produrre straordinari effetti di capovolgimento di pagina che saranno perfetti per una galleria di portfolio.
