Lyhörd Knockout Sms: A Med Looping Video

0
44

Här är en idé! Låt oss göra en HTML <video> spela in formen på vissa bokstäver. Som “Knockout Sms: a” utom i stället för en bild bakom, det är video. En live-demo kommer att förklara mer tydligt:

Se Pennan grundläggande penna av Giulio Mainardi (@mgiulio) på CodePen.

Ett viktigt mål för oss är att utveckla detta lyhört. Tanken är att inte bara att skala videon i storlek för att passa den överordnade behållare (som video i allmänhet gör), men att skala av texten som är väl bibehållen storlek förhållandet mellan typ och underliggande videon.

Vi kommer att få det genom att använda CSS-clip-väg egendom till klipp videon mot en SVG definieras inom en <clipPath> – elementet.

Först ska vi täcka det centrala begreppet. Sedan ska vi lägga till lite ögongodis genom att lägga till några fler funktioner och visa dem med ett par ytterligare demos.

Ställa in Video i HTML

Låt oss börja med video-kodning. I <video> – taggen vi ange Webbadresser för WebM-och MP4-versioner av videon, för att stödja ett brett utbud av webbläsare:

<video>
<källa src=”/en / video/mt-baker.webm” typ=”video/webm”>
<källa src=”/en / video/mt-baker.mp4 – ” typ=”video – /mp4″>
</video>

Då kan vi lägga till vissa attribut för att anpassa video spela beteende:

<video loop autoplay dämpade playsinline>
<källa src=”/en / video/mt-baker.webm” typ=”video/webm”>
<källa src=”/en / video/mt-baker.mp4 – ” typ=”video – /mp4″>
</video>

  • Slingan attribut gör video spel för evigt
  • Autoplay och dämpade attribut används för att möjliggöra automatisk uppspelning av video på sidan ladda på alla enheter och se det spela utan ljud
  • Den playsinline attribut försöker inaktivera full-screen expansion av videon när den spelas på vissa mobila enheter

Då en behållare som är lindade runt om i <video> – elementet. Detta kommer att komma till hands när vi ska krydda upp den grundläggande demo med några visuella effekter.

Här är den kompletta koden:

<div class=”video-container”>
<video loop autoplay dämpade playsinline>
<källa src=”/en / video/mt-baker.webm” typ=”video/webm”>
<källa src=”/en / video/mt-baker.mp4 – ” typ=”video – /mp4″>
</video>
</div>

Den Grundläggande CSS för att ändra Position och Skala Video

Här är den viktigaste uppgiften att uppfylla är att göra videon lyhörd. Det måste skala upp och ner, spänner över hela bredden av sin överordnade behållare och hålla sina inneboende bildförhållande:

.video-behållare video {
display: block;
width: 100%;
}

Efter formatering av video som ett block-element med display: block, tilldela en 100% värdet av dess bredd gör den så stor som dess behållare. Och det är allt vi behöver, eftersom den ursprungliga auto värde för höjd och video inneboende bildförhållande göra det enhetligt skala, utan distorsion.

I den ursprungliga demo, jag upprepade video flera gånger i behållaren för att testa detta lyhörd beteende. Här är CSS-jag använder för att testa känsligheten i varje video i olika bredder:

.video-container {
margin: 40px auto;
utkast: 1px solid #dadada;
&:n: te-av-typ(1) { width: 25%; } /* första video exempel, och så vidare */
&:n: te-av-typ(2) { width: 50%; }
&:n: te-av-typ(3) (bredd: 75%; }
&:n: te-av-typ(4) { width: 100%; }
}

Konturen inställd på de behållare som kommer att hjälpa oss att visualisera placeringen och storleken på filmer när de är klippta. På tal om det…

Klippning Video i CSS

Tack vare clip-väg CSS-egenskapen, kan vi definiera en region av ett element som visas i stället för det hela — och att göra det med en enda rad:

video {
clip-path: url(#clip-00);
}

Med url-adressen() funktion, vi ange id för SVG clipPath element där det klippning text definieras.

Observera att även om den synliga geometri video ändras av klippning, video-element är fortfarande en rektangulär låda för webbläsaren, så att layouten är densamma som om klippning var inte används. Detta är en del av det fina klippning och, om du är ny till begreppet, då definitivt kolla in saras förklaring av det.

Nu tricket är faktiskt skapar klipp väg!

Skapa SVG `clipPath ” element

Jag kommer att skapa den text design, göra redigering, sedan exportera arbete i Inkscape. Liknande åtgärder kan sättas samman med andra vektor redaktörer. Tveka inte att rapportera dina erfarenheter i kommentarerna.

Det första steget är att hålla del av den video aspect ratio, som är dess bredd:höjd-förhållandet.

Nästa, skapa ett dokument med samma storlek som video eller bara med samma proportioner. Så, till exempel, om du video är 1000px bred och 500px hög, då kan du använda det som dokumentets storlek eller något med en 2:1 ratio. Detta kommer att fungera som en platshållare för video, så se till att dokumentet gränser är synliga. Också, ta bort standard lager som skapas av programmet, eftersom detta kommer att förenkla koden som genereras av SVG, undvika att skapa onödiga gruppen delar.

Välj textverktyget, plocka en fin fet och tjock teckensnitt, ange texten och sträcka ut det till att omfatta dokumentet rektangel som du vill.

Nu, om vi tar en titt på den kod som genereras av Inkscape vi se något liknande detta:

<text
xml:space=”bevara”
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%”
förvandla=”skala(0.8988993,1.1124717)”
>
<tspan
sodipodi:roll=”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:’Inverkan Kondenserad'”
>
SMS: a
</tspan>
</text>

Det är lite otymplig, så låt oss konvertera SVG <text> – elementet i en bana:

<g
förvandla=”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″
>
<sökväg
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:’Inverkan Kondenserad'”
id=”path3348″ />
<sökväg
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:’Inverkan Kondenserad'”
id=”path3350″ />
<sökväg
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:’Inverkan Kondenserad'”
id=”path3352″ />
<sökväg
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:’Inverkan Kondenserad'”
id=”path3354″ />
<g>

Nu har vi en grupp som innehåller en väg element för varje bokstav i texten. Fn-gruppering det lämnar denna uppsättning av vägar på rotnivå. Det här steget, förutom att ta bort onödiga grupp, ändrar koordinaterna för stigen delar till svars för den transformering som tillämpades för bort den överordnade gruppen. Så, efter detta steg, det är ingen omvandla attribut i SVG:

<sökväg
inkscape:kontakt-krökning=”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:’Effekt 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” />
<sökväg
inkscape:kontakt-krökning=”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:’Effekt 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” />
<sökväg
inkscape:kontakt-krökning=”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:’Effekt 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” />
<sökväg
inkscape:kontakt-krökning=”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:’Effekt 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 fula stil attribut är fortfarande där, men det spelar ingen roll eftersom vi inte kommer att använda dem.

Vi har färdiga med Inkscape, så att vi kan spara SVG-dokumentet och öppna det i vår favorit-editorn.

Spara SVG-filer från en illustration ansökan är en konstform i sig. Här är några vanliga tips och vanliga inställningar för Adobe Illustrator och en jämförelse av SVG-export från Illustratör, Skiss och Figma.

I HTML-sidan där videon spelas, sätt en infogad SVG-element. Detta kommer att vara värd för klippets sökväg:

<svg class=”klippning-vägar”>
<defs>
</defs>
</svg>

Vi vill inte att den här behållaren element för att påverka sidans layout, så:

.klippning-vägar {
bredd: 0;
höjd: 0;
position: absolute;
}

Lägga till en ny clipPath element i behållaren SVG, med en korrekt id för att identifiera det i klippet-väg egendom, som har sett förut:

<svg class=”klippning-vägar”>
<defs>
<clipPath id=”clip-00″></clipPath>
<clipPath id=”clip-01″></clipPath>

</defs>
</svg>

Som visade i ovanstående utdrag, flera urklippsbanor kan läggas till, om det behövs.

Nu måste vi tilldela objectBoundingBox värde till clipPath attributet clipPathUnits:

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

Detta är en av de grundläggande saker att göra för att ha en lyhörd beskuret. Vi tala om för webbläsaren vilket koordinatsystem som ska användas för numeriska värden som anges i d attribut av de vägar som kommer att läggas till clipPath element.

Standardvärdet för clipPathUnits attribut är userSpaceOnUse. Enligt spec, detta innebär att:

…innehållet i clipPath element representerar värden i den aktuella användaren koordinatsystem på plats vid den tid då (clipPath)element refereras (dvs. användaren koordinatsystem för de element som refererar till den clipPath del via clip-väg egendom).

Istället, med hjälp av andra tillgängliga värdet för clipPathUnits, objectBoundingBox, samordna värderingar och de längder som anges i clipPath innehåll anses som relativ värden i [0,1] – intervallet, i förhållande till de bounding box klippt inslag. Till exempel, om en grafisk primitiva i clipPath som avses koordinaterna (0,0), (1,0), (1,1), (0,1) och (0.5,0.5), dessa punkter skulle representera respektive överst till vänster, överst till höger, nederst till höger, nedre vänster hörn, och mitt i videon, oavsett den faktiska storleken på video på skärmen. Det är detta beteende som gör att texten utskärningen för att skala på samma sätt som den underliggande videon.

Efter att ha tagit bort någon förvandlas från SVG-fil i Inkscape, alla numeriska värden av vägen delar finns nu i dokumentets intervall. För att kartlägga dem i [0,1] intervall som krävs för objectBoundingBox, är det tillräckligt att dela upp sådana numeriska värden av dokumentets storlek. X-koordinater är indelade i dokumentet bredd och y-koordinaterna av dokument höjd.

För att åstadkomma denna uppdelning, en skalning med SVG omvandla attribut kan användas:

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

Den horisontella skalning måste vara ömsesidigt av dokumentet bredd, medan den vertikala skalning måste vara ömsesidigt av dokument höjd. Så, i vårt fall, med tanke på att dokumentet har exakt samma storlek som video, som är 1920 X 1080, vi får två faktorer 1 / 1920 = 0.0005208333333333333 och 1 / 1080 = 0.000925925925925926.

Det sista steget i detta arbetsflöde är att kopiera <sökväg> – element från filen skapades med Inkscape inuti clipPath del, att få något som liknar detta:

<clipPath id=”clip-00″ clipPathUnits=”objectBoundingBox” omvandla=”skala(0.0005208333333333333, 0.000925925925925926)”>
<sökväg 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” />

<sökväg 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>

För att upprepa, vi har kopierat bara d attribut av vägar, kasta alla de andra saker som genereras av Inkscape.

Att sätta Ihop Allt

Och där har vi det, limma ihop den ovan utdrag med lite mer kod(se pennan källa för mer information), får vi den första grundläggande demo:

Andra Exempel

Vi kan återanvända ovan arbetsflödet för att skapa lite mer utskärningar, som i andra demo här:

Det sista exemplet är värd uppmärksamhet eftersom det är det negativa i den text som används i första demo, som är den inre och yttre regioner avgränsas av vägar var bytte. Så, vit text vi ser är ett hål genom vilket bakgrundsfärg på sidan kropp är synlig. Denna negativa beskuret härstammar från den ursprungliga med en skillnad väg drift i Inkscape.

Lägga Till Bakgrundsfärg

Byggnad på toppen av den grundläggande demo, vi kan lägga till en färg till texten beskuret genom att tilldela en background-color till video container, eftersom detta omslag del är synliga överallt videon är klippt ut:

.video-container {
// …
&:n: te-av-typ(1) { background: #c6c7c5; }
&:n: te-av-typ(2) { background: #dcf3ff; }
&:n: te-av-typ(3) { background: #a2d2df; }
&:n: te-av-typ(4) { background: #406e8d; }
&:n: te-av-typ(5) { background: linear-gradient(180deg, #bdc3c2, #2d5d89); }
}

Resultatet kan ses i den tredje demo:

Lägga Till Nyans

Hur färgar videon? Vi kan göra det med en pseudo-element och CSS-Blandning Lägen:

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

.video-behållare::efter {
innehåll: “;
position: absolute;
top: 0;
left: 0;
rätt: 0;
bottom: 0;
clip-path: url(#clip-00);
}

.video-behållare:n: te-av-typ(1) {
bakgrund: #406e8d;
}

.video-behållare:n: te-av-typ(1)::efter {
background-color: #3f51b5;
mix-blandning-läge: tv;
}

::After pseudo-element av video omslaget som är helt placerad på toppen av video, som täcker det helt, och sedan är det klippt med samma sökväg som används för video. På detta sätt är det möjligt att använda olika färger för bakgrunden till och nyans.

Slutligen, efter att ha tilldelats önskad nyans färg till pseudo-element, med mix-blandning-läge egendom som vi kan välja en av de tillgängliga blandningslägen för att få den önskade effekten.

Webbläsare-Stöd

I skrivande stund, nästan alla de senaste versionerna av stationära och mobila webbläsare har stöd för CSS-clip-väg egendom. Den föregås version, -webkit-clip-väg, måste användas på WebKit-baserad webbläsare som Safari och Samsung Internet.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
69 52 54 Inga Inga TP*

Mobil / Surfplatta

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

Tyvärr, undantag ges av Microsofts webbläsare. Det är definitivt inget stöd för Internet Explorer, och på Kanten funktionen är under utveckling. Rösta upp det på Microsoft Developer Feedback-sida!

Naturligtvis, för den sista demo, en webbläsare som stöder CSS Blandning Lägen krävs. I detta fall stöd är större, att denna funktion är även genomföras av Kanten.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
30 17 20 Inga 13 6.1

Mobil / Surfplatta

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

Referenser och Krediter

Eric Meyer skriver om skalning av SVG urklippsbana för ett HTML-element, med objectBoundingBox värde för clipPathUnits attribut, och skalning förändra. Det var en stor inspiration till detta inlägg.

Tack för att Coverr för den video som användes i dessa demonstrationer.