{"id":898,"date":"2015-07-29T09:18:36","date_gmt":"2015-07-29T09:18:36","guid":{"rendered":"https:\/\/www.templatemonster.com\/pl\/blog\/?p=898"},"modified":"2020-03-27T09:19:33","modified_gmt":"2020-03-27T09:19:33","slug":"przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/","title":{"rendered":"Przewodnik: Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3"},"content":{"rendered":"

W dob\u0119 stalej zmiany trend\u00f3w web design, aktualizacja strony www nie jest \u0142atwym zadaniem. Ale poniewa\u017c posiadanie stylowej i nowoczesnej strony jest bardzo wa\u017cne dla stalego sukcesu w bran\u017cy, web projektanci zwykle aktualizuj\u0105 wiele element\u00f3w, takich jak logo, nawigacja, kolory strony itd, ale najbardziej zmienian\u0105 jest typografia<\/em>.<\/p>\n

Design ma wielkie znaczenie podczas tworzenia stron www, o tym wiedz\u0105 wszyscy. Aby strona by\u0142a bardziej u\u017cyteczna i czytelna, projektanci podkre\u015blaj\u0105 r\u00f3\u017cne elementy projektowe, najcz\u0119\u015bciej typografi\u0119, poniewa\u017c wi\u0119kszo\u015b\u0107 tre\u015bci internetowych s\u0105 tekstowe. Dlatego, aby ulepszy\u0107 wygl\u0105d strony, konieczne jest, aby pracowa\u0107 nad czcionkami aby by\u0142y bardziej atrakcyjne i czytelne.<\/p>\n

Ponadto, najnowsze technologie - CSS3 i jQuery pozwoli\u0142y projektantom zastosowa\u0107 efekty estetycznej typografii, bez szkody dla u\u017cyteczno\u015bci projektu. Korzystaj\u0105c z tych technologii, mo\u017cna stworzy\u0107 skuteczny i atrakcyjny wizualnie projekt.<\/p>\n

W tym po\u015bcie b\u0119dziemy mowili o \u00a0metodach wdro\u017cenia jQuery i CSS3 podczas tworznia\u00a0wyrafinowanych efekt\u00f3w animacji dla typografii.<\/p>\n

Poczynaj\u0105c od HTML<\/strong><\/p>\n

Najpierw trzeba stworzy\u0107 podstawow\u0105 struktur\u0119 znacznik\u00f3w HTML z elementem div, z tagami kotwicy aby zako\u0144czy\u0107 nag\u0142\u00f3wek. Aby to zrobi\u0107 mo\u017cna u\u017cy\u0107 wdro\u017cenie nast\u0119puj\u0105cych linii kodu. S\u0105 to podstawowe znaczniki, kt\u00f3re nie zawieraj\u0105 \u017cadnych stylizac<\/p>\n

Snippet kodu HTML:<\/strong><\/p>\n

\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n<\/pre>\n<\/td>\n
\n
<<\/span>div id=<\/span>\"letter-effects\"<\/span> class<\/span>=<\/span>\"letter-effects\"<\/span>><\/span>\r\n\t<<\/span>h3><\/span>\r\n\t\t<<\/span>a href=<\/span>\"#\"<\/span>><\/span>Lovely Effects<\/<\/span>a><\/span>\r\n\t<\/<\/span>h3><\/span>\r\n<\/<\/span>div><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Jak doda\u0107 efekty animacji do typografii<\/em><\/p>\n
Istniej\u0105 metody, za pomoc\u0105 kt\u00f3rych mo\u017cna doda\u0107 r\u00f3\u017cne efekty animacji do typografii. S\u0105 to CSS3 Kayframe Animacje i wtyczka jQuery. Obejrzyjmy na czym polegaj\u0105 te metody.<\/p>\n
1. CSS3 Keyframe Animacja<\/strong><\/p>\n
CSS3 @Keyframe Animacja pozwala web projektantom skutecznie rozwi\u0105za\u0107 problem stworzenia animacji dla tekstu. Dzi\u0119ki takiemu podej\u015bciu, mo\u017cna stworzy\u0107 klatki kluczowe, aby \u0142atwo obs\u0142ugiwa\u0107 \u015brodkowe etapy sekwencji animacji. Metoda pomaga tworzy\u0107 g\u0142adkie efekty animacji. W przeciwie\u0144stwie do tradycyjnych technik, ta metoda nie ma skryptu efektu animacji. W zwi\u0105zku z tym, mo\u017cna j\u0105 wykorzysta\u0107 do przekszta\u0142cenia typografii.<\/p>\n
@Keyframe\u00a0regu\u0142a<\/strong><\/p>\n
Dla realizacji tej metody, najpierw trzeba b\u0119dzie utworzy\u0107 regu\u0142\u0119 @Keyframe i nada\u0107 jej imi\u0119. Korzystaj\u0105c z tej metody, mo\u017cna zdefiniowa\u0107 kod animacji i przekszta\u0142ci\u0107 CSS skwencj\u0119.<\/p>\n
Poni\u017cej jest skladnia @rule.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n<\/pre>\n<\/td>\n
\n
@<\/span>keyframes effects{<\/span>\r\n\/* zestawy regu\u0142 s\u0105 tutaj \u2026 *\/<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Selektory klatek kluczowych<\/strong><\/p>\n
Je\u015bli chcesz umie\u015bci\u0107 dodatkowe zasady w regul\u0119 @Keyframe, wspania\u0142ym rozwi\u0105zaniem s\u0105 selektory Keyframe.<\/p>\n
Mog\u0105 by\u0107 stosowane w taki spos\u00f3b.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n<\/pre>\n<\/td>\n
\n
@<\/span>keyframes effects{<\/span>\r\n0<\/span>%<\/span> {<\/span> \u2026 }<\/span>\r\n50<\/span>%<\/span> {<\/span> \u2026 }<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Jak wspomniano powy\u017cej, animacji s\u0105 podzielone na r\u00f3\u017cnye poziomy od 0% do 100%. Ka\u017cdy poziom okre\u015bla pewien stan animacji. Na przyk\u0142ad,<\/p>\n
0%<\/b> = animacja si\u0119 zaczyna
\n33%<\/b> - 63%<\/b> \u00a0=po\u015bredni stan animacji
\n100%<\/b> \u00a0= konie\u0107 animacji<\/p>\n
PS - Prosimy pami\u0119ta\u0107, \u017ce, aby animacja by\u0142a kompatybilna z popularnymi przegl\u0105darkami, nale\u017cy okre\u015bli\u0107 selektor 0% oraz selektor 100%.<\/p>\n
Ponadto, aby \u0142atwo kontrolowa\u0107 ca\u0142y wygl\u0105d animacji, mo\u017cna zaimplementowa\u0107 w\u0142a\u015bciwo\u015bci animacji. Na przyk\u0142ad, je\u015bli chcesz da\u0107 pewn\u0105 nazw\u0119 animacji, mo\u017cna u\u017cy\u0107 nast\u0119puj\u0105cych linii kodu.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n<\/pre>\n<\/td>\n
\n
.<\/span>letter-<\/span>effects h3 a span {<\/span>\r\nanimation-<\/span>name:<\/span> effects;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
W tym kodzie, zmieni\u0142am nazw\u0119 animacji za pomoc\u0105 w\u0142a\u015bciwo\u015bci regu\u0142y @Keyframe - animation-name. Konieczne jest, aby upewni\u0107 si\u0119, \u017ce w\u0142a\u015bciwo\u015b\u0107 jest w synchronizacji z identyfikatorem, zawartym w regu\u0142ie @Keyframe.<\/p>\n
R\u00f3wnie\u017c istnieje kilka innych w\u0142a\u015bciwo\u015bci animacji, op\u00f3cz animation-name. Selektor klatki kluczowej - to jeszcze jedna w\u0142a\u015bciwo\u015b\u0107, kt\u00f3r\u0105 mo\u017cna wykorzysta\u0107 do trwania animacji.<\/p>\n
2. Wtyczka\u00a0jQuery \u2013 Lettering.js<\/strong><\/p>\n
Lettering.js \u2014 to wtyczka jQuery, kt\u00f3ra pozwa\u0142a na tworzenie efekt\u00f3w animacji dla tekstu. Z pomoc\u0105 tej wtyczki, mo\u017cna lekko stworzy\u0107 stylowe litery i s\u0142owa. Poniewa\u017c CSS oferuje wspania\u0142e funkcje stylizacji, nie mo\u017ce stylizowa\u0107 litery. Dlatego ten plugin jest bardzo przydatny dla web projektant\u00f3w ze wzg\u0142\u0119du na jego funkcje obs\u0142ugi czcionek internetowych.<\/p>\n
Oto s\u0105 przyk\u0142ady dw\u00f3ch opisanych powy\u017cej metod do tworzenia tekstu animowanego.<\/p>\n
HTML\u00a0Cz\u0119\u015b\u0107<\/strong><\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n<\/pre>\n<\/td>\n
\n
<!<\/span>DOCTYPE html><\/span>\r\n<<\/span>html><\/span>\r\n<<\/span>head><\/span>\r\n  <<\/span>meta charset=<\/span>\"UTF-8\"<\/span>><\/span>\r\n  <<\/span>title><\/span>Przewodnik: Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3<\/<\/span>title><\/span>\r\n  <\/<\/span>head><\/span>\r\n<<\/span>body><\/span>\r\n\u00a0\r\n<<\/span>div id=<\/span>\"letter-effects\"<\/span> class<\/span>=<\/span>\"letter-effects\"<\/span>><\/span>\r\n\t<<\/span>h3><\/span>\r\n\t\t<<\/span>a href=<\/span>\"#\"<\/span>><\/span>Lovely Effects<\/<\/span>a><\/span>\r\n\t<\/<\/span>h3><\/span>\r\n<\/<\/span>div><\/span>\r\n\u00a0\r\n<<\/span>script type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js\"<\/span>><\/span><\/script><\/span>\r\n<<\/span>script type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"js\/jquery.lettering.js\"<\/span>><\/span><\/script><\/span>\r\n<\/<\/span>body><\/span>\r\n<\/<\/span>html><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
CSS\u00a0Cz\u0119\u015b\u0107<\/strong><\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n58\r\n59\r\n60\r\n61\r\n62\r\n63\r\n64\r\n65\r\n66\r\n67\r\n68\r\n69\r\n70\r\n71\r\n72\r\n73\r\n74\r\n75\r\n76\r\n77\r\n78\r\n79\r\n80\r\n81\r\n82\r\n83\r\n84\r\n85\r\n86\r\n87\r\n88\r\n89\r\n90\r\n91\r\n92\r\n93\r\n94\r\n95\r\n96\r\n97\r\n98\r\n99\r\n100\r\n101\r\n102\r\n103\r\n104\r\n105\r\n106\r\n107\r\n108\r\n<\/pre>\n<\/td>\n
\n
.<\/span>letter-<\/span>effects {<\/span>\r\n\tpadding:<\/span> 50px 0<\/span>;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 {<\/span>\r\n\ttext-<\/span>align:<\/span> center;<\/span>\r\n\tfont-<\/span>family:<\/span> Arial;<\/span>\r\n\tletter-<\/span>spacing:<\/span> 2px;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a {<\/span>\r\n\tfont-<\/span>size:<\/span> 100px;<\/span>\r\n\tline-<\/span>height:<\/span> 100px;<\/span>\r\n\tdisplay:<\/span> block;<\/span>\r\n\ttext-<\/span>decoration:<\/span> none;<\/span>\r\n\tcolor:<\/span> transparent;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span {<\/span>\r\n\tcolor:<\/span> #1571c7;\r\n<\/span>   \topacity:<\/span> 1<\/span>;<\/span>\r\n\t-<\/span>webkit-<\/span>transition:<\/span> all 0.<\/span>3s infinite;<\/span>\r\n\t-<\/span>moz-<\/span>transition:<\/span> all 0.<\/span>3s infinite;<\/span>\r\n\ttransition:<\/span> all 5s infinite;<\/span>\r\n\t-<\/span>webkit-<\/span>animation:<\/span> effects 4s infinite backwards;<\/span>\r\n\t-<\/span>moz-<\/span>animation:<\/span> effects 4s infinite backwards;<\/span>\r\n\tanimation:<\/span> effects 4s infinite backwards;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>1<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>2<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>1s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>1s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0.<\/span>1s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>3<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>2s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>2s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0.<\/span>2s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>4<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>3s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>3s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0.<\/span>3s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>5<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>4s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>4s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0.<\/span>4s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>6<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>5s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>5s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0.<\/span>5s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>7<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>6s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>6s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0.<\/span>6s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>8<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>7s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>7s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0.<\/span>7s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>9<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>8s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>8s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0.<\/span>8s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>10<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>9s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 0.<\/span>9s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 0.<\/span>9s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>11<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 1s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 1s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 1s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>12<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 1.<\/span>1s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 1.<\/span>1s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 1.<\/span>1s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>13<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 1.<\/span>2s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 1.<\/span>2s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 1.<\/span>2s;<\/span>\r\n}<\/span>\r\n.<\/span>letter-<\/span>effects h3 a span:<\/span>nth-<\/span>child(<\/span>14<\/span>)<\/span> {<\/span>\r\n\t-<\/span>webkit-<\/span>animation-<\/span>delay:<\/span> 1.<\/span>3s;<\/span>\r\n\t-<\/span>moz-<\/span>animation-<\/span>delay:<\/span> 1.<\/span>3s;<\/span>\r\n\tanimation-<\/span>delay:<\/span> 1.<\/span>3s;<\/span>\r\n}<\/span>\r\n@<\/span>keyframes effects {<\/span>\r\n 0<\/span>%<\/span> {<\/span> opacity:<\/span> 0<\/span>;<\/span> text-<\/span>shadow:<\/span> 0px 0px 100px #000;}\r\n<\/span> 50<\/span>%<\/span> {<\/span> opacity:<\/span> 1<\/span>;<\/span> text-<\/span>shadow:<\/span> 0px 0px 2px #000; }\r\n<\/span>}<\/span>\r\n@-<\/span>moz-<\/span>keyframes effects {<\/span>\r\n 0<\/span>%<\/span> {<\/span> opacity:<\/span> 0<\/span>;<\/span> text-<\/span>shadow:<\/span> 0px 0px 100px #000 }\r\n<\/span> 50<\/span>%<\/span> {<\/span> opacity:<\/span> 1<\/span>;<\/span> text-<\/span>shadow:<\/span> 0px 0px 2px #000; }\r\n<\/span>}<\/span>\r\n@-<\/span>webkit-<\/span>keyframes effects {<\/span>\r\n 0<\/span>%<\/span> {<\/span> opacity:<\/span> 0<\/span>;<\/span> text-<\/span>shadow:<\/span> 0px 0px 100px #000;}\r\n<\/span> 50<\/span>%<\/span> {<\/span> opacity:<\/span> 1<\/span>;<\/span> text-<\/span>shadow:<\/span> 0px 0px 2px #000; }\r\n<\/span>}<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
JavaScript\u00a0Cz\u0119\u015b\u0107<\/strong><\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n<\/pre>\n<\/td>\n
\n
<<\/span>script type=<\/span>\"text\/javascript\"<\/span>><\/span>\r\n$(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\r\n\t$(<\/span>\"#letter-effects a\"<\/span>)<\/span>.<\/span>lettering(<\/span>)<\/span>;<\/span>\r\n}<\/span>)<\/span>;<\/span>\r\n<\/script><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Wyniki:<\/strong><\/p>\n
\"1\"<\/p>\n
* * *<\/p>\n
Ten artyku\u0142 zosta\u0142 przet\u0142umaczony z angielskiego. Orygina\u0142 mo\u017cna znale\u017a\u0107 tutaj: A Worthy Guide To Create Ravishing Typography With jQuery And CSS3<\/a>.<\/em><\/p>\n
* * *<\/p>\n
Mam nadziej\u0119, \u017ce ten poradnik pomo\u017ce Ci stworzy\u0107 \u015bwietny tekst z efektem animacji i poprawi\u0107 wyg\u0142\u0105d swojej witryny. W tym wpisie s\u0105 podane 2 rozwi\u0105zania do tworzenia animacji, wi\u0119c mo\u017cesz wybra\u0107 to, kt\u00f3re Ci si\u0119 najbardziej podoba.<\/p>\n","protected":false},"excerpt":{"rendered":"
W dob\u0119 stalej zmiany trend\u00f3w web design, aktualizacja strony www nie jest \u0142atwym zadaniem. Ale poniewa\u017c posiadanie stylowej i nowoczesnej strony jest bardzo wa\u017cne dla stalego sukcesu w bran\u017cy, web projektanci zwykle aktualizuj\u0105 wiele element\u00f3w, takich jak logo, nawigacja, kolory strony itd, ale najbardziej zmienian\u0105 jest typografia. Design ma wielkie znaczenie podczas tworzenia stron www, […]<\/p>\n","protected":false},"author":2098093,"featured_media":899,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[229,23,136],"tags":[66,183],"yoast_head":"\nAnimacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3<\/title>\n<meta name=\"description\" content=\"Animacja dla tre\u015bci tekstowej. W tym po\u015bcie b\u0119dziemy mowili o metodach wdro\u017cenia jQuery i CSS3.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3\" \/>\n<meta property=\"og:description\" content=\"Animacja dla tre\u015bci tekstowej. W tym po\u015bcie b\u0119dziemy mowili o metodach wdro\u017cenia jQuery i CSS3.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Polski Blog TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-29T09:18:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-27T09:19:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2015\/07\/AWESOME-TYPOGRAPHY-900x538.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Katarzyna Paw\u0142owska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Katarzyna Paw\u0142owska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/\"},\"author\":{\"name\":\"Katarzyna Paw\u0142owska\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\"},\"headline\":\"Przewodnik: Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3\",\"datePublished\":\"2015-07-29T09:18:36+00:00\",\"dateModified\":\"2020-03-27T09:19:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/\"},\"wordCount\":703,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"keywords\":[\"Dostosowywanie\",\"Tutorial\"],\"articleSection\":[\"HTML i CSS\",\"Tutoriale\",\"Tworzenie stron internetowych\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/\",\"name\":\"Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\"},\"datePublished\":\"2015-07-29T09:18:36+00:00\",\"dateModified\":\"2020-03-27T09:19:33+00:00\",\"description\":\"Animacja dla tre\u015bci tekstowej. W tym po\u015bcie b\u0119dziemy mowili o metodach wdro\u017cenia jQuery i CSS3.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Przewodnik: Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"name\":\"Polski Blog TemplateMonster\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/pl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\",\"name\":\"MonsterPost Polska\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Polska\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/templatemonster_pl\/\",\"https:\/\/www.pinterest.com\/TM_Polska\/\",\"https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ\",\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\",\"https:\/\/twitter.com\/TM_Polska\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\",\"name\":\"Katarzyna Paw\u0142owska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Katarzyna Paw\u0142owska\"},\"description\":\"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.\",\"url\":\"https:\/\/monsterspost.com\/pl\/author\/katrina\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3","description":"Animacja dla tre\u015bci tekstowej. W tym po\u015bcie b\u0119dziemy mowili o metodach wdro\u017cenia jQuery i CSS3.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/","og_locale":"pl_PL","og_type":"article","og_title":"Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3","og_description":"Animacja dla tre\u015bci tekstowej. W tym po\u015bcie b\u0119dziemy mowili o metodach wdro\u017cenia jQuery i CSS3.","og_url":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/","og_site_name":"Polski Blog TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster.Poland\/","article_published_time":"2015-07-29T09:18:36+00:00","article_modified_time":"2020-03-27T09:19:33+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2015\/07\/AWESOME-TYPOGRAPHY-900x538.png","type":"image\/png"}],"author":"Katarzyna Paw\u0142owska","twitter_card":"summary_large_image","twitter_creator":"@TM_Polska","twitter_site":"@TM_Polska","twitter_misc":{"Napisane przez":"Katarzyna Paw\u0142owska","Szacowany czas czytania":"5 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/"},"author":{"name":"Katarzyna Paw\u0142owska","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8"},"headline":"Przewodnik: Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3","datePublished":"2015-07-29T09:18:36+00:00","dateModified":"2020-03-27T09:19:33+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/"},"wordCount":703,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"keywords":["Dostosowywanie","Tutorial"],"articleSection":["HTML i CSS","Tutoriale","Tworzenie stron internetowych"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/","url":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/","name":"Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/#website"},"datePublished":"2015-07-29T09:18:36+00:00","dateModified":"2020-03-27T09:19:33+00:00","description":"Animacja dla tre\u015bci tekstowej. W tym po\u015bcie b\u0119dziemy mowili o metodach wdro\u017cenia jQuery i CSS3.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/pl\/przewodnik-animacja-dla-typografii-z-pomoca-jquery-i-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Przewodnik: Animacja Dla Typografii Z Pomoc\u0105 jQuery i CSS3"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/pl\/#website","url":"https:\/\/monsterspost.com\/pl\/","name":"Polski Blog TemplateMonster","description":"","publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/pl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/pl\/#organization","name":"MonsterPost Polska","url":"https:\/\/monsterspost.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Polska"},"image":{"@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/templatemonster_pl\/","https:\/\/www.pinterest.com\/TM_Polska\/","https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ","https:\/\/www.facebook.com\/TemplateMonster.Poland\/","https:\/\/twitter.com\/TM_Polska"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8","name":"Katarzyna Paw\u0142owska","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Katarzyna Paw\u0142owska"},"description":"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.","url":"https:\/\/monsterspost.com\/pl\/author\/katrina\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/898"}],"collection":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/users\/2098093"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/comments?post=898"}],"version-history":[{"count":2,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/898\/revisions"}],"predecessor-version":[{"id":901,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/898\/revisions\/901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media\/899"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media?parent=898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/categories?post=898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/tags?post=898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}