Draaiend verloop in kop

Een grote kop met een tweekleurig verloop waarvan de hoek heel langzaam ronddraait, zodat de kleur door de regels wandelt; ingetogen en chic.

Architectenbureau Lindeman · Delft

Ruimte die je
pas mist als
hij er niet is.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- Draaiend verloop in kop · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-gsh"><span class="ei-gsh__k">Architectenbureau Lindeman · Delft</span><h3 class="ei-gsh__h">Ruimte die je<br>pas mist als<br>hij er niet is.</h3></div>
</div>

/* Draaiend verloop in kop · NedDev · eigen werk. */
@property --ei-gsh-a{syntax:'<angle>';inherits:false;initial-value:20deg}
.ei-gsh{padding:0 26px;width:100%;box-sizing:border-box}
.ei-gsh__k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.5);margin-bottom:12px}
.ei-gsh__h{margin:0;font-family:'Switzer',sans-serif;font-weight:800;font-size:clamp(24px,4.6vw,34px);line-height:1.02;letter-spacing:-.035em;color:transparent;background:linear-gradient(var(--ei-gsh-a),#0a0a0a 0%,#0a0a0a 38%,#F5480F 62%,#0a0a0a 92%);-webkit-background-clip:text;background-clip:text;animation:ei-gsh-turn 14s linear infinite}
@keyframes ei-gsh-turn{to{--ei-gsh-a:380deg}}
@media(prefers-reduced-motion:reduce){.ei-gsh__h{animation:none}}

Meer uit tekstanimaties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →