Witam po raz dziewiąty w minicyklu pokazującym jak własnoręcznie osiągnąć pewne efekty w CSS. Dziś do osiągnięcia efektu:

Kliknięcie w Result spowoduje przeładowanie animacji.

Okej, wiemy co chcemy osiągnąć. Dziś do tego użyjemy kompilowanego CSSa przez Sass czyli kompilator plików .scss do .css. Bardzo krótko o co w tym chodzi: Możemy pisać o wiele wydajniejszy kod, zagnieżdżać go, pisać pętle, używać zmiennych, a wynikowo dostaniemy o wiele dłuższy normalny CSS. Na tym przykładzie SCSS ma linii 37 a po skompilowaniu do zwykłego css ma ich już 76, przy czym ta ilość rośnie znacząco im więcej mamy kodu, zagnieżdżeń itd.

Na początek krótkie wyjaśnienie zmiennych.

$+nazwa = wartość przykład:

[code]
$dwcolor: #3cbabe;
[/code]

Czyli wszędzie gdzie w scss wpiszę #dwcolor podczas kompilacji wstawi mi #3cbabe

Więc tworzymy sobie napis, który będzie nas interesował ale składając go z poszczególnych liter w osobnych tagach, ja użyłem <div>, ale możesz to zrobić w jakim Ci się podoba :)

 

[code]
<h2>
<div class="letter">I</div>
<div class="letter heart">❤</div>
<div class="letter">D</div>
<div class="letter">a</div>
<div class="letter">i</div>
<div class="letter">l</div>
<div class="letter">y</div>
<div class="letter">w</div>
<div class="letter">e</div>
<div class="letter">b</div>
<div class="letter">.</div>
<div class="letter">p</div>
<div class="letter">l</div>
</h2>
[/code]

Dopisujemy podstawowe style, żeby to jakoś wyglądało, kolor ustawiam właśnie przy użyciu naszej zmiennej $dwcolor:

[code]
h2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
margin: 0;
padding: 0;
box-sizing: border-box;
font-style: normal;
font-family: 'Lato’;
font-weight: 800;
color: $dwcolor;
font-size: 3em;
}
[/code]

561f8357aea60
Serduszko nam ucieka w dół więc musimy je wyśrodkować, ale tym zajmiemy się za chwilę.

Czas na animację!

  1. Na starcie litera ma być mikroskopijna więc skalę ustawiamy na 0
  2. W 80% czasu trwania animacji ma być większa niż normalnie = skala na 1.2
  3. Stan końcowy – ma być normalna czyli skala na 1.0

[code]
@keyframes pop-up {
0%{transform: scale(0) translateY(-10px); opacity: 0;}
80%{transform: scale(1.2) translateY(-2px); opacity: .8;}
100%{transform: scale(1) translateY(0px); opacity: 1;}
}
[/code]

Teraz aby nam nic nie mrugało, ustawiamy skalę .letter na 0 od samego początku i wywołujemy naszą animację.

[code]
.letter {
transform: scale(0);
animation: pop-up .25s forwards;
}
[/code]

Wartość forwards powoduje nam to, że animacja zatrzyma się na 100%(skala na 1), a nie wróci do bazowej postaci (skala na 0).
Mamy naszą animację, ale wszystkie litery rosną na raz, a chcielibyśmy aby się to odbywało po kolei.
Musimy więc pomiędzy poszczególnymi literami dodać opóźnienie. Można to zrobić ręcznie, pisząc dla każdej z 13 liter coraz większe opóźnienie. Tutaj z pomocą przychodzi nam Sass – możemy zrobić pętlę! Aby wszystko nam sprawnie zadziałało tworzymy sobie mixin – to taki sposób na wywoływanie kilku właściwości CSSa na podstawie zmiennej.

[code]

@mixin animation-delay($time) {
animation-delay: $time;
}

[/code]

Nasz mixin nazywa się animation-delay dokładnie tak jak właściwość CSSa. W momencie kiedy go wywołamy w nawiasie musimy mu wpisać wartość, ona zostanie wpisana do zmiennej $time i użyta wewnątrz mixina. W celu wywołania piszemy @include + nazwa mixina + (wartość). Tutaj chcemy aby ta wartość była zmienna – rosła dla każdej kolejnej literki.

[code]
.letter {
transform: scale(0);
animation: pop-up .25s forwards;
@for $i from 1 through 13 {
&:nth-child(#{$i}) {
@include animation-delay((0s + ($i * 0.05)));
}
}
}
[/code]

Stworzyliśmy więc pętlę! @for $i from 1 through 13. Chodzi o to, że w $i będzie trzymana wartość od 1 do 13 i będzie ona rosła za każdym razem. Czyli za pierwszym razem mamy 1, za drugim 2 itd.

Używamy tej wartości z $i do wybrania poszczególnej litery, w końcu nth-child(#1) to nasze I a #2 to serce, #3 to D itd.

Więc dla 1 literki I  wywołujemy naszą pierwszą animację ((0s + ($i * 0.05))) 0s oznacza początkowe opóźnienie, do niego dodajemy $i czyli na początku 1 i mnożymy razy opóźnienie między pojawieniem się liter 0.05. Wynikowo dostaniemy dla 1 dzecka opóźnienie 0.05, dla drugiego 0.1, dla trzeciego 0.15 itd aż do 13 bo tyle liter mamy. Można to napisać ręcznie, jednak po co :)

Dzięki tej pętli każda następna litera ma opóźnienie większe o zadeklarowane 0.05 i pojawiają nam się pokolei.

Poniżej ta pętla już po kompilacji:

 
[code]
h2 .letter:nth-child(1) {
animation-delay: 0.05s;
}
h2 .letter:nth-child(2) {
animation-delay: 0.1s;
}
h2 .letter:nth-child(3) {
animation-delay: 0.15s;
}
h2 .letter:nth-child(4) {
animation-delay: 0.2s;
}
h2 .letter:nth-child(5) {
animation-delay: 0.25s;
}
h2 .letter:nth-child(6) {
animation-delay: 0.3s;
}
h2 .letter:nth-child(7) {
animation-delay: 0.35s;
}
h2 .letter:nth-child(8) {
animation-delay: 0.4s;
}
h2 .letter:nth-child(9) {
animation-delay: 0.45s;
}
h2 .letter:nth-child(10) {
animation-delay: 0.5s;
}
h2 .letter:nth-child(11) {
animation-delay: 0.55s;
}
h2 .letter:nth-child(12) {
animation-delay: 0.6s;
}
h2 .letter:nth-child(13) {
animation-delay: 0.65s;
}
[/code]
sporo :)
Na koniec zmienimy sobie jeszcze wysokość linii naszego serca na 1.2em w klasie .heart aby było na wysokości reszty napisu.

Gotowe!

Nie było zbyt trudno? Jakieś pytania? Pisz śmiało w komentarzu lub na priv na FB/TT itd.
No i zapraszam do zapoznania się z wcześniejszymi odcinkami serii
 

TEMATY:
Najświeższe artykuły