A propo kolejnosci wlasciwosci animation: warto zwrocic uwage że w przypadku animation-duration i animation-deley kolejnosc ma znaczenie tj. No. 2s 5s - pierszy parametr bedzie odczytywany jako duration. Swietny odcinek, pozdrawiam :)
Zrób taki bardziej skomplikowany tutorial o jakichś dziwnych animacjach, które, na przykład, nakładają się na siebie, gdzie dyrygujemy nimi, że mamy jakieś tam dileje i tak dalej! Co do samego odcinka: super wytłumaczone, dzięki! Czekam na więcej!
Ja już co prawda podstawy mam za sobą, ale i tak doceniam i lajkuję materiał. Ja z niego korzystam jako przypomnienia, bo jest przydatny. Sugerowałbym zrobić podzielenie odcinka na fragmenty, aby łatwiej się szukało to, czego potrzeba.
Trzy dni rozmyślałam nad tym, jak sprawić żeby kolejne div z animation-delay:3s; wskakiwały od razu po załadowaniu strony. Eureka dzięki Tobie osiągnęłam sukces. Dziękuje.
Cudny z Ciebie nauczyciel, wszystko tak bardzo zrozumiałe. Dziękuję. Tak, prosimy o lekcję o "skomplikowańszych" animacjach, to baaardzo ciekawe i wciągające
Pytanie pewnie bardziej na jakieś stack-overflow, ale nie zaszkodzi spróbować :) Napisałem na stronie dwie animacje - jedna to pojawianie się elementu, takie jak w tutorialu, druga to pulsujące podświetlenie elementu za pomocą box-shadow (tak, wiem że to nie wygląda dobrze, ale poeksperymentować chciałem :)) z określonymi właściwościami animation-direction: alternate; animation-iteration-count: infinite;. Założenie było takie, że 3 elementy pojawiają się po kolei w odstępie 3 sekund, a po najechaniu na któryś z nich kursorem pojawia się owo pulsujące podświetlenie. Wszystko działa, tyle że po zjechaniu kursorem z podświetlonego elementu znika nie tylko podświetlenie, ale również sam element. Mam nadzieję, że wytłumaczyłem to w sposób względnie zrozumiały :) Masz/macie jakiś pomysł czemu tak się dzieje albo patent jak tego uniknąć?
Zawsze wydawało mi się, że animacje w css to czarna magia i nawet nie chciało mi się tego uczyć. Jak dobrze, że trafiłam na twój kanał. Dzięki wielkie za to video!
pytanie. w 18:15 jest animation-direction:alternate i pozniej zeby to dzialalo jak trzeba to dodajesz animation-interation-count:infinite. A czy efekt nie bedzie ten sam jak zostanie tylko ta druga linijka z infinite , ale juz bez alternate?
Roman wszystko fajnie ale dlaczego mam nie animować top,left itp. Jeśli chcę by element mi się pojawił od 0 do 100% width na stronie to mam tylko translate X używać? Nie widzę powodu
Dzień dobry Romanie :) Na wstępie podziękuję Ci za ten materiał a teraz przejdę do mojego zapytania. Jak zrobić, by kwadrat przechodząc z lewej krawędzi do prawej zamieniał się w kółko lub trójkąt i żeby następowało to w miarę płynnie? Albo taki scenariusz. Zaczynamy od kwadratu, przechodzimy do trójkąta i wracając do lewej krawędzi trójkąt przeistacza sie w kółko. Dziękuję Ci, że dzielisz się z nami swoją wiedzą. Pozdrawiam gorąco!
Z kwadratu w kółko bez problemu za pomocą border-radius, ale trójkąta bez używania SVG nie ogarniesz (w sensie sam trójkąt w CSS jak najbardziej, chodzi mi o przejście kwadrat-koło-trójkąt w animacji)
W kwestii fps czesto musze isc na kompromis. Material filmowy z poczatku i konca wygladalby totalnie zle w 60fps dlatego domyslnie zawsze uzywam 24. Z drugiej strony te 24 klatki aż tak tragicznie nie haczą. Niestety nie da sie stworzyc klipu ktory mialby dwie rozne predkosci na przemian.
@@helloroman Jak to się nie da? :D Jeśli montujesz w premiere pro to wystarczy, że nagrasz materiał filmowy w 24/25/30 klatkach, a materiał z kompa w 60 i wrzucisz wszystko na jedną sekwencję, w której będzie ustawione 60 klatek i wyrenderujesz. Materiał z kompa będzie się wyświetlał normalnie w 60 fps, a materiał z kamery będzie po prostu jako 24 klatkowe wideo na 60 klatkowym klipie. Framerate nie definiuje przecież prędkości filmu, tylko ilość klatek podczas jednej sekundy więc 24 fps będzie dalej wyświetlane jako 24 fps na 60 klatkowym klipie.
Te cyferki w krzywych beziera, to żadna magia dla koksów :) Oznaczają ona kolejno: X pierwszego wąsa, Y pierwszego wąsa, X drugiego wąsa, Y drugiego wąsa. Współrzędne początku to zawsze 0,0, a końca zawsze 1,1. X musi się zawierać od 0 do 1. Jeśli ktoś pracował w jakimkolwiek programie graficznym to bez żadnej trudności wyobrazi sobie o co kaman. Zakładam, że programiści muszą mieć wyobraźnię jako-tako rozwiniętą ;) . Warto spróbować zrobić kilka krzywych cyferkami i okazuje się, że to jest dużo szybsze.
W jaki sposób napisać, aby animacja startowała dopiero w momencie kiedy przeskroluję na nią? Tzn. mam One Page Website i animację umieściłam na dole (nie jest widoczna na stronie głównej). Teraz jest tak, że jak odświeżę stronę to animacja startuje, chociaż jeszcze nie zjechałam scrollem na nią. A chciałabym, aby startowała w momencie kiedy jest wyświetlana. Mam nadzieję, że w miarę zrozumiale to napisałam. Z góry dzięki za pomoc:)
Mógłbyś zrobić poradnik na przykład o 'html pug' ? Mam tu na myśli poradnik o tym, że robisz sobie osobne sekcje w osobnych plikach i w finale łączą się w jeden plik wyjściowy. Jeśli istnieje na to inny sposób (preprocesor) to byłoby nawet lepiej :)
pug to silnik html. Według mojej aktualnej wiedzy kilka oddzielnych plików w jeden łączysz za pomocą właśnie narzędzi do automatyzacji typu gulp/webpack ewentualnie skrypt w bashu.
pug to silnik szablonów taki jak twig dla backendu i polegają na tym samym. Szablon strony rozbijasz na mniejsze szablony które dołączasz do szablonu nadrzędnego. szablon podrzędny to "block" który jest podstawiany w szablonie nadrzędnym w blocku o tej samej nazwie. W pugu wszystko oczywiście musi być przerobione na jeden plik (mogę się mylić), bo w js nie ma systemu plików, chyba że używasz go w node na serwerze. W twigu phpowym nie ma z tym problemu. Jedyne co musisz znać to składnie silnika i jakieś ciekawe wbudowane zmienne lub funkcje ułatwiające wyświetlanie treści
Dlaczego "min-height: 100vh" przesuwa klocek na środek ekranu? 100vh to nie przypadkiem 100% przesunięcia względem ekranu i nie powinien się znaleźć na samym dole?
Klocek tu nie ma nic do rzeczy, ponieważ sam w sobie nie posiada żadnej właściwości pozycjonującej. Pozycjonuje go rodzic wykorzystując display: flex z ustawionym „center” na align-items (centruj w osi X) i justify-content (centruj w osi Y). Dopóki rodzic (body) nie miał właściwości określającej wysokość, jego wysokość była równa wysokości największego dziecka (w tym przypadku jedynego dziecka jakim jest box). Dopiero kiedy określisz minimalną wysokość body jako 100vh (czyli wysokość twojego viewportu), środkiem body staje się równocześnie środek viewportu.
Roman zamierzasz w najbliższym czasie zrobić jakiś kurs o podstawach html, CSS, js lub mógłbyś polecić jakiś, w którym materiały będą aktualne, a nie przestarzałe, jak w większości?
Myślę, że będą się pojawiać tego typu odcinki o jakichś ciekawych zagadnieniach dotyczących CSS, ale raczej nie planuję takiego jednolitego kursu od A do Z.
@@tomekskrill3959 no to jest raczej takie, że fajnie jak ktoś wie czym to jest. Ale nie kojarze żeby ktoś u nas z tego korzystał w tej chwili. Raczej CSS modules / styled-components
@@tomekskrill3959 A tak odpowiadając szerzej na Twoje pytanie - CSS zawsze będzie podstawą stylowania naszych aplikacji i stron. Masz niby twory w postaci CSS in JS, ale w gruncie rzeczy ich zapis nadal jest po prostu CSS-em jak np. w styled components. Dobra znajomość CSS'a moim zdaniem jest super istotna dla frontendowca
To czy ten serwis jest dobry czy nie to nie jest kwestia opinii tylko faktów - znajduje się tam tona błędów. Jeśli chcesz wiedzieć jakich konkretnie to odsyłam do bloga Tomka Jakuta, który się solidnie rozprawił z tym serwisem.
![CSS po przejściach [CSS transition] 😱 opowieści, skrypty #24](http://i.ytimg.com/vi/ttQDNroq3LA/mqdefault.jpg)
![CSS po przejściach [CSS transition] 😱 opowieści, skrypty #24](/img/tr.png)
![Animacje w GSAP [GreenSock, TweenMax, TimelineMax] 😱Opowieści, skrypty #26](http://i.ytimg.com/vi/YmxVN24tbeQ/mqdefault.jpg)
A propo kolejnosci wlasciwosci animation: warto zwrocic uwage że w przypadku animation-duration i animation-deley kolejnosc ma znaczenie tj. No. 2s 5s - pierszy parametr bedzie odczytywany jako duration.
Swietny odcinek, pozdrawiam :)
Aaa! Masz racje, totalnie o tym zapomniałem :) Wielkie dzięki i przypinam komcia ❤️
Właśnie o tym samym pomyślałem haha
@@jakubparlej2216 i nie tylko ty
Zrób taki bardziej skomplikowany tutorial o jakichś dziwnych animacjach, które, na przykład, nakładają się na siebie, gdzie dyrygujemy nimi, że mamy jakieś tam dileje i tak dalej!
Co do samego odcinka: super wytłumaczone, dzięki! Czekam na więcej!
>"Nigdy nie używajcie height i width w animacjach. NIGDY."
>width i height na miniaturce
A poza tym to kolejny świetny film!
Haskell hahahh 😂😂😂 ale czad, nie zauwazylem tego (to nie moj kod :p)
Xd
Świetny materiał teraz zabieram się za robienie jakiejś prostej animacji dzięki (:
Świetny odcinek :D. Super by było zobaczyć więcej materiałów dotyczących animacji w css na Twoim kanale!
Ja już co prawda podstawy mam za sobą, ale i tak doceniam i lajkuję materiał. Ja z niego korzystam jako przypomnienia, bo jest przydatny. Sugerowałbym zrobić podzielenie odcinka na fragmenty, aby łatwiej się szukało to, czego potrzeba.
Materiał dobry również do odświeżenia i usystematyzowania posiadanej wiedzy.
Trzy dni rozmyślałam nad tym, jak sprawić żeby kolejne div z animation-delay:3s; wskakiwały od razu po załadowaniu strony. Eureka dzięki Tobie osiągnęłam sukces. Dziękuje.
Cudny z Ciebie nauczyciel, wszystko tak bardzo zrozumiałe. Dziękuję. Tak, prosimy o lekcję o "skomplikowańszych" animacjach, to baaardzo ciekawe i wciągające
Eva Eva ale miło ❤️😂 dzięki wielkie
@@helloroman nie Romanie, to ja dziękuję Tobie że poświęcasz swój czas dla nas :)
To ja bym poprosił o ten bardziej zaawansowany tutorial :)
I jakiś fajny projekt animacyjny
Sztos! Please...więcej takich kursów bo tłumaczysz baaaardzo dobrze! :D Suba daję z przyjemnością!
Pytanie pewnie bardziej na jakieś stack-overflow, ale nie zaszkodzi spróbować :) Napisałem na stronie dwie animacje - jedna to pojawianie się elementu, takie jak w tutorialu, druga to pulsujące podświetlenie elementu za pomocą box-shadow (tak, wiem że to nie wygląda dobrze, ale poeksperymentować chciałem :)) z określonymi właściwościami animation-direction: alternate;
animation-iteration-count: infinite;. Założenie było takie, że 3 elementy pojawiają się po kolei w odstępie 3 sekund, a po najechaniu na któryś z nich kursorem pojawia się owo pulsujące podświetlenie. Wszystko działa, tyle że po zjechaniu kursorem z podświetlonego elementu znika nie tylko podświetlenie, ale również sam element. Mam nadzieję, że wytłumaczyłem to w sposób względnie zrozumiały :) Masz/macie jakiś pomysł czemu tak się dzieje albo patent jak tego uniknąć?
rewelacja uwielbiam czerpać wiedzę z twoich odcinków
sylwek, a ja oglądam o animacjach css ;-) szczęśliwego nowego
Dzięki za odcinek ! Prawdopodobnie przyda mi się do licencjatu ;)
Prosiłbym o zaawansowany poradnik. Dobra robota. Wszystko ładnie wytłumaczone! Pozdrawiam!
super film , bardzo dobrze wytlumaczone :)
Łapka do góry w ciemno i oglądamy :)
Ech co ja bym zrobiła bez tego kanału :D
Zawsze wydawało mi się, że animacje w css to czarna magia i nawet nie chciało mi się tego uczyć. Jak dobrze, że trafiłam na twój kanał. Dzięki wielkie za to video!
Teela ale super ❤️❤️❤️ czyli udało mi się wytłumaczyć? 😀
@@helloroman Tak w dodatku tutaj tłumaczenie było najlepsz jakie znalazłem
Zastosuje to na mojej pierwszej stronce , dzieki :D
pytanie. w 18:15 jest animation-direction:alternate i pozniej zeby to dzialalo jak trzeba to dodajesz animation-interation-count:infinite. A czy efekt nie bedzie ten sam jak zostanie tylko ta druga linijka z infinite , ale juz bez alternate?
Dziękuję i pozdrawiam
Świetne, dzięki! ;)
Hej Roman. Szacunek po paz kolejny. Btw, skoro już zgarniasz nagrody to może odcinek o tym co sprawia że strona jest dobra w kontekscie UX ?
Miał pytanie, czy dałbys rade zrobic do gry fivem zrobic animacje zakowania agresywna jakas?
Może zrobiłbyś odcinek o Svelte? Czy Twoim zdaniem warto brać to pod uwagę już do produkcji (freelance, bo w korpo wiadomo inne zasady)?
Słyszałem o nim mnóstwo dobrego, ale jeszcze nie próbowałem go używać
roman co lepsze czytanie ksiazek o programowaniu czy bootcamp szkolenie 3 miesieczne zaznacze ze chce zmienic branze
Wincyj 👍
Do śniadanka :D
pięknie wybrnąłeś z tym opacity w 11 minucie :D
Roman wszystko fajnie ale dlaczego mam nie animować top,left itp. Jeśli chcę by element mi się pojawił od 0 do 100% width na stronie to mam tylko translate X używać? Nie widzę powodu
Jak chcesz miec wolno dzialajaca strone to smialo 👍 tlumaczylem w tym albo kolejnym odcinku dlaczego nie warto
wideo sie zaczyna na 5:06
Dzień dobry Romanie :) Na wstępie podziękuję Ci za ten materiał a teraz przejdę do mojego zapytania. Jak zrobić, by kwadrat przechodząc z lewej krawędzi do prawej zamieniał się w kółko lub trójkąt i żeby następowało to w miarę płynnie? Albo taki scenariusz. Zaczynamy od kwadratu, przechodzimy do trójkąta i wracając do lewej krawędzi trójkąt przeistacza sie w kółko. Dziękuję Ci, że dzielisz się z nami swoją wiedzą. Pozdrawiam gorąco!
Z kwadratu w kółko bez problemu za pomocą border-radius, ale trójkąta bez używania SVG nie ogarniesz (w sensie sam trójkąt w CSS jak najbardziej, chodzi mi o przejście kwadrat-koło-trójkąt w animacji)
Odcinek o animacjach mogłeś jednak wyrenderować w 60 fps. W 24 fps ciężej zauważyć różnicę w animation-timing-function, bo bardziej klatkuje.
W kwestii fps czesto musze isc na kompromis. Material filmowy z poczatku i konca wygladalby totalnie zle w 60fps dlatego domyslnie zawsze uzywam 24. Z drugiej strony te 24 klatki aż tak tragicznie nie haczą. Niestety nie da sie stworzyc klipu ktory mialby dwie rozne predkosci na przemian.
@@helloroman Jak to się nie da? :D Jeśli montujesz w premiere pro to wystarczy, że nagrasz materiał filmowy w 24/25/30 klatkach, a materiał z kompa w 60 i wrzucisz wszystko na jedną sekwencję, w której będzie ustawione 60 klatek i wyrenderujesz. Materiał z kompa będzie się wyświetlał normalnie w 60 fps, a materiał z kamery będzie po prostu jako 24 klatkowe wideo na 60 klatkowym klipie. Framerate nie definiuje przecież prędkości filmu, tylko ilość klatek podczas jednej sekundy więc 24 fps będzie dalej wyświetlane jako 24 fps na 60 klatkowym klipie.
Motuje w resolve, ale nie wiedzialem o tym co piszesz. Myslalem ze przy eksporcie ujednolicasz framerate dla wszystkich klipów. Dzieki ❤️ obczaje to
Te cyferki w krzywych beziera, to żadna magia dla koksów :)
Oznaczają ona kolejno: X pierwszego wąsa, Y pierwszego wąsa, X drugiego wąsa, Y drugiego wąsa. Współrzędne początku to zawsze 0,0, a końca zawsze 1,1. X musi się zawierać od 0 do 1. Jeśli ktoś pracował w jakimkolwiek programie graficznym to bez żadnej trudności wyobrazi sobie o co kaman. Zakładam, że programiści muszą mieć wyobraźnię jako-tako rozwiniętą ;) . Warto spróbować zrobić kilka krzywych cyferkami i okazuje się, że to jest dużo szybsze.
Przecież dokładnie tak to wytłumaczyłem 😂 co nie zmienia faktu, że napisanie krzywej z głowy nie jest najprostszym zadaniem
To chyba mi umknęło to tłumaczenie :) To jest tak jak się po nocach człowiek dokształca ;)
W jaki sposób napisać, aby animacja startowała dopiero w momencie kiedy przeskroluję na nią? Tzn. mam One Page Website i animację umieściłam na dole (nie jest widoczna na stronie głównej). Teraz jest tak, że jak odświeżę stronę to animacja startuje, chociaż jeszcze nie zjechałam scrollem na nią. A chciałabym, aby startowała w momencie kiedy jest wyświetlana. Mam nadzieję, że w miarę zrozumiale to napisałam. Z góry dzięki za pomoc:)
Czy tutaj musi wejść JS?
@@paulinanaurecka3416 raczej na pewno js :)
Mógłbyś zrobić poradnik na przykład o 'html pug' ? Mam tu na myśli poradnik o tym, że robisz sobie osobne sekcje w osobnych plikach i w finale łączą się w jeden plik wyjściowy.
Jeśli istnieje na to inny sposób (preprocesor) to byłoby nawet lepiej :)
Chyba ci chodziło o tutorial z jakimś webpackiem albo parcelem, czyli module bundlerem ;)
pug to silnik html. Według mojej aktualnej wiedzy kilka oddzielnych plików w jeden łączysz za pomocą właśnie narzędzi do automatyzacji typu gulp/webpack ewentualnie skrypt w bashu.
pug to silnik szablonów taki jak twig dla backendu i polegają na tym samym. Szablon strony rozbijasz na mniejsze szablony które dołączasz do szablonu nadrzędnego. szablon podrzędny to "block" który jest podstawiany w szablonie nadrzędnym w blocku o tej samej nazwie. W pugu wszystko oczywiście musi być przerobione na jeden plik (mogę się mylić), bo w js nie ma systemu plików, chyba że używasz go w node na serwerze. W twigu phpowym nie ma z tym problemu. Jedyne co musisz znać to składnie silnika i jakieś ciekawe wbudowane zmienne lub funkcje ułatwiające wyświetlanie treści
Oglądam w ciemno
I czekam na gsap
W jaki sposób w codepenie tak szybko tworzysz divy? Jakiś magiczny skrót?
Jakub Nakielski nazwa klasy np. .box i naciskasz tab ;)
Krzywa Beziera? FireFox i Chrome na 100% pozwala się tym bawic przy zbadaj element. Może skorzystasz przy nastempnym. Dobra robota, 👍
Tak, w devtoolsach spokojnie można tym pokombinować. Ale już nie chciałem mieszać w głowach
Dlaczego "min-height: 100vh" przesuwa klocek na środek ekranu? 100vh to nie przypadkiem 100% przesunięcia względem ekranu i nie powinien się znaleźć na samym dole?
Klocek tu nie ma nic do rzeczy, ponieważ sam w sobie nie posiada żadnej właściwości pozycjonującej. Pozycjonuje go rodzic wykorzystując display: flex z ustawionym „center” na align-items (centruj w osi X) i justify-content (centruj w osi Y). Dopóki rodzic (body) nie miał właściwości określającej wysokość, jego wysokość była równa wysokości największego dziecka (w tym przypadku jedynego dziecka jakim jest box). Dopiero kiedy określisz minimalną wysokość body jako 100vh (czyli wysokość twojego viewportu), środkiem body staje się równocześnie środek viewportu.
Roman zamierzasz w najbliższym czasie zrobić jakiś kurs o podstawach html, CSS, js lub mógłbyś polecić jakiś, w którym materiały będą aktualne, a nie przestarzałe, jak w większości?
Myślę, że będą się pojawiać tego typu odcinki o jakichś ciekawych zagadnieniach dotyczących CSS, ale raczej nie planuję takiego jednolitego kursu od A do Z.
Hello Roman,
Według Ciebie rola CSS będzie spadać w developerce wraz ze wzrostem takich narzędzi jak PostCSS?
Ktoś jeszcze używa PostCSS? xD
@@helloroman Widziałem w jednym z ogłoszeń Netguru w wymaganiach.
@@tomekskrill3959 no to jest raczej takie, że fajnie jak ktoś wie czym to jest. Ale nie kojarze żeby ktoś u nas z tego korzystał w tej chwili. Raczej CSS modules / styled-components
@@helloroman Spoko, dzięki za odpowiedz :)
@@tomekskrill3959 A tak odpowiadając szerzej na Twoje pytanie - CSS zawsze będzie podstawą stylowania naszych aplikacji i stron. Masz niby twory w postaci CSS in JS, ale w gruncie rzeczy ich zapis nadal jest po prostu CSS-em jak np. w styled components. Dobra znajomość CSS'a moim zdaniem jest super istotna dla frontendowca
W3S ma błędy i jest niedokładne? Dobrze wiedzieć w sumie bo dopiero się uczę cssa i htmla i nie wiedziałem o tym.
Dzięki roman :v
Może jakiś odcineczek o Codepen.io ? Np. co można w nim zrobić i jak skonfigurować ustawienia, aby np. podpowiadało wartości :D
ten odcinek trwałby chyba z 30 sekund :P Bo tam wszystko jest w sumie jak na dłoni napisane
Nikt nie miał dosyć, zwłaszcza jest niedostatek lajwow z helloroman.com
Bonus RPK - Opowiesci, skrypty
Poprosimy o bardziej zaawansowany tutorial :)
korzystam z w3schools i wd mnie jest dobry
To czy ten serwis jest dobry czy nie to nie jest kwestia opinii tylko faktów - znajduje się tam tona błędów. Jeśli chcesz wiedzieć jakich konkretnie to odsyłam do bloga Tomka Jakuta, który się solidnie rozprawił z tym serwisem.
Co ze stroną? Przecież jest cały czas w budowie.
Jest i jeszcze trochę pobędzie ;)
PIEEEEEEEEEEEEERWSZYY
co ty gadasz w3schools jest spoko
Niestety nie jest :C Ich materiały zawierają sporo błędów i rażących uproszczeń