Polski Blog TemplateMonster

Przewodnik: Animacja Dla Typografii Z Pomocą jQuery i CSS3

Katarzyna Pawłowska

W dobę stalej zmiany trendów web design, aktualizacja strony www nie jest łatwym zadaniem. Ale ponieważ posiadanie stylowej i nowoczesnej strony jest bardzo ważne dla stalego sukcesu w branży, web projektanci zwykle aktualizują wiele elementów, takich jak logo, nawigacja, kolory strony itd, ale najbardziej zmienianą jest typografia.

Design ma wielkie znaczenie podczas tworzenia stron www, o tym wiedzą wszyscy. Aby strona była bardziej użyteczna i czytelna, projektanci podkreślają różne elementy projektowe, najczęściej typografię, ponieważ większość treści internetowych są tekstowe. Dlatego, aby ulepszyć wygląd strony, konieczne jest, aby pracować nad czcionkami aby były bardziej atrakcyjne i czytelne.

Ponadto, najnowsze technologie - CSS3 i jQuery pozwoliły projektantom zastosować efekty estetycznej typografii, bez szkody dla użyteczności projektu. Korzystając z tych technologii, można stworzyć skuteczny i atrakcyjny wizualnie projekt.

W tym poście będziemy mowili o  metodach wdrożenia jQuery i CSS3 podczas tworznia wyrafinowanych efektów animacji dla typografii.

Poczynając od HTML

Najpierw trzeba stworzyć podstawową strukturę znaczników HTML z elementem div, z tagami kotwicy aby zakończyć nagłówek. Aby to zrobić można użyć wdrożenie następujących linii kodu. Są to podstawowe znaczniki, które nie zawierają żadnych stylizac

Snippet kodu HTML:

1
2
3
4
5

<div id="letter-effects" class="letter-effects">
	<h3>
		<a href="#">Lovely Effects</a>
	</h3>
</div>

Jak dodać efekty animacji do typografii

Istnieją metody, za pomocą których można dodać różne efekty animacji do typografii. Są to CSS3 Kayframe Animacje i wtyczka jQuery. Obejrzyjmy na czym polegają te metody.

1. CSS3 Keyframe Animacja

CSS3 @Keyframe Animacja pozwala web projektantom skutecznie rozwiązać problem stworzenia animacji dla tekstu. Dzięki takiemu podejściu, można stworzyć klatki kluczowe, aby łatwo obsługiwać środkowe etapy sekwencji animacji. Metoda pomaga tworzyć gładkie efekty animacji. W przeciwieństwie do tradycyjnych technik, ta metoda nie ma skryptu efektu animacji. W związku z tym, można ją wykorzystać do przekształcenia typografii.

@Keyframe reguła

Dla realizacji tej metody, najpierw trzeba będzie utworzyć regułę @Keyframe i nadać jej imię. Korzystając z tej metody, można zdefiniować kod animacji i przekształcić CSS skwencję.

Poniżej jest skladnia @rule.

1
2
3

@keyframes effects{
/* zestawy reguł są tutaj … */
}

Selektory klatek kluczowych

Jeśli chcesz umieścić dodatkowe zasady w regulę @Keyframe, wspaniałym rozwiązaniem są selektory Keyframe.

Mogą być stosowane w taki sposób.

1
2
3
4

@keyframes effects{
0% { … }
50% { … }
}

Jak wspomniano powyżej, animacji są podzielone na różnye poziomy od 0% do 100%. Każdy poziom określa pewien stan animacji. Na przykład,

0% = animacja się zaczyna
33% - 63%  =pośredni stan animacji
100%  = konieć animacji

PS - Prosimy pamiętać, że, aby animacja była kompatybilna z popularnymi przeglądarkami, należy określić selektor 0% oraz selektor 100%.

Ponadto, aby łatwo kontrolować cały wygląd animacji, można zaimplementować właściwości animacji. Na przykład, jeśli chcesz dać pewną nazwę animacji, można użyć następujących linii kodu.

1
2
3

.letter-effects h3 a span {
animation-name: effects;
}

W tym kodzie, zmieniłam nazwę animacji za pomocą właściwości reguły @Keyframe - animation-name. Konieczne jest, aby upewnić się, że właściwość jest w synchronizacji z identyfikatorem, zawartym w regułie @Keyframe.

Również istnieje kilka innych właściwości animacji, opócz animation-name. Selektor klatki kluczowej - to jeszcze jedna właściwość, którą można wykorzystać do trwania animacji.

2. Wtyczka jQuery – Lettering.js

Lettering.js — to wtyczka jQuery, która pozwała na tworzenie efektów animacji dla tekstu. Z pomocą tej wtyczki, można lekko stworzyć stylowe litery i słowa. Ponieważ CSS oferuje wspaniałe funkcje stylizacji, nie może stylizować litery. Dlatego ten plugin jest bardzo przydatny dla web projektantów ze wzgłędu na jego funkcje obsługi czcionek internetowych.

Oto są przykłady dwóch opisanych powyżej metod do tworzenia tekstu animowanego.

HTML Część

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Przewodnik: Animacja Dla Typografii Z Pomocą jQuery i CSS3</title>
  </head>
<body>
 
<div id="letter-effects" class="letter-effects">
	<h3>
		<a href="#">Lovely Effects</a>
	</h3>
</div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lettering.js"></script>
</body>
</html>

CSS Część

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

.letter-effects {
	padding: 50px 0;
}
.letter-effects h3 {
	text-align: center;
	font-family: Arial;
	letter-spacing: 2px;
}
.letter-effects h3 a {
	font-size: 100px;
	line-height: 100px;
	display: block;
	text-decoration: none;
	color: transparent;
}
.letter-effects h3 a span {
	color: #1571c7;
   	opacity: 1;
	-webkit-transition: all 0.3s infinite;
	-moz-transition: all 0.3s infinite;
	transition: all 5s infinite;
	-webkit-animation: effects 4s infinite backwards;
	-moz-animation: effects 4s infinite backwards;
	animation: effects 4s infinite backwards;
}
.letter-effects h3 a span:nth-child(1) {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	animation-delay: 0s;
}
.letter-effects h3 a span:nth-child(2) {
	-webkit-animation-delay: 0.1s;
	-moz-animation-delay: 0.1s;
	animation-delay: 0.1s;
}
.letter-effects h3 a span:nth-child(3) {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.letter-effects h3 a span:nth-child(4) {
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	animation-delay: 0.3s;
}
.letter-effects h3 a span:nth-child(5) {
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.letter-effects h3 a span:nth-child(6) {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.letter-effects h3 a span:nth-child(7) {
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.letter-effects h3 a span:nth-child(8) {
	-webkit-animation-delay: 0.7s;
	-moz-animation-delay: 0.7s;
	animation-delay: 0.7s;
}
.letter-effects h3 a span:nth-child(9) {
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
.letter-effects h3 a span:nth-child(10) {
	-webkit-animation-delay: 0.9s;
	-moz-animation-delay: 0.9s;
	animation-delay: 0.9s;
}
.letter-effects h3 a span:nth-child(11) {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}
.letter-effects h3 a span:nth-child(12) {
	-webkit-animation-delay: 1.1s;
	-moz-animation-delay: 1.1s;
	animation-delay: 1.1s;
}
.letter-effects h3 a span:nth-child(13) {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.letter-effects h3 a span:nth-child(14) {
	-webkit-animation-delay: 1.3s;
	-moz-animation-delay: 1.3s;
	animation-delay: 1.3s;
}
@keyframes effects {
 0% { opacity: 0; text-shadow: 0px 0px 100px #000;}
 50% { opacity: 1; text-shadow: 0px 0px 2px #000; }
}
@-moz-keyframes effects {
 0% { opacity: 0; text-shadow: 0px 0px 100px #000 }
 50% { opacity: 1; text-shadow: 0px 0px 2px #000; }
}
@-webkit-keyframes effects {
 0% { opacity: 0; text-shadow: 0px 0px 100px #000;}
 50% { opacity: 1; text-shadow: 0px 0px 2px #000; }
}
}

JavaScript Część

1
2
3
4
5

<script type="text/javascript">
$(function() {
	$("#letter-effects a").lettering();
});
</script>

Wyniki:

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: A Worthy Guide To Create Ravishing Typography With jQuery And CSS3.

* * *

Mam nadzieję, że ten poradnik pomoże Ci stworzyć świetny tekst z efektem animacji i poprawić wygłąd swojej witryny. W tym wpisie są podane 2 rozwiązania do tworzenia animacji, więc możesz wybrać to, które Ci się najbardziej podoba.