Animera en Klump av Text med SVG och Sms: a Klippning

0
76

Jag kom över denna prydliga lilla animation i en designer nyhetsbrev — tyvärr, jag har förlorat reda på källan, så snälla ge en shout out om du känner igen dig! I det, ett block av text visas att blöda i vyn med en virvel av färger, sedan går ut samma väg den kom in. Det är en smart effekt och en jag ville återskapa i koden.

Den strategi jag tog var att använda SVG text som ett klipp väg för en SVG-bakgrund. Vi måste använda SVG text eftersom CSS för närvarande bara möjligt för oss att animera bakgrund med text klippning om bakgrunden är en GIF, som vi inte kommer att göra.

Vår första uppgift är att skapa en bakgrund av olika SVG former. Oval-y blobbar fungerar ganska bra. Den sak att se på är att matcha storleken på artboard/duk i vilken illustration app som du använder för att samma dimension som viewBox du vill ha det slutliga arbetet. (I Inkscape, detta alternativ är enligt Skalan avsnitt av Dokument Egenskaper.)

Målet är att täcka de flesta av artboard med en mängd olika former. Jag har funnit att det ser bäst ut om några av de former som överlappar varandra.

Nu ska vi skapa lite text i <clipPath>, grupp föremål som utgör bakgrunden inne i <g> – element, och tillämpa en CSS-clip-väg på den gruppen. Sammanlagt ser det ut ungefär så här:

<svg viewbox=”0 0 700 225″>

<clipPath id=”textClip” class=”fylld-heading”>
<text y=”70″>Vi söker</text>
<text y=”140″>Skaparna</text>
<text y=”210″>+Innovatörer</text>
</clipPath>

<g id=”bakgrunden” clip-väg=”url(#textClip)”>
<sökväg d=”m449.78…” />

<g>
</svg>

Vid denna punkt, allt vi får är lite klartext, eftersom vi har inte blivit av att bakgrunden animation riktigt ännu.

Så vad om att animation? Vi kan använda en relativt enkel CSS-animation så här:

/* Animera bakgrunden former */
#bakgrunden väg {
animation: puls 4s kubik-bezier(0.455, 0.030, 0.515, 0.955) oändlig;

/* Nödvändigt för att hålla SVG objekt på plats medan skalning */
förvandla-ursprung: 50% högst 50%.
förvandla-box: fyll-box;
}

@keyframes puls {
/* Roterande det tillsammans med skala gör det lite mer fancy */
0%, 100% { transform: skala(0) rotera(33deg); }
35%, 65% { transform: skala(1) rotera(0deg); }
}

Så långt, så bra.

förvandla-box: fyll-box; stöds inte i Internet Explorer eller Kanten på denna punkt, så om du behöver stöd för dessa webbläsare, du behöver använda en JavaScript-lösning, som den här.

Se Pennan
Animerade blob SVG text klippning effekt – Pt. 1 av Zach Saucier (@Zeaklous)
på CodePen.

Vi kan börja måla saker i genom att hårdkoda färg värden med hjälp av en text eller vektor redaktör, men det är roligare att färga former dynamiskt. Något liknande detta:

// Ange ett utbud av färger
const färger = [‘#f5a147′,’#51cad8′,’#112b39’];
// Välj SVG vägar
var blobbar = dokument.querySelectorAll(“path”);

// Slumpmässigt gäller färger till SVG fylla egendom
blob.forEach(blob => {
blob.style.fyll = färgerna[Math.våningen(Matematik.random() * färger.längden)];
});

För att ändra text-värden för varje iteration, vi måste först lägga till dem till SVG klipp väg.

<clipPath id=”text” class=”fylld-heading”>
<text y=”70″>Vi söker</text>
<text y=”140″>Skaparna</text>
<text y=”210″>+Innovatörer</text>

<text y=”70″>Vi söker</text>
<text y=”140″>Movers</text>
<text y=”210″>+Shakers</text>

<text y=”70″>Vi söker</text>
<text y=”140″>Snygg</text>
<text y=”210″>+Snarstucken</text>
</clipPath>

Då kan vi antingen använda CSS eller JavaScript för att avslöja de textrader i vårt föredragna ordning. Tyvärr kan vi inte omger varje avsnitt av <text> med <g> – elementet, eftersom <g> – element inte fungerar inne i en clipPath. För detta inlägg, vi kommer att dela upp saker och ting i tre CSS-animationer, en för varje grupp av tre vägar:

/* Väljer vägar 1-3 */
#textClip sms: a:n: te-av-typ(n + 1):n: te-av-type(-n + 3) {
animation: showFirst 12s oändlig;
}

/* Väljer vägar 4-6 */
#textClip sms: a:n: te-av-typ(n + 4):n: te-av-type(-n + 6) {
animation: showSecond 12s oändlig;
}

/* Väljer vägar 7-9 */
#textClip sms: a:n: te-av-typ(n + 7):n: te-av-type(-n + 9) {
animation: showThird 12s oändlig;
}

@keyframes showFirst {
0%, 33% {
opacitet: 1;
}
33.0001%, 100% { opacitet: 0; }
}

@keyframes showSecond {
33.0001%, 66% {
opacitet: 1;
}
0%, 33%, 66.0001%, 100% { opacitet: 0; }
}

@keyframes showThird {
66.0001%, 99.999% {
opacitet: 1;
}
0%, 66%, 100% { opacitet: 0; }
}

Som gör susen!

Se Pennan
Animerade blob SVG text klippning effekt – Pt. 2 av Zach Saucier (@Zeaklous)
på CodePen.

På denna punkt kan vi ha lite kul. Till exempel, vi kan byta bakgrund för en annan effekt. Jag använde Inkscape star verktyg med tre till fyra punkter för att generera några slumpmässiga former (med Inkscape är slumpmässig parameter) och sedan färgade dem med hjälp av en palett från en av de många färgschema generatorer (jag använde Palx) för att producera denna version:

Se Pennan
Animerade blob SVG text klippning effekt – Pt. 3 av Zach Saucier (@Zeaklous)
på CodePen.

Bakgrund, och de behöver inte ens fylla upp hela bakgrunden, beroende på vilken effekt som vi vill skapa. Vi skulle till exempel kunna duplicera text med ett element och fylla i texten med det som ses i denna demo.

Eller vi kan blanda upp det genom att vrida den bakgrunden blobbar så här:

Se Pennan
Animerade blob SVG text klippning effekt – Pt. 5 av Zach Saucier (@Zeaklous)
på CodePen.

För att göra färgerna ändras för varje ny uppsättning ord, vi kan antingen använda en CSS-eller JavaScript för animation. Jag använde JavaScript (och flyttat CSS-animation som döljer rader JavaScript):

Se Pennan
Animerade blob SVG text klippning effekt – Pt. 6 av Zach Saucier (@Zeaklous)
på CodePen.

För att centrera texten horisontellt, lägga till x=”50%” text-anchor=”middle” till varje <text> – elementet (Demo). Centrering det vertikalt skulle ta mer manuell beräkning eftersom vi jobbar med en multi-line-format.

En av de fina sakerna med denna metod är att, eftersom den använder SVG, det är lyhörda som standard!

P. S. Efter att jag gjort detta synsätt och letade efter den ursprungliga GIF författare, kom jag över en annan rekreation av Martí Fenosa gör samma effekt med en annan strategi. Kolla hans demo så bra eftersom det är smart!