{"id":187095,"date":"2024-08-06T06:07:21","date_gmt":"2024-08-06T13:07:21","guid":{"rendered":"https:\/\/www.fooevents.com\/?p=187095"},"modified":"2024-08-07T00:42:05","modified_gmt":"2024-08-07T07:42:05","slug":"przejscia-widoku-css","status":"publish","type":"post","link":"https:\/\/www.fooevents.com\/pl\/css-view-transitions\/","title":{"rendered":"CSS View Transitions: Nowy i \u0142atwy spos\u00f3b na animowanie strony internetowej"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-large wp-image-187148\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-1024x667.png\" alt=\"Przej\u015bcia widoku CSS Projekt obrazu \u017car\u00f3wki\" width=\"1024\" height=\"667\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-1024x667.png 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-300x195.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-768x500.png 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-18x12.png 18w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-512x333.png 512w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1.png 1161w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p class=\"blog-intro\">W tym po\u015bcie zbadamy now\u0105 funkcj\u0119 animacji CSS, kt\u00f3ra jest obecnie wdra\u017cana, znan\u0105 jako CSS View Transitions. Przyjrzymy si\u0119, jak CSS View Transitions u\u0142atwiaj\u0105 dodawanie p\u0142ynnych, anga\u017cuj\u0105cych animacji do dowolnej witryny WordPress lub WooCommerce.<\/p>\n<p>W zesz\u0142ym tygodniu uczestniczyli\u015bmy w <a href=\"https:\/\/capetown.wordcamp.org\/2024\/\" rel=\"nofollow noopener\" target=\"_blank\">WordCamp Cape Town 2023<\/a> w Republice Po\u0142udniowej Afryki. Lokalna spo\u0142eczno\u015b\u0107 WordPress absolutnie zapewni\u0142a inspiruj\u0105cych prelegent\u00f3w, pyszne jedzenie i zapieraj\u0105ce dech w piersiach widoki! Uczestniczyli\u015bmy w fantastycznych prelekcjach lokalnych lider\u00f3w my\u015bli, obejmuj\u0105cych wszystko, o czym mo\u017cna us\u0142ysze\u0107 na WordCampie. Obejmowa\u0142y one wspania\u0142e historie o tym, jak ludzie budowali swoje firmy za pomoc\u0105 WordPress, jak WordPress zmieni\u0142 ich \u017cycie oraz liczne spostrze\u017cenia dotycz\u0105ce publikowania i handlu elektronicznego. Jedn\u0105 z wyr\u00f3\u017cniaj\u0105cych si\u0119 prezentacji by\u0142o wyst\u0105pienie na temat CSS View Transitions autorstwa <a href=\"https:\/\/www.schalkventer.me\/\" rel=\"nofollow noopener\" target=\"_blank\">Schalk Venter<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-187120 size-large\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1024x768.jpg\" alt=\"Zesp\u00f3\u0142 FooEvents uczestnicz\u0105cy w prelekcji CSS View Transitions na WordCamp Cape Town 2024\" width=\"1024\" height=\"768\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1024x768.jpg 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-300x225.jpg 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-768x576.jpg 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1536x1152.jpg 1536w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-2048x1536.jpg 2048w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-16x12.jpg 16w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-512x384.jpg 512w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Tytu\u0142 <a href=\"https:\/\/capetown.wordcamp.org\/2024\/session\/css-view-transitions-the-future-of-animation-on-the-web\/\" rel=\"nofollow noopener\" target=\"_blank\">Przysz\u0142o\u015b\u0107 animacji w sieci<\/a>, zawiera\u0142 nostalgiczny <a href=\"https:\/\/slides.com\/schalkventer\/css-view-animations\" rel=\"nofollow noopener\" target=\"_blank\">podsumowanie<\/a> o pocz\u0105tkach Internetu, jego ewolucji i obecnym stanie. Zastanawiaj\u0105c si\u0119 nad technologiami z przesz\u0142o\u015bci, takimi jak <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_Flash\" rel=\"nofollow noopener\" target=\"_blank\">Flash<\/a> i Lightspeed podkre\u015bli\u0142 nasze post\u0119py i znacz\u0105ce zmiany, jakie przesz\u0142a sie\u0107. Wyk\u0142ad podkre\u015bli\u0142 r\u00f3wnie\u017c prostot\u0119 i moc <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">Przej\u015bcia widoku CSS<\/a> co uwa\u017cam za bardzo ekscytuj\u0105ce i warte podzielenia si\u0119 z wami, poniewa\u017c mo\u017cna je \u0142atwo doda\u0107 do ka\u017cdego <a href=\"https:\/\/www.fooevents.com\/pl\/sprzedawac-bilety\/\">strona wydarzenia<\/a>.<\/p>\n<h3><strong>Czym s\u0105 przej\u015bcia widoku CSS?<\/strong><\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">CSS View Transitions to nowy interfejs API<\/a> wprowadzona w celu ulepszenia animacji internetowych, u\u0142atwiaj\u0105c tworzenie p\u0142ynnych przej\u015b\u0107 mi\u0119dzy r\u00f3\u017cnymi stanami strony internetowej. Funkcja ta pozwala programistom definiowa\u0107 przej\u015bcia mi\u0119dzy r\u00f3\u017cnymi widokami lub elementami na stronie bez konieczno\u015bci korzystania ze skomplikowanych skrypt\u00f3w JavaScript lub r\u0119cznego kodowania animacji.<\/p>\n<p>Poni\u017cszy film pokazuje, w jaki spos\u00f3b mo\u017cna dodawa\u0107 przej\u015bcia mi\u0119dzy stronami i elementami do standardowej witryny WordPress i WooCommerce. Podczas przechodzenia mi\u0119dzy stronami, nowa strona b\u0119dzie si\u0119 pojawia\u0107, podczas gdy stara strona b\u0119dzie zanika\u0107. Podczas filtrowania strony produkt\u00f3w, elementy o tej samej nazwie przej\u015bcia b\u0119d\u0105 animowane do nowej pozycji. Wszystko to zosta\u0142o osi\u0105gni\u0119te przy u\u017cyciu zaledwie kilku linii CSS!<\/p>\n<div style=\"width: 970px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-187095-1\" width=\"970\" height=\"720\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4?_=1\" \/><a href=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4\">https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4<\/a><\/video><\/div>\n<h3><strong>Kluczowe cechy przej\u015b\u0107 widoku CSS<\/strong><\/h3>\n<ul>\n<li><strong>Sk\u0142adnia deklaratywna:<\/strong> Definiowanie przej\u015b\u0107 bezpo\u015brednio w CSS bez konieczno\u015bci korzystania z JavaScript.<\/li>\n<li><strong>Obs\u0142uga r\u00f3\u017cnych przegl\u0105darek:<\/strong> Obs\u0142ugiwany przez wi\u0119kszo\u015b\u0107 nowoczesnych przegl\u0105darek, a wkr\u00f3tce tak\u017ce Firefox.<\/li>\n<li><strong>Optymalizacja wydajno\u015bci:<\/strong> Przej\u015bcia s\u0105 zoptymalizowane pod k\u0105tem wydajno\u015bci, zapewniaj\u0105c p\u0142ynniejsze wra\u017cenia u\u017cytkownika.<\/li>\n<\/ul>\n<h3><strong>Podstawowy przyk\u0142ad<\/strong><\/h3>\n<p>To, co sprawia, \u017ce CSS View Transitions jest tak ekscytuj\u0105ce, to \u0142atwo\u015b\u0107, z jak\u0105 mo\u017cna je zastosowa\u0107 na swojej stronie. Na przyk\u0142ad, proste dodanie nast\u0119puj\u0105cego kodu CSS do witryny sprawi, \u017ce przegl\u0105darka b\u0119dzie p\u0142ynnie zanika\u0107 mi\u0119dzy \u0142adowaniami stron, natychmiast tworz\u0105c p\u0142ynniejsze, bardziej podobne do aplikacji wra\u017cenia.<\/p>\n<pre>@view-transition { navigation: auto; }<\/pre>\n<h3><strong>Animowanie okre\u015blonych element\u00f3w<\/strong><\/h3>\n<p>Nast\u0119pnie mo\u017cna p\u00f3j\u015b\u0107 o krok dalej i <a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources?tab=readme-ov-file#hello-world-examplesbasic-intro\" rel=\"nofollow noopener\" target=\"_blank\">animowanie elementu mi\u0119dzy \u0142adowaniami strony<\/a> okre\u015blaj\u0105c nazw\u0119 elementu. Na przyk\u0142ad poni\u017cszy kod utworzy efekt przej\u015bcia dla miniatury postu o identyfikatorze #post-1234. Miniatura b\u0119dzie elegancko animowana ze strony listy post\u00f3w do strony widoku post\u00f3w, a wszystko to za pomoc\u0105 jednej linii kodu.<\/p>\n<pre>#post-1234 .wp-post-image { view-transition-name: item-1 }<\/pre>\n<h3><strong>Obs\u0142uga przegl\u0105darek i stan standard\u00f3w<\/strong><\/h3>\n<p>API jest nadal do\u015b\u0107 eksperymentalne i obecnie obs\u0142ugiwane przez najnowsze wersje Chrome, Edge, Opera i Android Browser. Safari ma <a href=\"https:\/\/github.com\/WebKit\/standards-positions\/issues\/48\" rel=\"nofollow noopener\" target=\"_blank\">wykaza\u0142 pozytywne zainteresowanie<\/a>i jest otwarty bilet na <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1823896\" rel=\"nofollow noopener\" target=\"_blank\">Przyj\u0119cie przegl\u0105darki Firefox<\/a>. Musimy poczeka\u0107 na oficjalne wsparcie tych dw\u00f3ch ostatnich przegl\u0105darek przed u\u017cyciem API w \u015brodowisku produkcyjnym.<\/p>\n<h3><strong>Praktyczne przypadki u\u017cycia dla WordPress i WooCommerce<\/strong><\/h3>\n<ol>\n<li><strong>Strony produktu:<\/strong> Popraw wra\u017cenia u\u017cytkownika, animuj\u0105c obrazy produkt\u00f3w mi\u0119dzy list\u0105 produkt\u00f3w a stronami szczeg\u00f3\u0142\u00f3w produktu.<\/li>\n<li><strong>Menu nawigacji:<\/strong> Tw\u00f3rz p\u0142ynne przej\u015bcia mi\u0119dzy r\u00f3\u017cnymi sekcjami witryny, dzi\u0119ki czemu nawigacja b\u0119dzie bardziej intuicyjna i wci\u0105gaj\u0105ca.<\/li>\n<li><strong>Aktualizacje tre\u015bci:<\/strong> Animuj zmiany w tre\u015bci, takie jak fragmenty post\u00f3w na blogu lub wyr\u00f3\u017cnione obrazy, aby zapewni\u0107 czytelnikom bardziej dynamiczne wra\u017cenia.<\/li>\n<\/ol>\n<h3><strong>Wnioski<\/strong><\/h3>\n<p>CSS View Transitions to \u015bwietne narz\u0119dzie, kt\u00f3re mo\u017cna doda\u0107 do swojego zestawu i podejrzewam, \u017ce w najbli\u017cszej przysz\u0142o\u015bci b\u0119dzie go znacznie wi\u0119cej. Oferuj\u0105 one prosty, ale pot\u0119\u017cny spos\u00f3b na zwi\u0119kszenie komfortu u\u017cytkowania poprzez p\u0142ynne, anga\u017cuj\u0105ce animacje. Niezale\u017cnie od tego, czy pracujesz nad osobistym blogiem, witryn\u0105 biznesow\u0105 czy platform\u0105 e-commerce, CSS View Transitions mo\u017ce pom\u00f3c ci stworzy\u0107 bardziej dopracowan\u0105 i interaktywn\u0105 stron\u0119 internetow\u0105.<\/p>\n<div class=\"highlight-box\">\n<h3><strong>Dodatkowe zasoby<\/strong><\/h3>\n<p>Je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej o CSS View Transitions, zapoznaj si\u0119 z poni\u017cszymi artyku\u0142ami, kt\u00f3re zawieraj\u0105 dalsze szczeg\u00f3\u0142y techniczne:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2023\/12\/view-transitions-api-ui-animations-part1\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.smashingmagazine.com\/2023\/12\/view-transitions-api-ui-animations-part1\/<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/github.com\/schalkventer\/css-view-transition-resources<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/v\/view-transition\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/css-tricks.com\/almanac\/selectors\/v\/view-transition\/<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::view-transition\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::view-transition<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=cGbKAqrul0w\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/watch?v=cGbKAqrul0w<\/a><\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this post, we explore a new CSS animation feature currently being rolled out, known as CSS View Transitions. We&#8217;ll take a look at how CSS View Transitions make it easy to add smooth, engaging animations to any WordPress or WooCommerce site. Last week, we attended WordCamp Cape Town 2023 in South Africa. The local [&hellip;]<\/p>\n","protected":false},"author":1138,"featured_media":187148,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[49,53],"tags":[],"class_list":["post-187095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-footips","category-howto"],"_links":{"self":[{"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/posts\/187095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/users\/1138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/comments?post=187095"}],"version-history":[{"count":0,"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/posts\/187095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/media\/187148"}],"wp:attachment":[{"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/media?parent=187095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/categories?post=187095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fooevents.com\/pl\/wp-json\/wp\/v2\/tags?post=187095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}