Reageren Knock-Out Tekst Met Looping Video

0
39

Hier is een idee! Laten we een een HTML <video> spelen in de vorm van enkele letters. Als “Knock-out Tekst” behalve in plaats van een beeld achter, deze video. Een live demo zal uitleggen meer duidelijk:

Zie de Pen basic pen door Giulio Mainardi (@mgiulio) op CodePen.

Een belangrijke doelstelling hierbij is om dit te ontwikkelen responsively. Het idee is om niet alleen de schaal van de video in grootte aan te passen van de bovenliggende container (video in het algemeen), maar de schaal van de tekst, het behoud van de omvang relatie tussen het type en de onderliggende video.

We gaan om er te komen door gebruik van de CSS-clip-pad woning aan de video clip tegen een SVG-pad, gedefinieerd binnen een <clipPath> element.

Eerst zullen we dekken de kern van het concept. Daarna voegen we wat eye candy door het toevoegen van een paar functies en aantonen dat ze met een paar extra demo ‘ s.

Het instellen van de Video in HTML

Laten we beginnen met de video-markup. In de <video> – tag geven we de Url ‘ s voor de WebM en MP4-versies van de video, ter ondersteuning van een breed scala van browsers:

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

Daarna voegen we wat attributen voor het aanpassen van de video-gedrag:

<video-loop autoplay gedempt playsinline>
<source src=”/video/mt-bakker.webm” type=”video/webm”>
<source src=”/video/mt-bakker.mp4″ type=”video/mp4″>
</video>

  • Het loop attribuut maakt de video speelt voor altijd
  • De autoplay en gedempt kenmerken worden gebruikt om het automatisch afspelen van video op het laden van de pagina op alle apparaten en zorg ervoor dat het spelen zonder audio
  • De playsinline kenmerk probeert uit te schakelen, de volledig-scherm uitbreiding van de video wanneer het wordt afgespeeld op mobiele apparaten

Dan is een container is gewikkeld rond de <video> – element. Dit zal van pas komen als we spice up van de basic demo met een aantal visuele effecten.

Hier is de volledige opmaak:

<div class=”video-container”>
<video-loop autoplay gedempt playsinline>
<source src=”/video/mt-bakker.webm” type=”video/webm”>
<source src=”/video/mt-bakker.mp4″ type=”video/mp4″>
</video>
</div>

De Basis van CSS om de Positie en de Schaal van de Video

Hier is de belangrijkste taak te vervullen is om de video te reageren. Het moet de schaal omhoog en omlaag, over de breedte van de bovenliggende container en het houden van haar intrinsieke aspect ratio:

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

Na het formatteren van de video als een block-level element met een display: block, het toewijzen van een 100% – waarde voor de breedte maakt het zo groot is als de container. En dat is alles wat we nodig hebben, want de eerste auto de waarde van de eigenschap hoogte en de video intrinsieke aspect ratio maakt het uniform schaal, zonder vervorming.

In de originele demo, herhaalde ik de video meerdere malen in de container om te testen dit responsief gedrag. Hier is de CSS die ik gebruik om te testen de reactiviteit van elke video op verschillende breedtes:

.video-container {
marge: 40px auto;
overzicht: 1px solid #dadada;
en:nth-of-type(1) { width: 25%; } /* eerste video exemplaar, enzovoort */
en:nth-of-type(2) { width: 50%; }
en:nth-of-type(3) { width: 75%; }
en:nth-of-type(4) { width: 100%; }
}

Het overzicht geplaatst van de containers zal ons helpen met het visualiseren van de locatie en de grootte van de video ‘ s wanneer ze worden geknipt. Spreken van die…

Het knippen van de Video in CSS

Dankzij de clip-pad CSS-eigenschap, definiëren we een gedeelte van een element moet worden weergegeven in plaats van het hele ding — en dat doe je met een enkele regel:

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

Met de url() functie, geven wij de id van de SVG clipPath element waar de knip tekst is gedefinieerd.

Merk op dat hoewel de zichtbare geometrie van de video wordt veranderd door de clipping, het video-element is nog steeds een rechthoekige doos voor de browser, waardoor de pagina lay-out is hetzelfde als de opname werd niet gebruikt. Dit is een onderdeel van de schoonheid van knippen en als u nieuw bent aan het concept, dan zeker kijken op Sarah ‘ s uitleg.

Nu de truc is eigenlijk het maken van de clip pad!

Het maken van de SVG `clipPath` element

Ik ben dan ook van plan om de tekst te maken ontwerp, het bewerken, dan is de uitvoer van het werk in Inkscape. Dergelijke stappen kunnen worden gezet samen met andere vector editors. Voel je vrij om je ervaringen in de comments.

De eerste stap is om te houden van aantekening van de video aspect ratio, dat is de breedte:hoogte verhouding.

Maak een document met dezelfde grootte als de video of gewoon met dezelfde verhouding. Dus, bijvoorbeeld, als je video is 1000px breed en 500 px hoog, dan kan het formaat van het document of iets met een 2:1 ratio. Dit zal fungeren als een tijdelijke aanduiding voor de video, dus zorg ervoor dat het document randen zichtbaar zijn. Verwijder ook de default layer gemaakt door het programma, als dit vereenvoudigt de code die is gegenereerd door SVG, het vermijden van het ontstaan van onnodige groep elementen.

Selecteer de tekst gereedschap kies een mooi vet en dik lettertype, voer de tekst in en strek het dekken van het document rechthoek als u wilt.

Nu, als we kijken naar de code die is gegenereerd door Inkscape we iets ziet zoals dit:

<tekst
xml:space=”preserve”
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%”
transform=”schaal(0.8988993,1.1124717)”
>
<tspan
sodipodi:role=”line”
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:’Impact Verkorte'”
>
TEKST
</tspan>
</text>

Dat is een beetje onhandig, dus we zetten de SVG <tekst> – element in een pad:

<g
transform=”schaal(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″
>
<pad
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:’Impact Verkorte'”
id=”path3348″ />
<pad
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:’Impact Verkorte'”
id=”path3350″ />
<pad
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:’Impact Verkorte'”
id=”path3352″ />
<pad
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:’Impact Verkorte'”
id=”path3354″ />
</g>

Nu, we hebben een groep met een pad element voor elke letter van de tekst. Vn-groepering laat deze set van paden in de hoofdmap. Deze stap, naast het verwijderen van de overbodige groep, wijzigt de coördinaten van het pad elementen om rekening te houden met de transformatie die werd toegepast voor het verwijderen van de bovenliggende groep. Dus na deze stap zijn er geen transformatie kenmerken in de SVG:

<pad
inkscape:connector-kromming=”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:’Impact 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” />
<pad
inkscape:connector-kromming=”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:’Impact 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” />
<pad
inkscape:connector-kromming=”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:’Impact 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” />
<pad
inkscape:connector-kromming=”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:’Impact 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” />

Die lelijke stijl kenmerken zijn er nog steeds, maar het maakt niet uit want we zijn niet van plan om ze te gebruiken.

We zijn klaar met Inkscape, dus we kunnen de SVG-document en open het in onze favoriete code-editor.

Het opslaan van SVG-bestanden van een afbeelding van een applicatie is een kunst op zich. Hier zijn een paar algemene tips en algemene instellingen voor Adobe Illustrator en een vergelijking van de SVG-uitvoer van Illustrator, Tekeningen en Figma.

In de HTML pagina waar de video wordt afgespeeld, het invoegen van een inline SVG-element. Dit zal gastheer van de clip pad:

<svg class=”clipping-paden”>
<defs>
</defs>
</svg>

Dit willen wij niet container element van invloed is op de pagina lay-out, dus:

.clipping-paden {
breedte: 0;
hoogte: 0;
position: absolute;
}

Voeg een nieuwe clipPath element toe aan de container SVG, met een goed id om het te identificeren in de clip-pad goederen, als gezien:

<svg class=”clipping-paden”>
<defs>
<clipPath id=”clip-00″></clipPath>
<clipPath id=”clip-01″></clipPath>

</defs>
</svg>

Zoals aangegeven in het bovenstaande fragment, meerdere uitknippaden kunnen worden toegevoegd, als dat nodig is.

Nu wijzen we de objectBoundingBox waarde aan de clipPath het kenmerk van clipPathUnits:

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

Dit is één van de essentiële dingen te doen om een responsieve-uitsnede. We vertellen de browser welke coördinaat systeem te gebruiken voor de numerieke waarden vermeld in de d kenmerken van de paden die zal worden toegevoegd aan de clipPath element.

De standaard waarde voor de clipPathUnits kenmerk is userSpaceOnUse. Volgens de spec, dit betekent dat:

…de inhoud van de clipPath element vertegenwoordigen waarden in de huidige gebruiker assenstelsel in plaats op het tijdstip waarop de (clipPath)element wordt verwezen (d.w.z. de gebruiker coördinatensysteem voor het element verwijzen naar de clipPath element via de clip-pad-eigendom).

In plaats daarvan, door het gebruik van de andere beschikbare waarde voor clipPathUnits, objectBoundingBox, de waarden van de coördinaten en de lengte die is opgegeven in de clipPath inhoud worden beschouwd als fractionele waarden in de [0,1] bereik, in vergelijking met de bounding box van de bijgesneden element. Bijvoorbeeld, als een grafische primitieve in de clipPath verwezen naar de coördinaten (0,0), (1,0), (1,1), (0,1) en (0.5,0.5), deze punten zou vertegenwoordigen respectievelijk de boven links, boven rechts, onder, links onderaan de hoeken en het midden van de video, ongeacht de werkelijke grootte van de video op het scherm. Het is dit gedrag dat het mogelijk maakt de tekst uitsparing om de schaal op dezelfde manier als de onderliggende video.

Na het verwijderen van alle transformaties van de SVG-bestand in Inkscape, alle numerieke waarden van de pad-elementen zijn nu in het document bereik. Te wijzen in de [0,1] interval vereist voor objectBoundingBox, is het voldoende om de kloof dergelijke numerieke waarden door de grootte van het document. De x-coördinaten worden gedeeld door de breedte van het document en de y-coördinaten van de in dit document hoogte.

Om dit te bereiken divisie, een schaal met de SVG-transform-eigenschap kan worden gebruikt:

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

De horizontale schaal moet de reciproke van de breedte van het document, terwijl de verticale as moet de reciproke van het document hoogte. Dus, in ons geval, gezien het feit dat het document heeft exact dezelfde afmetingen als de video, dat is, 1920 X 1080, krijgen we de twee factoren 1 / 1920 = 0.0005208333333333333 en 1 / 1080 = 0.000925925925925926.

De laatste stap in dit werk te kopieer de <pad> – elementen uit het bestand gegenereerd door Inkscape binnen de clipPath element, het krijgen van iets als dit:

<clipPath id=”clip-00″ clipPathUnits=”objectBoundingBox” transform=”schaal(0.0005208333333333333, 0.000925925925925926)”>
<path 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” />

<path 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>

Nogmaals, we hebben gekopieerd van de d-kenmerk van de paden, gooi al die andere spullen die worden gegenereerd door Inkscape.

Putting het Allemaal Samen

En daar hebben we het, lijmen samen de bovengenoemde fragmenten met wat meer code(zie de pen bron voor meer informatie), krijgen we de eerste basic demo:

Andere Voorbeelden

Kunnen We hergebruiken de bovenstaande workflow te creëren wat meer uitsparingen, zoals in de tweede demo hier:

Het laatste voorbeeld is de aandacht waard, want het is het negatief van de tekst die wordt gebruikt in de eerste demo; dat is, de interne en externe regio ‘ s gescheiden door de paden waren verwisseld. Dus, de witte tekst die we zien is een gat waardoor de achtergrond kleur van de pagina lichaam zichtbaar is. Deze negatieve uitsparing was afgeleid van de oorspronkelijke met een verschil pad werking in Inkscape.

Het Toevoegen Van Achtergrond Kleuren

Gebouw op de top van de basic demo kunnen we een kleur toevoegen aan de tekst afgesneden door het toekennen van een achtergrond-kleur naar de video-container, omdat deze wrapper element is overal zichtbaar in de video is geknipt uit:

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

Het resultaat is te zien in de derde demo:

Het Toevoegen Van Tint

Hoe zit het met het verven van de video? We kunnen dat doen met een pseudo-elementen en CSS-Blend Modes:

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

.video-container::after {
inhoud: “;
position: absolute;
top: 0;
links: 0;
rechts: 0;
bottom: 0;
clip-pad: url(#clip-00);
}

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

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

De ::after pseudo-element van de video wrapper is absoluut gepositioneerd op de top van de video, voor het geheel, en dan is het onvolledige met het zelfde pad dat wordt gebruikt voor de video. Op deze manier is het mogelijk om verschillende kleuren voor de achtergrond en de tint.

Eindelijk, na toegewezen de gewenste tint van de kleur tot de pseudo-element, met de mix-mix-mode eigenschap kunnen we halen een van de beschikbare overvloeimodi te verkrijgen van het gewenste effect.

Browser Ondersteuning

Op het moment van schrijven, bijna alle van de nieuwste versies van desktop-en mobiele browsers ondersteunen CSS clip-pad eigendom. De prefix versie, -webkit-clip-pad, is om gebruikt te worden op WebKit gebaseerde browsers zoals Safari en Samsung Internet.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
69 52 54 Geen Geen TP*

Mobiele / Tablet

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

Helaas, een uitzondering is gegeven door de Microsoft browsers. Er is zeker geen support op Internet Explorer en op de Rand van de functie is in ontwikkeling. Gelieve te stemmen op de Microsoft Developer Feedback-pagina!

Natuurlijk, voor de laatste demo, een browser ondersteunt CSS overvloeimodi is vereist. In dit geval, de ondersteuning is breder, wordt deze functie is zelfs uitgevoerd door Rand.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
30 17 20 Geen 13 6.1

Mobiele / Tablet

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

Verwijzingen en Credits

Eric Meyer schrijft over de schaal van de SVG-clipping pad voor een HTML-element, met behulp van de objectBoundingBox waarde voor de clipPathUnits kenmerk, en de schaal transformeren. Dat was een grote inspiratie voor dit bericht.

Dankzij Coverr voor de video die werd gebruikt in deze demo ‘ s.