Geanimeerde achtergrondstrepen die overgaan tijdens zweven

Hoe vaak reikt u naar de CSS background-size eigendom? Als je bent zoals ik - en waarschijnlijk veel andere front-end mensen - dan is het meestal wanneer jij background-size: cover een afbeelding om de ruimte van een heel element te vullen.

Nou, ik kreeg een interessante uitdaging voorgeschoteld waarvoor meer geavanceerde achtergrondafmetingen nodig waren: achtergrondstrepen die overgaan bij het zweven. Bekijk dit en plaats het met je cursor:

Er is daar veel meer aan de hand dan de grootte van de achtergrond, maar dat was de truc die ik nodig had om de strepen te laten overgaan. Ik dacht dat ik je zou laten zien hoe ik daar aankwam, niet alleen omdat ik denk dat het een heel mooi visueel effect is, maar ook omdat ik creatief moest worden met verlopen en overvloeimodi waarvan ik denk dat je ze leuk zou vinden.

Laten we beginnen met een heel eenvoudige opstelling om het simpel te houden. Ik heb het over een enkele

in de HTML die is vormgegeven als een groen vierkant:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

De achtergrondstrepen instellen

Als je meteen naar een lineaire CSS-gradiënt ging toen je die strepen zag, dan zitten we al op dezelfde pagina. We kunnen in dit geval niet precies een herhalend verloop maken, omdat we willen dat de strepen ongelijke hoeveelheden ruimte innemen en ze laten overgaan, maar we kunnen vijf strepen maken door vijf achtergronden aan elkaar te koppelen bovenop onze bestaande achtergrondkleur en ze bovenaan te plaatsen -rechts van de container:

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

Ik heb horizontale strepen gemaakt, maar we kunnen ook verticaal gaan met de aanpak die we hier behandelen. En we kunnen dit behoorlijk vereenvoudigen met aangepaste eigenschappen:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

Dus de --gt waarde is het verloop en --n is een constante die we gebruiken om de strepen naar beneden te duwen zodat ze verticaal verschoven zijn. En je hebt misschien gemerkt dat ik geen echt verloop heb ingesteld, maar eerder effen zwarte strepen in de linear-gradient() functie - dat is opzettelijk en we zullen later zien waarom ik dat deed.

Nog een ding dat we zouden moeten doen voordat we verder gaan, is voorkomen dat onze achtergronden zich herhalen; anders zullen ze betegelen en de hele ruimte vullen:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

We hadden kunnen instellen background-repeat in de background steno, maar ik besloot het hier uit te splitsen om de dingen gemakkelijk leesbaar te houden.

De strepen compenseren

We hebben technisch gezien strepen, maar het is vrij moeilijk te zeggen omdat er geen ruimte tussen zit en ze de hele container bedekken. Het is meer alsof we een effen zwart vierkant hebben.

Hier kunnen we de gebruiken background-size eigendom. We willen zowel de hoogte als de breedte van de strepen instellen en de eigenschap ondersteunt een syntaxis met twee waarden waarmee we precies dat kunnen doen. En we kunnen die maten koppelen door ze op dezelfde manier te scheiden door komma's background.

Laten we eenvoudig beginnen door eerst de breedtes in te stellen. De single-value syntaxis gebruiken voor background-size stelt de breedte in en standaard de hoogte in auto. Ik gebruik hier volledig willekeurige waarden, dus stel de waarden in op wat het beste werkt voor uw ontwerp:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

Als je dezelfde waarden gebruikt als ik, krijg je dit:

Het ziet er niet echt naar uit dat we de breedte voor alle strepen hebben ingesteld, toch? Dat komt door de auto hoogtegedrag van de enkelvoudige syntaxis. De tweede streep is breder dan de andere eronder en bedekt ze. We moeten de hoogte zo instellen dat we ons werk kunnen zien. Ze moeten allemaal dezelfde hoogte hebben en we kunnen onze zelfs hergebruiken --n variabele, nogmaals, om het simpel te houden:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

Ach, veel beter!

Openingen tussen de strepen toevoegen

Dit is een volledig optionele stap als je ontwerp geen openingen tussen de strepen nodig heeft, maar de mijne wel en het is niet al te ingewikkeld. We veranderen de hoogte van elke streep background-size een smidge, waardoor de waarde wordt verlaagd, zodat ze niet de volledige verticale ruimte vullen.

We kunnen onze blijven gebruiken --n variabel, maar trek er bijvoorbeeld een klein bedrag van af 5pxgebruik calc() om te krijgen wat we willen.

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

Dat is veel herhaling die we kunnen elimineren met een andere variabele:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Maskeren en blenden

Laten we nu de palegreen achtergrondkleur die we tot nu toe voor visuele doeleinden hebben gebruikt voor wit.

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

Een zwart-witpatroon als dit is perfect om te maskeren en te mengen. Om dat te doen, gaan we eerst onze inpakken

in een nieuwe bovenliggende container en introduceer een tweede

onder het:

We gaan hier een beetje CSS-refactoring uitvoeren. Nu we een nieuwe bovenliggende container hebben, kunnen we de vaste width en height eigendommen die we gebruikten op onze

ginder:

section {
  width: 500px;
  height: 500px;
} 

Ik ga ook CSS Grid gebruiken om de twee te positioneren

elementen op elkaar. Dit is dezelfde truc die Temani Afif gebruikt om de zijne te creëren super coole fotogalerijen. Het idee is dat we beide divs over de volle container plaatsen met behulp van de grid-area eigenschap en lijn alles uit naar het midden:

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

Kijk hier eens naar. De reden dat ik een solide verloop heb gebruikt dat eerder van zwart naar zwart gaat, is om ons in te stellen voor het maskeren en mengen van de twee

lagen. Dit is geen echte maskering in de zin dat we de mask eigenschap, maar het contrast tussen de lagen bepaalt welke kleuren zichtbaar zijn. Het door wit bedekte gebied blijft wit en het door zwart bedekte gebied lekt door. MDN's documentatie over overvloeimodi heeft een mooie uitleg over hoe dit werkt.

Om dat te laten werken, pas ik het echte verloop toe dat we op de eerste willen zien

terwijl we de stijlregels van onze initiaal toepassen

op de nieuwe, met behulp van de :nth-child() pseudo-kiezer:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Als we hier stoppen, zullen we eigenlijk geen enkel visueel verschil zien met wat we eerder hadden. Dat komt omdat we het eigenlijke mengen nog niet hebben gedaan. Laten we dat nu doen met behulp van de screen mengmodus:

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

Ik heb een beige achtergrondkleur gebruikt in de demo die ik aan het begin van dit artikel liet zien. Die iets donkerder soort gebroken witte kleur laat een beetje kleur door de rest van de achtergrond lopen:

Het zweefeffect

Het laatste stukje van deze puzzel is het zweefeffect dat de strepen verbreedt tot de volledige breedte. Laten we eerst onze selector ervoor opschrijven. We willen dat dit gebeurt wanneer de bovenliggende container (

in ons geval) zweeft. Als het zweeft, veranderen we de achtergrondgrootte van de strepen in de tweede

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

We willen de background-size van de strepen over de volle breedte van de container met behoud van dezelfde hoogte:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

Dat "klikt" de achtergrond op volledige breedte. Als we een beetje toevoegen transition hierop, dan zien we de strepen uitzetten bij zweven:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

Hier is die laatste demo nogmaals:

Ik heb daar alleen tekst toegevoegd om te laten zien hoe het eruit zou kunnen zien om dit in een andere context te gebruiken. Als u hetzelfde doet, is het de moeite waard om ervoor te zorgen dat er voldoende contrast is tussen de tekstkleur en de kleuren die in het verloop worden gebruikt om te voldoen aan WCAG-richtlijnen. En hoewel we even ingaan op toegankelijkheid, is het de moeite waard rekening houdend met gebruikersvoorkeuren voor verminderde beweging als het gaat om het zweefeffect.

Het zit er op!

Best netjes toch? Ik denk het zeker. Wat ik hier ook leuk aan vind, is dat het behoorlijk onderhoudbaar en aanpasbaar is. We kunnen bijvoorbeeld de hoogte, kleuren en richting van de strepen wijzigen door enkele waarden te wijzigen. Je zou zelfs nog een paar dingen kunnen variëren, zoals de kleuren en breedtes, om het nog beter configureerbaar te maken.

Ik ben echt geïnteresseerd als je dit op een andere manier zou hebben aangepakt. Zo ja, deel het dan in de comments! Het zou leuk zijn om te zien hoeveel variaties we kunnen verzamelen.