Responsive Ko-Text Mit Looping-Video

0
21

Hier ist eine Idee! Wir machen eine HTML-Tags <video> innen spielen die Form einiger Buchstaben. Wie “Ko-Text”, nur dass statt eines Bildes hinter, es ist video. Eine live-demo wird deutlicher erklären:

Finden Sie die Pen basic-Stift von Giulio Mainardi (@mgiulio) auf CodePen.

Ein wichtiges Ziel hier ist, zu entwickeln, diese effizient. Die Idee ist, nicht nur das skalieren von Videos in der Größe zu passen, die Sie den übergeordneten container (wie video generell), aber skalieren der text als auch die Beibehaltung der Größe Beziehung zwischen dem Typ und der zugrundeliegenden video.

Wir gehen um dorthin zu gelangen, indem Sie über die CSS-clip-path Eigenschaft, um video-clip gegen einen SVG-Pfad definiert, die innerhalb eines <clipPath> – element.

Zuerst werden wir decken die Kern-Konzept. Dann fügen wir einige “eye-candy”, indem Sie ein paar mehr Funktionen, und zeigen Sie mit ein paar zusätzliche demos.

Einrichten des Video in HTML

Beginnen wir mit dem video-markup. Innerhalb des <video> – tag geben wir die URLs für die WebM-und MP4-Versionen von video und unterstützt eine Breite Palette von Browsern:

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

Dann fügen wir einige Attribute zum anpassen der video-Spiel-Verhalten:

<video autoplay loop stumm geschaltet playsinline>
<source src=”/video/mt-baker.webm” type=”video/webm”>
<source src=”/video/mt-baker.mp4″ type=”video/mp4″>
</video>

  • Das loop-Attribut macht das video immer spielt
  • Die autoplay-und stumm-Attribute werden verwendet, um die automatische Videowiedergabe beim laden der Seite auf allen Geräten und sicherzustellen, dass es spielen, ohne audio
  • Die playsinline-Attribut versucht, deaktivieren Sie die Vollbild-expansion des video, wenn es gespielt wird auf manchen mobilen Geräten

Dann in einen Behälter gewickelt ist, um den <video> – element. Dieses wird in handliches kommen, wenn wir peppen das basic-demo mit einigen visuellen Effekten.

Hier das komplette markup:

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

Die Grundlegende CSS Positionieren und Skalieren Sie das Video

Hier ist die wichtigste Aufgabe zu erfüllen ist, um das video zu reagieren. Es muss die Skala nach oben und nach unten, über die Breite des übergeordneten container und halten Ihre eigentliche Aspekt-Verhältnis:

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

Nach dem formatieren der video-als block-level-element mit display: block zuweisen ein Wert von 100% seiner Breite macht es so groß wie seine container. Und das ist alles, was wir brauchen, da das erste auto Wert für die height-Eigenschaft und das video der eigentliche Aspekt-Verhältnis machen es einheitlich skalieren, ohne Verzerrungen.

In der ursprünglichen demo, wiederholte ich das video mehrere Male in den container test das responsive Verhalten. Hier ist die CSS, die ich verwende zum testen der Reaktionsfähigkeit jedes video in verschiedenen breiten:

.video-container {
margin: 40px auto;
outline: 1px solid #dadada;
&:nth-of-type(1) { width: 25%; } /* erstes video-Instanz, und so weiter */
&:nth-of-type(2) { width: 50%; }
&:nth-of-type(3) { width: 75%; }
&:nth-of-type(4) { width: 100%; }
}

Die Gliederung festgelegt, die auf den Behältnissen wird uns helfen, visualisieren Sie die Lage und die Größe des videos, wenn Sie beschnitten sind. Apropos…

Clipping das Video, in CSS

Dank der clip-Pfad-Eigenschaft des CSS, wir können bestimmen, einer region, die von einem element angezeigt werden, anstatt die ganze Sache — und das mit einer einzigen Zeile:

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

Mit der url () – Funktion definieren wir die id des SVG-clipPath-element, wo die clipping-text definiert.

Beachten Sie, dass, obwohl die sichtbare geometrie des Videos ist verändert, durch die Beschneidung, das video-element ist immer noch ein rechteckiges Feld für die browser, also die Seite, das layout ist das gleiche, als wenn die Beschneidung nicht verwendet wurde. Dies ist Teil der Schönheit von clipping und, wenn Sie neu in das Konzept, dann schauen Sie auf jeden Fall Sarahs Erklärung dafür.

Nun der trick ist wirklich, dass die clip-Pfad!

Erstellung des SVG `clipPath-element

Ich werde den text-Entwurf, Bearbeitung, exportieren Sie dann die Arbeit in Inkscape. Ähnliche Schritte wären zu setzen, zusammen mit anderen Vektor-Editoren. Fühlen Sie sich frei, um den Bericht über deine Erfahrungen in den Kommentaren.

Der erste Schritt ist zu halten, beachten Sie die video-Seitenverhältnis, das Breite:Höhe-Verhältnis.

Als Nächstes erstellen Sie ein Dokument mit der gleichen Größe wie die video-oder nur mit dem gleichen Seitenverhältnis. So, zum Beispiel, wenn Sie video ist 1000px breit und 500 Pixel hoch ist, dann könnte man verwenden, da die Größe der Dokumente oder alles, was mit einem 2:1-Verhältnis. Diese wird als Platzhalter für das video, so stellen Sie sicher, dass das Dokument die Grenzen sind sichtbar. Auch, entfernen Sie die Standard-layer, die vom Programm erstellt, das vereinfacht den code generiert SVG, die Vermeidung der Schaffung unnötiger Elemente gruppieren.

Wählen Sie das text-Werkzeug, wählen Sie eine schön Fett und dick schriftart, geben Sie den text ein und Strecken Sie decken das Dokument Rechteck, wie du willst.

Wenn wir nun einen Blick auf den generierten code von Inkscape, sehen wir etwas wie dieses:

<text
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=”scale(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 Condensed'”
>
TEXT
</tspan>
</text>

Das ist ein bisschen unhandlich, also lasst uns wandeln die SVG <text> – element in einem Pfad:

<g
transform=”scale(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″
>
<Pfad
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 Condensed'”
id=”path3348″ />
<Pfad
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 Condensed'”
id=”path3350″ />
<Pfad
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 Condensed'”
id=”path3352″ />
<Pfad
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 Condensed'”
id=”path3354″ />
</g>

Nun, wir haben eine Gruppe mit einem path-element für jeden Buchstaben des Textes. Un-gruppieren lässt diesen Satz von Pfaden auf der root-Ebene. Dieser Schritt, neben der Beseitigung der nicht benötigte Gruppe, ändert die Koordinaten des Pfades Elemente zu berücksichtigen, für die Transformation, die angewendet wurde, um die entfernten übergeordneten Gruppe. So, nach diesem Schritt, es gibt keine Transformation der Attribute in den SVG:

<Pfad
inkscape:Stecker-Krümmung=”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:’Auswirkungen 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” />
<Pfad
inkscape:Stecker-Krümmung=”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:’Auswirkungen 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” />
<Pfad
inkscape:Stecker-Krümmung=”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:’Auswirkungen 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” />
<Pfad
inkscape:Stecker-Krümmung=”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:’Auswirkungen 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” />

Diese hässlichen style-Attribute sind immer noch da, aber es spielt keine Rolle, weil wir nicht Vorhaben, Sie zu benutzen.

Wir haben fertig mit Inkscape, so sparen wir uns das SVG-Dokument und öffnen Sie es in unserer Lieblings-code-editor.

Speichern von SVG-Dateien, die von einer Abbildung-Anwendung ist eine form der Kunst an und für sich. Hier sind einige Allgemeine Tipps und Allgemeine Einstellungen für Adobe Illustrator und ein Vergleich der SVG-Export aus Illustrator, Sketch und Figma.

In der HTML-Seite wo das video abgespielt wird, fügen Sie eine inline-SVG-element. Dies wird Gastgeber der clip-Pfad:

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

Wir möchten nicht, dass dieses container-element auf die Seite auswirken layout, also:

.clipping-Pfade {
width: 0;
Höhe: 0;
position: absolute;
}

Hinzufügen eines neuen clipPath-element des SVG-container, mit einer richtigen id zu identifizieren, die es in die clip-path Eigenschaft, wie vorher gesehen:

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

</defs>
</svg>

Wie gezeigt in den obigen Schnipsel, mehrere clipping-Pfade können Hinzugefügt werden, wenn nötig.

Jetzt müssen wir ordnen die objectBoundingBox Wert auf das clipPath – Attribut clipPathUnits:

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

Dies ist eines der wesentlichen Dinge zu tun, um eine responsive-Ausschnitt. Sagen wir dem browser, welches Koordinatensystem zu verwenden für die numerischen Werte aufgeführt, die in der d Attribute der Pfade, die angehängt werden, um das clipPath-element.

Der Standardwert für die clipPathUnits Attribut ist userSpaceOnUse. Nach den spec bedeutet dies, dass:

…der Inhalt von dem clipPath-element repräsentieren Werte, die vom aktuellen Benutzer-Koordinatensystem, die in der Zeit, als die (clipPath-element)referenziert wird (D. H., die Benutzer-Koordinatensystem des Elements verweisen auf das clipPath-element über die clip-path Eigenschaft).

Stattdessen mithilfe der anderen verfügbaren Wert für clipPathUnits, objectBoundingBox, die Koordinatenwerte und der Längen angegeben, in der clipPath Inhalte sind als gebrochene Werte im [0,1] – Bereich, relativ zum Begrenzungsrahmen des limitierten element. Zum Beispiel, wenn eine grafische primitiven in der clipPath bezeichnet die Koordinaten (0,0), (1,0), (1,1), (0,1) und (0.5,0.5), diese Punkte würden jeweils für die oben Links, oben rechts, unten rechts, unten Links, Ecken und die Mitte des Videos, unabhängig von der tatsächlichen Größe des Videos auf dem Bildschirm. Es ist dieses Verhalten, das erlaubt den text Ausschnitt zu skalieren, in der gleichen Weise wie die zugrunde liegende video.

Nachdem entfernt alle Transformationen aus der SVG-Datei in Inkscape, alle numerischen Werte der path-Elemente sind nun im Dokument-Bereich. Um die Karte in den [0,1] – Intervall erforderlich für objectBoundingBox, ist es ausreichend, teilen solche numerischen Werte, die durch das Dokument Größe. Die x-Koordinaten geteilt durch das Dokument Breite und die y-Koordinaten durch die Dokument-Höhe.

Um dies zu erreichen division, eine Skalierung mit der SVG-transform-Attribut kann eingesetzt werden:

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

Die horizontale Skalierung muss der Kehrwert des Dokuments Breite, während die vertikale Skalierung muß der Kehrwert des Dokuments Höhe. Also, in unserem Fall gegeben, dass das Dokument die gleiche Größe wie das video, das ist, 1920 X 1080, bekommen wir die beiden Faktoren 1 / 1920 = 0.0005208333333333333 und 1 / 1080 = 0.000925925925925926.

Der Letzte Schritt in diesem workflow ist, kopieren Sie das <path> – Elemente aus der Datei generiert, die von Inkscape innerhalb der clipPath-element, immer so etwas wie dieses:

<clipPath id=”clip-00″ clipPathUnits=”objectBoundingBox” transform=”scale(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>

Um zu wiederholen, wir haben kopiert, nur das d-Attribut der Pfade, vergiss all die anderen Sachen erzeugt, die von Inkscape.

Setzen Sie Alle Zusammen

Und da haben wir es, kleben zusammen die oben genannten snippets mit etwas mehr code(siehe pen der Quelle für details), bekommen wir den ersten basic-demo:

Andere Beispiele

Wir können die Wiederverwendung der oben dargestellte workflow zu erstellen, einige weitere Ausschnitte, wie in der zweiten demo hier:

Das Letzte Beispiel verdient Aufmerksamkeit, denn es ist das negativ der text in der ersten demo, dass ist die interne und externe Regionen begrenzt durch die Pfade wurden ausgetauscht. Also, die weißen text, den wir sehen, ist ein Loch, durch das die Hintergrundfarbe der Seite Körper sichtbar ist. Diese negativen Ausschnitt stammt aus dem original, mit einem Unterschied-Pfad Bedienung in Inkscape.

Hinzufügen Von Hintergrundfarben

Gebäude, die oben auf dem basic-demo, können wir hinzufügen, eine Farbe für den text Ausschnitt, indem eine hintergrund-Farbe, um die video-container, denn dieser wrapper-element ist überall sichtbar das video ausgeschnitten:

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

Das Ergebnis kann man in die Dritte demo:

Hinzufügen Tönung

Wie etwa das einfärben von dem video? Wir können tun, mit einem pseudo-element und die CSS Blend Modes:

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

.video-container::after {
Inhalt: “;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: url(#clip-00);
}

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

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

Dem ::after-pseudo-element des Videos wrapper ist absolut positioniert oben auf dem video, die es voll und ganz, und dann wird es abgeschnitten, mit dem gleichen Pfad für das video. Auf diese Weise ist es möglich, verschiedene Farben für den hintergrund und den Farbton.

Schließlich, nachdem er zugeordnet die gewünschte Farbe, um das pseudo-element, mit dem mix-blend-mode-Eigenschaft, können wir wählen Sie eine der verfügbaren Füllmethoden zu erhalten den gewünschten Effekt.

Browser-Unterstützung

Zum Zeitpunkt des Schreibens, fast alle die neuesten Versionen der desktop-und mobile Browser unterstützen CSS clip-path Eigenschaft. Die Präfix-version, -webkit-clip-path, die verwendet werden auf WebKit-basierten user-agents wie Safari und Samsung Internet.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
69 52 54 Keine Keine TP*

Mobile / Tablet

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

Leider eine Ausnahme ist gegeben, vom Microsoft-Browser. Es gibt definitiv keinen support auf Internet Explorer, und auf dem Rand die Funktion ist in der Entwicklung. Bitte Stimmen Sie auf den Microsoft Developer Feedback-Seite!

Natürlich, für die Letzte demo, ein browser mit Unterstützung der CSS-Blend-Modi erforderlich ist. In diesem Fall, die Unterstützung breiter ist, wird dieses feature wird noch implementiert Rand.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
30 17 20 Keine 13 6.1

Mobile / Tablet

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

Referenzen und Danksagungen

Erich Meyer schreibt über die Skalierung der SVG clipping-Pfad für ein HTML-element, mit dem objectBoundingBox Wert für die clipPathUnits-Attribut, und die Skalierung transformieren. Das war eine riesige inspiration für diesen Beitrag.

Dank Coverr für das video verwendet wurde in diesen demos.