DIY #9 Pojawiające się literki - animacja napisu w CSS (SCSS) | DailyWeb.pl

DIY #9 Pojawiające się literki - animacja napisu w CSS (SCSS)

Opublikowano 2 lata temu - 1


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:

$dwcolor: #3cbabe;

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 :)

 

<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>

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

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;
}

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
@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;}
}

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

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

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.


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

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.

.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)));
            }
	    }
	}

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:

 

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;
}

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