Lag filmoppsett av høy kvalitet med CSS3 og jQuery

Cinemagraphs er kjempegøy - en overraskende blanding mellom et statisk fotografi og en video. De engasjerer besøkende på nettstedet eksplisitt fordi de i utgangspunktet ser ut til å være et vanlig fotografi, men så fanger de betrakteren overraskende ved å bevege seg subtilt, og et øyeblikk er den besøkende fullt engasjert med siden din.

Det er mange flotte opplæringsprogrammer om hvordan du lager 'tradisjonelle' filmoppsett på nettet (og en av de beste er akkurat her på .net ) men det er noen få grunnleggende begrensninger for den vanlige cinemagraph-tilnærmingen.

Først og fremst bruker filmer det animerte GIF-formatet til å fange rammene i animasjonen. Dette er en enkel, bærbar og fleksibel måte å lage en animasjon på, men da GIF er strengt 8bit, er paletten som kan reproduseres ekstremt begrenset. Dette er selvfølgelig like mye en mulighet som en begrensning, og tvinger kunstneren til å vurdere hvert element i håndverket sitt, men det betyr at vakre, rike og mettede kinoer ikke pleier å være praktiske.

Den andre begrensningen er av størrelse - for å gjøre en animert GIF tilstrekkelig bærbar, må den gjengis i relativt små dimensjoner. Som sådan er muligheten til å fordype den besøkende i det øyeblikket med overraskelse og glede begrenset av omfanget av det siste stykket, og stedet det tar på siden. Igjen er det merkbare unntak, selv om kvaliteten på det endelige resultatet har en tendens til å slå et slag når reglene er brutt.

I denne opplæringen viser vi deg hvordan du lager en fullskjerm-kompatibel film med en annen teknikk. I stedet for å gjengi animasjonen vår ved hjelp av GIF, lager vi en sprite med JPG som format, slik at vi kan skalere opp kunstverkene til praktisk talt alle størrelser, og gjengi et fullt spekter av farger. Du lærer hvordan du deler video i individuelle rammer, ordner rammene i en enkelt sprite som lastes effektivt i nettleseren, og bruker CSS3 (med jQuery som en sikkerhetskopi) for å bla mellom rammene, og skape en rik filmkvalitet av høy kvalitet. .

1. Film motivet ditt

Som med alle filmer er det første trinnet å identifisere og filme motivet ditt. Sikt etter noe der bevegelsen er subtil og begrenset i omfang - for eksempel modellens øyne som beveger seg eller vann som drypper fra et rør. Selv om denne teknikken er mer fleksibel i mengden informasjon du kan formidle, er kunsten med et vellykket filmbilde at det først ser ut til å være et statisk bilde, så husk det når du velger motiv, og sørg for at opptakene dine er stabile!

Vi har valgt litt gress som blåser i vinden for videoen vår



Vi har valgt litt gress som blåser i vinden for videoen vår

2. Importer til Photoshop

Konverter opptakene dine til et passende format som du kan åpne i Photoshop, og sørg for at du har satt arbeidsområdet til Motion-forhåndsinnstillingen. Du kan velge dette ved å velge Vindu> Arbeidsområde> Bevegelse. Skrubb gjennom videoen din, og finn en seksjon som ikke varer mer enn et sekund for å fungere som din animasjon. Husk at det siste stykket må ha identisk første og siste ramme for å fungere som en kontinuerlig animasjon.

Ta med videoen din inn i Photoshop og undersøk den ved hjelp av arbeidsområdet Motion

Ta med videoen din inn i Photoshop og undersøk den ved hjelp av arbeidsområdet Motion

3. Velg seksjonen

Når du har identifisert biten av videoen du vil bruke, drar du inn arbeidsområdeshåndtakene på tidslinjen for å markere området du skal lage din filmavsnitt fra. Arbeid deg gjennom hver ramme i utvalget ditt, og se etter det beste stillbildet - du bruker dette til å begrense bevegelsen som vises i den siste delen, og sørg for at alt starter og slutter i samme posisjon. Når du har funnet riktig stillbilde, velger du hele lerretet (Ctrl / Cmd + A), kopierer (Ctrl / Cmd + C) og limer inn (Ctrl / Cmd + V) på et nytt lag.

Velg en del av videoen du vil bruke som grunnlag for animasjonen din, og sørg for at den sømløst løses

w & n serie 7 børster
Velg en del av videoen du vil bruke som grunnlag for animasjonen din, og sørg for at den sømløst løses

4. Masker stillbildet ditt

Legg til en lagmaske i stilllaget ditt, og bruk svart maling på masken for å fjerne områdene i bildet du vil flytte som en del av animasjonen. Når du gjør dette, er det verdt å stoppe hver gang du maskerer noe av bildet, for å sikre at den underliggende videoen sitter komfortabelt innenfor gapet som er igjen i stillbildet.

Masker ut en del av videoen din for å isolere delen du vil animere

Masker ut en del av videoen din for å isolere delen du vil animere

5. Gjengi videoen din

Når du er glad for at du har fått et rent resultat, med bevegelsen begrenset til en del av bildet ditt, velger du Fil> Eksporter> Gjengi film for å lagre arbeidet ditt som en ny videofil. Reduser bildefrekvensen til mellom 12 og 15 bilder per sekund; Dette bidrar til å redusere antall bilder vi trenger å gjengi i den endelige spriten, noe som reduserer filstørrelsen dramatisk og gjør stykket mer nettvennlig.

Reduser bildefrekvensen for videoen din for å kontrollere den endelige filstørrelsen på animasjonen

Reduser bildefrekvensen for videoen din for å kontrollere den endelige filstørrelsen på animasjonen

6. Last inn videoen

Nå som du har gjengitt videoen, åpner du den rett opp igjen i Photoshop ved å velge File> Import> Video Frames to Layers. Dette alternativet lar deg gjengi hver ramme på et nytt lag, noe som gjør det enkelt å sende ut som en serie JPEG-filer. Ikke kryss av alternativet Lag ramme-animasjon i importdialogen.

hvordan bli kreativ direktør for et magasin

Bruk Photoshops importvideorammerfunksjon for å distribuere rammer til lag

Bruk Photoshops importvideorammerfunksjon for å distribuere rammer til lag

7. Output som JPG

For hvert lag må vi lagre en JPEG-fil av høy kvalitet. Du kan automatisere dette ved å velge Fil> Skript> Eksporter lag til filer. Hvis du vil reversere animasjonen din for å sikre at den løkker perfekt, kopierer du de omvendte rammene og ordner dem i riktig rekkefølge inne i lagpanelet før du eksporterer, slik at du får en sømløs sløyfe.

Send ut hver enkelt ramme som en JPG-fil, klar til å settes sammen til en sprite

Send ut hver enkelt ramme som en JPG-fil, klar til å settes sammen til en sprite

8. Ordne som sprite og fargekorrekt

Lag et nytt dokument i Photoshop med samme bredde som rammen din, og så mange rammer som du har rammer i animasjonen. Plasser hver ramme i komposisjonen, den ene under den andre for å lage en enkelt sprite. Legg til hvilken som helst skarphet eller generell fargekorrigering du vil bruke, slik at den endelige effekten blir jevn.

Vi har styrket bildet vårt med kurver og litt skjerping

Vi har styrket bildet vårt med kurver og litt skjerping

9. Lag beholderen

Fordi vi har en enkelt bildesprite, i stedet for en serie individuelle filer, må vi sørge for at bare den første rammen er synlig mens den lastes inn. Vi kan gjøre dette ved å laste inn bildet som et bakgrunnsbilde til et element som er satt til størrelsen på rammen vår. Den første rammen av animasjonen vår vil fylle området, og resten av spriten lastes ut av syne.

hvorfor sier min icloud-lagring full
Caption: We’ve given our

Vi har gitt oss en generell klasse og en spesifikk ID som lar oss målrette den enkelt ved hjelp av CSS

Vi har gitt oss en generell klasse og en spesifikk ID som lar oss målrette den enkelt ved hjelp av CSS

10. Legg til CSS

På det enkleste trenger vi bare å bruke bildet som bakgrunn. Legg til CSS vist for å plassere den for å fylle, og angi dimensjonene til bredden og høyden til en enkelt ramme. Vær oppmerksom på at vi bruker absolutt bildeposisjonering - når vi animerer bakgrunnsbildet vårt, vil vi flytte bakgrunnen i trinn for hele rammen for å skape en flipbook-effekt og en jevn animasjon.

#mycinemagraph { position: relative; margin: auto; width: 960px; height: 540px; border: 20px solid #fff; box-shadow: 0px 0px 10px #000; background: transparent url(cinemagraph.jpg) no-repeat 0px 0px; -moz-animation: flipframes 3s infinite; -webkit-animation: flipframes 3s infinite; animation: flipframes 3s infinite;}

Vår grunnleggende CSS gir dimensjonene til cinemagraph, og laster sprite-bildet i bakgrunnen av

Vår grunnleggende CSS gir dimensjonene til cinemagraph, og laster sprite-bildet i bakgrunnen av

11. Bruk CSS-animasjoner

Vi skal bruke CSS-animasjoner for å fullføre effekten ettersom den lar oss la nettleseren bekymre seg for å gjengi animasjonen. Opprett forhåndsinnstillingen:

@keyframes flipframes { 0% { background-position: 0px 0px; } 6.999% { background-position: 0px 0px; } 7% { background-position: 0px -540px; } 13.999% { background-position: 0px -540px; } 14% { background-position: 0px -1080px; } 20.999% { background-position: 0px -1080px; } 21% { background-position: 0px -1620px; } 27.999% { background-position: 0px -1620px; } 28% { background-position: 0px -2160px; } 34.999% { background-position: 0px -2160px; } 35% { background-position: 0px -2700px; } 41.999% { background-position: 0px -2700px; } 42% { background-position: 0px -3240px; } 48.999% { background-position: 0px -3240px; } 49% { background-position: 0px -3780px; } 54.999% { background-position: 0px -3780px; } 55% { background-position: 0px -4320px; } 61.999% { background-position: 0px -4320px; } 62% { background-position: 0px -4860px; } 68.999% { background-position: 0px -4860px; } 69% { background-position: 0px -5400px; } 75.999% { background-position: 0px -5400px; } 76% { background-position: 0px -5940px; } 82.999% { background-position: 0px -5940px; } 83% { background-position: 0px -6480px; } 89.999% { background-position: 0px -6480px; } 90% { background-position: 0px -7020px; } 94.999% { background-position: 0px -7020px; } 95% { background-position: 0px -7560px; } 99.999% { background-position: 0px -7560px; } 100% { background-position: 0px 0px; } }

Den forhåndsinnstilte animasjonen vil bla automatisk mellom bildene i animasjonen

Den forhåndsinnstilte animasjonen vil bla automatisk mellom bildene i animasjonen

12. Modernizr for eldre nettlesere

Ikke alle nettlesere er kompatible med CSS3 ennå, så for eldre nettlesere har vi et valg: enten la dem ha et statisk bilde (og ikke noe overraskelsesøyeblikk som en konsekvens) eller fall tilbake på skriptet. Legg til Modernizr JavaScript-plugin, og bruk den til å lage en jQuery-flippbokeffekt ved å se etter støtte for HTML5-elementer. Selve animasjonen er ganske enkelt et tilfelle av å kjøre en løkke og plassere bakgrunnsbildet opp en ramme hver iterasjon. Sjekk ut koden vår for å se dette i aksjon.

i=0; // counter to indicate which frame we're showing frameheight = 540; // height of the frame numframes = 15 // total number of frames in sprite $(document).ready(function(){ // Only apply the fallback to non-capable browsers $('.no-cssanimations').each(function(){ var t = setInterval('changeframe()',200); // aim for around 10fps }); }); function changeframe() { i = i + 1; if (i>(numframes-1)) { i=0; } newposition = 0 - (i*frameheight); $('#mycinemagraph').css({backgroundPosition:'0px '+newposition+'px'}); }

Vi har satt opp et jQuery-skript som bare vil gjelde for elementer som er berørt av modernizr, slik at vi kan gi et effektivt tilbakefall for eldre nettlesere.

Vi har satt opp et jQuery-skript som bare vil gjelde for elementer som er berørt av modernizr, slik at vi kan gi et effektivt tilbakefall for eldre nettlesere.

Nedlastingskoblingen øverst i denne artikkelen vil gi deg kildefilene og JPEG som brukes til å lage dette filmavsnittet. Hvis du vil ha de originale video- og PSD-filene, kan du laste dem ned her . Denne nedlastingen er 82 MB stor.