Tekst met bewegende outline
Hierboven zie je het woord 'Hobbyhoekje', gevormd door de –bewegende– contouren van de letters. Door de kleurtjes ziet het er een beetje psychedelisch uit.
De contouren bestaan uit delen van verschillende kleur. De bewegingsrichting van de 'bínnenkant' van de letters is tegengesteld aan de bewegingsrichting van de 'buitenkant'.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
- Er worden drie zaken besproken:
- De oorsprong van het script.
- De werking van het script, in algemene termen.
- Inbouwen in je eigen site.
- De oorsprong van het script
- Ik heb dit ooit eens aangetroffen op de website van de Engelstalige versie van het blad Webdesigner Magazine. Het is gemaakt
door Mark Shufflebottom.
N.B.: De Nederlandse versie van Webdesigner Magazine heeft het ook gepubliceerd, in nummer 82 (december 2015, pag. 48). - Inmiddels lijkt het te zijn verdwenen, maar het is te leuk om te worden vergeten. Daarom staat er nu een bewerking van op deze plaats.
- Voor deze website is de code opgeschoond. Overbodige toeters en bellen zijn verwijderd.
- De werking van het script
- Het effect vindt plaats binnen een <svg>-object. Dat bevat een
<symbol>-tag met id="s-text" voor de tekst en een <g>-tag voor het effect.
- De tekst is gemaakt binnen een <text>-tag. Het woord 'Hobbyhoekje' wordt daar ingesteld. In de originele code heeft <g class="g-ants">. Dat is niet nodig, want er wordt binnen het webdocument niet aan g-ants gerefereerd.
- De tekst is gemaakt binnen een <text>-tag. Het woord 'Hobbyhoekje' wordt daar ingesteld.
- Het lettertype is 'Oswald', maar het kan elk ander lettertype zijn. Oswald is een webfont van Google. Het
wordt in de CSS opgenomen via een @import-opdracht.
- Alleen de omtrek (contour) van de letters wordt gebruikt. Dit wordt geregeld via de CSS-eigenschap stroke. De letters zelf zijn transparant, wat wordt wordt ingesteld met fill:none.
- Op het moment dat dit wordt geschreven komt de eigenschap stroke nog niet voor in de officiële W3C standaarden,
maar behalve door IE en FF wordt het door de grote browsers volledig ondersteund.
- De contour heeft de klasse text-copy. De contour wordt omgezet in een streeplijn met stroke-dasharray. De 6% en 29% bepalen de lengte van de streepjes.
- Er zijn vijf kleuren. Die worden ingesteld met de pseudo-klasse text-copy:nth-child.
- De beweging wordt gestart door stroke-dashoffset en wordt gestuurd door animation in combinatie met @keyframes.
- Meer informatie over het toepassen van deze techniek vind je op
https://css-tricks.com/svg-line-animation-works/.
De aanpak op css-tricks gebruikt veel JavaScript. Zoals op deze pagina blijkt is dat niet altijd nodig.
- Inbouwen in je eigen site
- Zet de code in je webdocument zoals hieronder is aangegeven.
- De kleuren pas je aan door de waarde van stroke aan te passen in text-copy:nth-child. Je kunt hier alle aanduidingen gebruiken die CSS kent.
- Het aanpassen van de bewegingssnelheid is een kwestie van proberen en (veel) geduld. Vuistregels om tot een goed resultaat te komen zijn er niet.
- Als je de afmetingen van het SVG-plaatje wilt veranderen, moet doe ja dat door height en width aan te passen in de CSS van svg, maar je moet ook de afmetingen in het viewBox-attribuut van de <svg>-tag aanpassen.
- Het veranderen van de teksthoogte is, net als het veranderen van de outline, een kwestie van veel proberen en dus van geduld.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald);
svg {
display: block;
font: 8em 'Oswald';
width: 600px;
height: 130px;
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: black;
stroke-dasharray: 6% 29%;
stroke-width: 3px;
stroke-dashoffset: 0%;
animation: stroke-offset 5s infinite linear;
}
.text-copy:nth-child(1) {
stroke: #5c0404;
animation-delay: -1s;
}
.text-copy:nth-child(2) {
stroke: #d6801c;
animation-delay: -2s;
}
.text-copy:nth-child(3) {
stroke: #008;
animation-delay: -3s;
}
.text-copy:nth-child(4) {
stroke: #d00;
animation-delay: -4s;
}
.text-copy:nth-child(5) {
stroke: #55981b;
animation-delay: -5s;
}
@keyframes stroke-offset {
100% { stroke-dashoffset: -35%;}
}
</style>
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).
<svg viewBox="0 0 600 130">
<symbol id="s-text">
<text x="30px" y="100px">Hobbyhoekje</text>
</symbol>
<g>
<use href="#s-text" class="text-copy"></use>
<use href="#s-text" class="text-copy"></use>
<use href="#s-text" class="text-copy"></use>
<use href="#s-text" class="text-copy"></use>
<use href="#s-text" class="text-copy"></use>
</g>
</svg>
Downloaden:
Druk op de knop:
File: voorb469.zip, 692 bytes.
