Responsive Knockout Tekst Med Looping Video

0
65

Her er en idé! La oss lage en HTML <video> spill inne i form av bokstaver. Som “Knockout Tekst” unntatt i stedet for et bilde bak, det er video. En live demo vil forklare mer tydelig:

Se Pen grunnleggende pennen av Giulio Mainardi (@mgiulio) på CodePen.

Et viktig mål her er å utvikle dette responsively. Ideen er å ikke bare skalere video i størrelse til å passe foreldrene beholder (som video vanligvis gjør), men skalere teksten, og for å opprettholde størrelsen forholdet mellom type og underliggende videoen.

Vi kommer til å få det ved hjelp av CSS klipp-banen eiendom til klippet videoen mot en SVG-banen som er angitt i en <clipPath> – element.

Først vil vi dekke kjernen i konseptet. Deretter vil vi legge til en fryd for øyet, ved å legge til et par flere funksjoner og viser dem med et par ekstra demoer.

Sette Opp Video i HTML

La oss starte med video markup. Inni <video> – tag-vi angi Nettadresser for WebM og MP4-versjoner av videoen, for å støtte et bredt spekter av nettlesere:

<video>
<source src=”/video/mt-baker.webm” type=”video/webm”>
<source src=”/video/mt-baker.mp4″ type=”video/mp4″>
</video>

Deretter legger vi på noen egenskaper til å tilpasse video utrykk:

<video-loop autokjør dempet playsinline>
<source src=”/video/mt-baker.webm” type=”video/webm”>
<source src=”/video/mt-baker.mp4″ type=”video/mp4″>
</video>

  • Den repeterende attributt som gjør video-spiller for alltid
  • Autoplay og dempet attributter brukes til å tillate automatisk avspilling av video på siden lastes inn på alle enheter, og sikre det spille uten lyd
  • Den playsinline attributt prøver å deaktivere full-tv med utvidelse av videoen når den spilles av på enkelte mobile enheter

Deretter en beholder som er pakket rundt <video> – element. Dette vil komme godt med når vi vil krydre opp de grunnleggende demo med noen visuelle effekter.

Her er den komplette markup:

<div class=”video-container”>
<video-loop autokjør dempet playsinline>
<source src=”/video/mt-baker.webm” type=”video/webm”>
<source src=”/video/mt-baker.mp4″ type=”video/mp4″>
</video>
</div>

Den Grunnleggende CSS til Posisjon og Skalere Video

Her, er den viktigste oppgaven å utføre er å gjøre videoen tilgjengelig. Det må skalere opp og ned, som strekker seg over hele bredden av sine foreldre container og holde sine iboende aspekt ratio:

.video-container video {
display: block;
bredde: 100%;
}

Etter formatering av videoen som en blokk-nivå element med display: block, tildeling av et 100% – verdien til sin bredde gjør at det er like stor som sin container. Og det er alt vi trenger, fordi den første auto verdi av høyden eiendom og video iboende aspekt ratio gjøre det jevnt skala, uten forvrengning.

I den opprinnelige demo, jeg gjentok video flere ganger i beholderen for å teste dette responsive atferd. Her er CSS-jeg bruker til å teste responsen av hver video i forskjellige bredder:

.video-container {
margin: 40px auto;
disposisjon: 1px solid #dadada;
og:nth-of-type(1) { bredde: 25%; } /* første videoen eksempel, og så på */
og:nth-of-type(2) { width: 50%; }
og:nth-of-type(3) { bredde: 75%; }
og:nth-of-type(4) { width: 100%; }
}

Omrisset sett på beholdere vil hjelpe oss til å visualisere plassering og størrelse av videoer når de er klippet. Og mens vi snakker om…

Klipping av Video i CSS

Takk til klipp-banen CSS eiendom, kan vi definere en region av et element som skal vises i stedet for hele greia — og gjør det med en enkelt linje:

video {
klipp-bane: url(#klipp-00);
}

Med den url-en () – funksjonen, kan vi angi id-en for SVG clipPath element der den klipping av tekst er definert.

Merk at selv om den er synlig geometri av video er endret av klipping, video element er fortsatt en rektangulær boks for leseren, slik at sideoppsettet er det samme som om klipping ble ikke brukt. Dette er en del av det fine med klipping og, hvis du er nye til konseptet, så definitivt sjekke ut Sarah ‘ s forklaring på det.

Nå trikset er faktisk å skape klippet banen!

Opprette SVG `clipPath` element

Jeg kommer til å lage tekst, design, gjør redigering, deretter eksportere arbeid i Inkscape. Lignende tiltak kunne settes sammen med andre vektor redaktører. Føl deg fri til å rapportere dine erfaringer i kommentarfeltet.

Det første trinnet er å holde oppmerksom på video sideforholdet som er dens bredde:høyde-forhold.

Neste, opprette et dokument med samme størrelse som video eller bare med samme størrelsesforhold. Så, hvis du for eksempel er videoen er 1000px bredt og 500px høye, så du kan bruke det som dokumentet størrelse eller noe med et 2:1 forhold. Dette vil fungere som en plassholder for video, så sørg for at dokumentet grenser er synlig. Også, fjern standard lag som er opprettet av programmet, da dette vil forenkle koden generert av SVG, for å unngå å skape unødvendig gruppe elementer.

Velg tekst tool, plukke en fin fet og tykk skrift, skriv inn teksten og strekk den til å dekke dokumentet rektangel som du vil.

Nå, hvis vi tar en titt på koden generert av Inkscape vi ser noe som dette:

<tekst
xml:space=”bevare”
style=”font-style:normal;font-weight:normal;font-size:1147.68029785 px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1″
x=”23.404421″
y=”939.04187″
id=”text3336″
sodipodi:linespacing=”125%”
forvandle=”skala(0.8988993,1.1124717)”
>
<tspan
sodipodi:role=”linje”
id=”tspan3338″
x=”23.404421″
y=”939.04187″
style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-family:Impact;-inkscape-font-specification:’Virkningen Kondensert'”
>
TEKST
</tspan>
</text>

Det er litt uhåndterlig, så la oss konvertere SVG – <tekst> – element i en sti:

<g
forvandle=”skala(0.8988993,1.1124717)”
style=”font-style:normal;font-weight:normal;font-size:1147.68029785 px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1″
id=”text3336″
>
<bane
d=”m 545.68862,31.769213 0,181.566607 -140.09769,0 0,725.70605 -235.92452,0 0,-725.70605 -139.5373,0 0,-181.566607 515.55951,0 z”
style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-family:Impact;-inkscape-font-specification:’Virkningen Kondensert'”
id=”path3348″ />
<bane
d=”m 599.48616,31.769213 393.39432,0 0,181.566607 -157.46981,0 0,172.03997 147.38277,0 0,172.60036 -147.38277,0 0,199.49911 173.16073,0 0,181.56661 -409.08524,0 0,-907.272657 z”
style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-family:Impact;-inkscape-font-specification:’Virkningen Kondensert'”
id=”path3350″ />
<bane
d=”M 1554.9524,31.769213 1472.575,433.009 l 124.4067,506.03287 -218.5524,0 q -39.2273,-135.61457 -71.73,-330.07016 -8.9662,85.73978 -24.6572,182.127 l -22.4156,147.94316 -229.7602,0 85.1794,-506.03287 -85.1794,-401.239787 228.079,0 q 6.1643,37.546181 24.6572,124.967137 14.5702,66.68651 24.0968,122.16519 l 50.4352,-247.132327 197.8179,0 z”
style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-family:Impact;-inkscape-font-specification:’Virkningen Kondensert'”
id=”path3352″ />
<bane
d=”m 2105.8165,31.769213 0,181.566607 -140.0976,0 0,725.70605 -235.9246,0 0,-725.70605 -139.5373,0 0,-181.566607 515.5595,0 z”
style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-family:Impact;-inkscape-font-specification:’Virkningen Kondensert'”
id=”path3354″ />
</g>

Vi har nå en gruppe som inneholder en bane element for hver bokstav i teksten. Fn-gruppering den forlater dette settet av stier på rot-nivå. Dette trinnet, i tillegg til å fjerne unødvendige gruppe, endrer koordinatene til banen elementer å ta hensyn til de forvandle som ble brukt til den fjernet overordnede gruppen. Så, etter dette trinnet, det er ingen forvandle attributter i SVG:

<bane
inkscape:kontakt-kurvatur=”0″
id=”path3348″
style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-size:medium;line-height:125%;font-family:Impact;-inkscape-font-specification:’Innvirkning Condensed’;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1″
d=”m 490.51912,35.34235 0,201.98771 -125.93372,0 0,807.32744 -212.07238,0 0,-807.32744 -125.429984,0 0,-201.98771 463.436084,0 z” />
<bane
inkscape:kontakt-kurvatur=”0″
id=”path3350″
style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-size:medium;line-height:125%;font-family:Impact;-inkscape-font-specification:’Innvirkning Condensed’;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1″
d=”m 538.87769,35.34235 353.62188,0 0,201.98771 -141.5495,0 0,191.3896 132.48227,0 0,192.01302 -132.48227,0 0,221.93711 155.65406,0 0,201.98771 -367.72644,0 0,-1009.31515 z” />
<bane
inkscape:kontakt-kurvatur=”0″
id=”path3352″
style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-size:medium;line-height:125%;font-family:Impact;-inkscape-font-specification:’Innvirkning Condensed’;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1″
d=”m 1397.7456,35.34235 -74.049,446.36791 111.8291,562.94724 -196.4566,0 q -35.2614,-150.86737 -64.478,-367.19371 -8.0597,95.38308 -22.1644,202.61114 l -20.1493,164.58257 -206.5313,0 76.5677,-562.94724 -76.5677,-446.36791 205.02,0 q 5.5411,41.769064 22.1644,139.0224 13.0971,74.18686 21.6606,135.90532 l 45.3362,-274.92772 177.8183,0 z” />
<bane
inkscape:kontakt-kurvatur=”0″
id=”path3354″
style=”font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-size:medium;line-height:125%;font-family:Impact;-inkscape-font-specification:’Innvirkning Condensed’;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1″
d=”m 1892.917,35.34235 0,201.98771 -125.9337,0 0,807.32744 -212.0724,0 0,-807.32744 -125.43,0 0,-201.98771 463.4361,0 z” />

De stygge stil attributter er der fortsatt, men det spiller ingen rolle, fordi vi ikke kommer til å bruke dem.

Vi er ferdig med Inkscape, slik at vi kan lagre SVG dokument i våre favoritt-kode-editoren.

Lagre SVG-filer fra en illustrasjon programmet er en kunstform i seg selv. Her er noen vanlige tips og vanlige innstillinger for Adobe Illustrator og en sammenligning av SVG-eksport fra Illustrator, Skisse og Figma.

I en HTML-side hvor videoen er spilt, sett inn en innebygd SVG-element. Dette vil være vert klippet banen:

<svg class=”klipping-stier”>
<defs>
</defs>
</svg>

Vi ønsker ikke at dette container element for å påvirke side layout, slik:

.klipping-baner {
bredde: 0;
høyde: 0;
position: absolute;
}

Legge til en ny clipPath element til container SVG, med en skikkelig id-en som identifiserer den i klipp-banen eiendom, som vi har sett før:

<svg class=”klipping-stier”>
<defs>
<clipPath id=”klipp-00″></clipPath>
<clipPath id=”klipp-01″></clipPath>

</defs>
</svg>

Som vist i ovennevnte utdrag, flere klipping stier kan bli lagt til, hvis det er nødvendig.

Nå, vi må tilordne objectBoundingBox verdi til clipPath er attributt clipPathUnits:

<clipPath id=”klipp-00″ clipPathUnits=”objectBoundingBox”></clipPath>

Dette er en av de grunnleggende ting å gjøre for å ha en forståelsesfull utsnitt. Vi fortelle leseren hvilket koordinatsystem som skal brukes for numeriske verdier som er oppført i d attributter av veier som vil bli lagt til etter clipPath element.

Standardverdien for clipPathUnits attributtet er userSpaceOnUse. I henhold til spesifikasjonen, dette betyr at:

…innholdet i clipPath element representerer verdier i den aktuelle brukerdefinerte koordinatsystem på plass på den tid da den (clipPath)element er det refereres til (dvs., brukeren-koordinatsystem for element refererer til clipPath element via klipp-banen eiendom).

I stedet, ved hjelp av de andre tilgjengelige verdi for clipPathUnits, objectBoundingBox, koordinere verdier og lengder som angitt i den clipPath innhold er regnet som en brøk verdier i [0,1] utvalg, relativ til markeringsrammen av klippet element. For eksempel, hvis et grafisk primitiv i clipPath referert til koordinatene (0,0), (1,0), (1,1), (0,1) og (0.5,0.5), disse poengene ville representere henholdsvis øverst til venstre, øverst til høyre, nederst til høyre, nederst i venstre hjørne, og sentrum av video, uavhengig av den faktiske størrelsen på videoen på skjermen. Det er dette problemet som gjør at teksten utsnitt i målestokk på samme måte som den underliggende videoen.

Etter å ha fjernet alle forvandles fra SVG-fil i Inkscape, alle de numeriske verdiene av banen elementer er nå i dokumentet utvalg. For å kartlegge dem til [0,1] – intervallet som kreves for objectBoundingBox, er det tilstrekkelig å dele slike numeriske verdier av dokument størrelse. X-koordinatene er delt inn i dokumentet bredde og y-koordinater dokument-høyde.

For å oppnå dette divisjon, en skalering med SVG-transform-attributtet kan være ansatt:

<clipPath id=”klipp-00″ clipPathUnits=”objectBoundingBox” transformere=”skala(0.0005208333333333333, 0.000925925925925926)”>

Horisontal skalering må være gjensidig av dokumentet bredde, mens vertikal skalering må være gjensidig av dokumentet høyde. Så, i vårt tilfelle, gitt at dokumentet har nøyaktig samme størrelse som video, det er, 1920 X 1080, vi får to faktorer 1 / 1920 = 0.0005208333333333333 og 1 / 1080 = 0.000925925925925926.

Det siste trinnet i denne arbeidsflyten er å kopiere <bane> – elementer fra fil generert av Inkscape inne i clipPath element, for å få noe som dette:

<clipPath id=”klipp-00″ clipPathUnits=”objectBoundingBox” transformere=”skala(0.0005208333333333333, 0.000925925925925926)”>
<bane d=”m 341.4087,58.040727 0,951.927273 -112.60986,0 -66.8335,-432.74767 0,432.74767 -107.42188,0 0,-951.927273 107.42188,0 72.02149,428.631863 0,-428.631863 107.42187,0 z” />

<bane d=”m 1642.6782,58.040727 214.2334,0 0,190.503053 -85.7544,0 0,180.50751 80.2613,0 0,181.09549 -80.2613,0 0,209.31816 94.2994,0 0,190.50306 -222.7784,0 0,-951.927273 z” />
</clipPath>

For å oppsummere, har vi kopiert bare d egenskap av stier, forkaster alle de andre ting som er generert av Inkscape.

Å sette det Hele Sammen

Og der har vi det, å lime sammen de ovennevnte utdrag med litt mer kode(se pen kilde for detaljer), får vi den første grunnleggende demo:

Andre Eksempler

Vi kan bruke den over arbeidsflyt for å skape litt mer utsparinger, som i andre demo her:

Det siste eksempelet er verdig oppmerksomhet fordi det er den negative av tekst brukt i den første demo, som er den interne og eksterne områder avgrenset av stier som ble byttet. Så, hvit tekst vi ser er et hull gjennom som bakgrunnsfarge på siden kroppen er synlig. Denne negative utsnitt ble avledet fra den opprinnelige med en forskjell banen drift i Inkscape.

Legge Til Bakgrunnsfarger

Bygningen på toppen av den grunnleggende demo, kan vi legge til en farge til teksten utsnitt ved å tilordne en background-color å video container, fordi dette wrapper element er synlig overalt videoen er klippet ut:

.video-container {
// …
og:nth-of-type(1) { background: #c6c7c5; }
og:nth-of-type(2) { background: #dcf3ff; }
og:nth-of-type(3) { background: #a2d2df; }
og:nth-of-type(4) { background: #406e8d; }
og:nth-of-type(5) { background: linear-gradient(180deg, #bdc3c2, #2d5d89); }
}

Resultatet kan sees i tredje demo:

Legge Til Tint

Hvordan om tones video? Vi kan gjøre det med en pseudo-element og CSS Blanding Moduser:

.video-container {
/* … */
position: relative;
}

.video-container::etter {
innhold: “;
position: absolute;
øverst: 0;
venstre: 0;
høyre: 0;
nederst: 0;
klipp-bane: url(#klipp-00);
}

.video-container:nth-of-type(1) {
bakgrunn: #406e8d;
}

.video-container:nth-of-type(1)::etter {
background-color: #3f51b5;
mix-blanding-modus: skjermen;
}

::Etter pseudo element av video wrapper er absolutt plassert på toppen av video, som dekker det helt, og da er det maskert med det samme bane som brukes for video. På denne måten er det mulig å bruke forskjellige farger på bakgrunn og farge.

Til slutt, etter å ha gitt ønsket fargetone farge til pseudo-elementet, med mix-blanding-modus eiendel vi kan velge ett av de tilgjengelige blending modes for å oppnå ønsket effekt.

Nettleserstøtte

På tidspunktet for skriving, er nesten alle de nyeste versjonene av stasjonære og mobile nettlesere støtter CSS-clip-banen eiendom. Den innledes versjonen, -webkit-clip-banen, må brukes på WebKit-baserte bruker agenter som Safari og Samsung Internett.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
69 52 54 Ingen Ingen TP*

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
11.3* 37* Ingen 62 66 57

Dessverre, et unntak er gitt av Microsoft nettlesere. Det er absolutt ingen støtte i Internet Explorer, og på Kanten funksjonen er under utvikling. Vennligst stemme den opp på Microsoft Developer siden for Tilbakemelding!

Selvfølgelig, for den siste demoen, som er en nettleser som støtter CSS Blanding Modus er nødvendig. I dette tilfellet er støtten er større, blir denne funksjonen er også implementert ved Kanten.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
30 17 20 Ingen 13 6.1

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
7.0-7.1 37 Ingen 4.4 66 57

Referanser og Kreditter

Eric Meyer skriver om skalering av SVG beskjæringsbane for et HTML-element, ved hjelp av objectBoundingBox verdi for clipPathUnits attributt, og skalering transform. Det var en stor inspirasjon for dette innlegget.

Takk til Coverr for video som ble brukt i disse demoer.