Zaawansowane animacje CSS 😱 opowieści, skrypty #25

[@helloroman]

Te nazwy keyframes powinny nieco inaczej wyglądać z racji, że oba divy lecą z dołu :) Sorry ekipo. Ale pochwalcie się lepiej własnymi animacjami! Wrzucajcie w wątku linki z codepena 👇 ❤️

[@andi7442]

Dzisiaj zrobiłem animację ale w 3dsMaxie, która ilustruje statystykę: kzbin.info/www/bejne/gKWQipdqbpp4ecU

[@Patryk402070]

Ogarniam już frontEnd od 6 miesięcy i po nauczeniu się podstaw Twój kanał idealnie uzupełnia moje braki w nauce, teraz czekam tylko na więcej JS :D

[@ewaevva4375]

Dziękujemy ! Wyobraźnia poruszona i już tworzy różne inne takie tam te....

[@oleksku6761]

Jak zwykle świetny odcinek!

[@TheMrJ99]

Kolejny super film, dzięki! :D

[@kevinautret2356]

Super fajny odcinek biorę się do nauki i zapier*alam. Pozdrowionka Panie Romanie ;)

[@ComandeerPL]

Jeśli chodzi o DRY i powtarzanie kodu, to moja pierwsza myśl "ej, tu można zastosować zmienne!" - codepen.io/valhead/pen/xrVWdm IMO najbardziej eleganckie rozwiązanie, dzięki czemu mamy jedną animację i tylko zmieniamy wartość zmiennych dla konkretnych elementów.

[@helloroman]

Mega! Ja jakoś z lenistwa nigdy nie zacząłem używać zmiennych w czystym CSS, bo zawsze piszę albo w SCSS albo w Styled Components 🙈

[@LoganPL100]

Fajna rzecz, też chyba sobie kiedyś siądę i pobawię się jakimiś animacjami w css. Animacja którą stworzyłeś może być świetnym punktem wyjściowymi przy zredukowaniu kodu (może jakieś mixiny, zmienne) + JavaScript do tego to może się dziać prawdziwa magia. Te doty mógłby wychodzić ze środka każda w swoją stronę, a po kliknięciu może jakiś modal by się otwierał... ahhh tyle możliwości zabawy :D

[@KacperMarciniak_]

Mam z tym problem ,ale jeszcze trochę się pod uczę i myślę ,że dam radę.

[@piwniczak3384]

Hej, dopiero zaczynam programowanie, i chciałbym się zapytać czy można wstawić 2 animacje w jednej linijce lub animację i napis w jednej linijce ?

[@tomaszgasior772]

To jest już koniec. Nie ma już nic. Jesteśmy wolni. Możemy kliknąć „X”!

[@lexiu_]

❤️

[@kamil3389]

Co to za Font w edytorze masz? Wgl co to za styl bo ładnie się prezentuje

[@michumk00]

Font z tego co widzę to Fira Code z wyłączonymi ligaturami.

[@jeffijefferson5278]

Witam, ktoś może udzieli mi rady jak np ustawić czas, żeby od 30% do 80% animacja leciała szybciej, a od 80% do 100% leciała takim samym tempem jak od 0% do 30% ? wiem, że można to jakoś wyliczać, ale czy jest jakieś prostsze rozwiązanie ?

[@tonietwojekonto5219]

Witam czy poleca pan jakieś książki o programowaniu webowym ?

[@GrubelloGaming]

Wiem że filmik stary, ale mam pytanie. Jak się nazywa program, w którym piszesz podczas tego odcinka?

[@konradb2052]

A może animacje z SVG + maska?

[@Nixorek]

Animacja w CodePenie zawiesza mi się na 70% przy rotacji 45 deg, gdzie na stacjonarnym edytorze odpala się normalnie. Ktoś ma jakiś pomysł jak to naprawić?

[@Nixorek]

codepen.io/SkowyrnyKnur/pen/RzgmJB - gdzieś się zgubiłem, ale nie wiem gdzie. Wczoraj Napisałem przy pomocy filmiku, dziś chciałem sobie powtórzyć na przewie w pracy z pamięci, ale coś musiałem przekombinować.. ;P

[@MrZuk19956]

@@Nixorek Jak dodajesz animacje przy czasie opóźnienia napisałeś 0.5, zapomniałeś dodać 0.5s. Poprawiłem codepen.io/jedrek98/pen/dBzpMb

[@Nixorek]

@@MrZuk19956 Dziękuję bardzo! Taka błahostka, a siedziałem i gapiłem się na ten kod jak sroka w gnat i nie widziałem żadnego problemu. Zapamiętam na przyszłość :)

[@skowyrnyknur8659]

@@MrZuk19956 dzięki Twojej pomocy posiedziałem i dodałem chyba ciekawy efekt do animacji codepen.io/SkowyrnyKnur/pen/wLrXgm , cieszy bo jedne z pierwszych szlifów :D . Zastanawia mnie tylko czy można ustawić inny transition time i delay na hover, a inny do focus do tego samego selektora na ten moment tylko przy znajomości CSS i HMTL(JavaScript itp. dopiero przede mną :) )?

[@Szymon949]

Cz istnieje jakakolwiek "prawilna" metoda odpalania animacji w danej chwili ? Tj. po scrollu do danej sekcji, gdy jakiś div jest widoczny itp.

[@helloroman]

Szymon949 intersection observer API

[@ComandeerPL]

Wkrótce będzie można definiować `@keyframes` zależne od scrolla: wicg.github.io/scroll-animations/

[@Szymon949]

@@ComandeerPL Super ciekawostka, niby istnieją biblioteki jak AOS i działa to naprawdę fajnie, ale w połączeniu z np. fullpage.js już tak kolorowo nie jest

[@Ratchet813]

nw czy to czasem nie od ciebie się dowiedziałem, ale prostszym rozwiązaniem od browsersync byłoby użycie wtyczki "Live server" w VS Code :v Tak dla potomnych xd PS. Spoczko film xd

[@helloroman]

Live serwer nie ma takich fajnych ficzerow jak BS :p dlatego propsuje

[@Ratchet813]

@@helloroman ale still prostszy w obsłudze xD

[@helloroman]

dla mnie napisanie komendy w konsoli którą mam pod aliasem `bs` jest szybsze niż kliknięcie czegokolwiek :D więc to raczej kwestia względna co dla kogo jest proste

[@Ratchet813]

znaczy no wtyczkę odpalasz jednym przyciskiem z tego niebieskiego paska u dołu okna, ale still jest to kwestia preferencji xD fakt, czasami nie działa/nie wyświetla się ten przycisk, ale wystarczy zreloadować plugin i powinno pomóc xd

[@Toffic09]

Albo kombinacja Alt + O

[@masohas437]

o co chodzi z tym znakiem "~"?

[@helloroman]

Toć tłumaczyłem :D I to dość dokładnie

[@masohas437]

@@helloroman To znaczy ze muszę ten moment obejrzeć jeszcze raz xD

[@ElementalX7]

Świetn filmy ! Jest może jakiś patronite żeby wesprzeć dalszy rozwój kanału ? :)

[@helloroman]

Nie prowadzę patronite :) Ale wielkie dzięki za chęć wsparcia ❤️

[@ewaevva4375]

codepen.io/Eva2310/pen/NZwWdV Jeszcze chcę to dopracować żeby JS toglowała klasy zawierające animacje.

[@helloroman]

wow! :D I jestem częścią tego projektu ❤️ miło, bardzo fajna animacja krzyżyka tylko tam coś jest chyba nie tak z transform-origin bo lepiej by wyglądało jakby cała animacja działa się w centrum tego krzyżyka, a przy transformacji tak jakby przesuwa się lekko w prawo

[@ewaevva4375]

@@helloroman aaa możliwe bo ja początkująca jestem, jeszcze nie wszystko mam w głowie :)

[@cholewciax]

pierdyliardny!