Нова работилница
Модул 4: Анимации с JavaScript и CSS3
модул 4
Анимации с
JavaScript и CSS3
научи как се създават уеб анимиации и интеракции, които да направят уебсайта отличаващ се
Ниво: напреднали
Къде: на живо онлайн (Zoom)
Сертификат: да
Видео запис на обучението: да
Допълнителни учебни материали: да
Обратна връзка от преподавателя: 100%
Група: макс 30 души
Кога: 27.10.2024г., 10:00 – 15:30 часа
Технологии
JavaScript
GSAP
Barba.js
Какво ще научиш по време на това обучение?
В края на това практическо обучение ще можеш да създаваш уеб санимации и микро интеракции, с които да направш един уебсайт по-интересен, по-забавен и по-динамичен.
1
Основи на CSS keyframes & transitions
Ще научиш как да създаваш прости и сложни анимации с CSS, използвайки keyframes и transitions.
2
Създаване на анимации с GSAP
Ще разбереш как да използваш JS библиотеката GSAP за създаване на комплексни анимации, както и как да комбинираш различни анимации за постигане на сложни ефекти.
3
Интегриране на анимации в уеб проекти
Ще се научиш как да комбинираш CSS и JavaScript анимации за създаване на професионално изглеждащи уеб страници, както и как да оптимизираш анимациите за по-добра производителност.
Как ще протече обучението?
Внимание: това е практическо обучение!
Означава, че няма да прекарваме време само в приказки, а тъкмо обратното – ще създаваме заедно.
Теоретична част – 1 час
– какво са CSS keyframes и transitions
– kак да използваме keyframes за създаване на сложни анимации
– kак да прилагаме CSS transitions за плавни преходи между състояния
– въведение в GreenSock Animation Platform (GSAP)
– основни концепции и синтаксис на GSAP
– преглед на основните функции и възможности на библиотеката
– какво е smooth scroll и какво е Lenis (JS библиотека)
– какво е Barba.js (JS библиотека)
Практическа част – 4 часа
– ще инсталираме и конфигурираме GSAP в нашия проект
– ще инсталираме и конфигурираме Lenis smooth scroll в нашия проект
– ще създадем основни CSS анимации с keyframes и transitions
– ще създадем прости анимации с GSAP
– ще създадем sticky елемент при scroll
– ще имплементираме Barba.js в проекта и ще създадем page transitions
– ще реализираме практически примери за анимирани елементи и интерактивни анимации
– ще оптимизираме анимациите за по-добра производителност
За кого е подходящо обучението?
Обучението е създадено с цел да надгради front-end познанията на участниците що се отнася до т.нар. creative coding. За да се възползваш максимално от новите умения е необходимо да имаш базови такива пи HTML, CSS и JavaScript.
Обучението е подходящо и за UI/UX дизайнери, които желаят да проследят процесите по имплементиране на интеракции и анимативни ефекти в даден дизайн. С тези нови познания ще могат да взаимодействат по-добре с dev екипите и да работят с обща цел.
Какво ще получиш?
Те ми се довериха
През годините организирах 2 курса и 5 workshop-а, а междувременно развивам блога на {dev} blondie; в който може да намериш много полезна и практическа информация, свързана с програмирането. А ето и няколко отзива от участници в предишни издания
Работилницата беше изключително полезна за мен, тъй като до момента не бях имала опит с писането на код.
Честно казано, не очаквах, че ще ми хареса толкова много! Още от първата работилница усетих как тези нови знания допълват съществуващите ми умения в дизайна. Огромна заслуга имаш ти като лектор, който успя да направи сложната на вид материя достъпна и интересна. Материалът беше много добре структуриран и ясен, което направи обучението приятно и ефективно.
Жаклина Симова
Преди всичко: Благодаря!
Това бяха едни много ползотворни пет часа и половина.
Наистина подредено, достъпно и с темпо, което е доста стегнато, за да не се разсейва човек, но позволява да се възприема и осмисли материала (аз само гледах, не работих паралелно). И приятна атмосфера се създаде!
Валентина Гатева
Изключително полезно обучение!
За хора с базови познания по HTML, CSS, и JavaScript се изясняват доста неща и се показвва процеса по създаванена сайт.
Бих се записал за бъдещи обучения.
Бисер Дойков
Обучението не просто оправда очакванията ми, то ги надмина! Хареса ми как е структуриран материала, а също и отношението ти към разработката, а и към нас.
Определено бих препоръчала обучението и на други.
Боряна Алексиева
Нормално е да имаш въпроси
Затова отговарям на някои от тях тук. А ако има такива, които не са споменати – не се колебай да ми пишеш на hi@devblondie.com
Обучението ще се проведе на 27.10.2024г. от 10:00 до 15:30 часа в Zoom. Пордължителността на модула е 5:30 часа (с почивките).
Ще ни липсваш 🙁 но няма проблем – веднага след провеждане на обучението ще получиш запис от него, както и всички материали, които сме разработвали.
Всеки модул е на цена от 120лв. Ако решиш да се запишеш за пълната програма (5 модула), цената е 500лв. И да, мога да издам фактура, за да не се сърдят хората от отдел Счетоводство 🙂
Да, всеки участник ще получи сертификат (на английски) за завършване на модула, а за участниците, които са се записали за пълната програма – за завършен курс „Уеб програмиране“.
Да, програмата е създадена по начин, който да е гъвкав и да позволява на курсистите сами да избират в кой модул да се включат. Представи си го като сериал, в които има логическа последователност на епизодите, но ако изтървеш една-две серии това няма да се отрази на цялостното ти схващане за следващите такива.
Не, няма дори да се опитвам да те заблудя, че за 5 часа ще creative front-end developer. Но за 5 часа ще видиш процесите, които съпътстват създаването на анимации и интеракции, ще видиш какви библиотеки може да използваш за тази цел, а отделно от това ще получиш допълнителни учебни материали, които да ти помогнат да създадаваш award-winning интерфейс и преживяване.
Форма за записване
Цена за участие е 120лв. с ДДС.
Плащането се извършва с карта или банков превод след попълване на формата по-долу.
Групата е до 30 души. Свободни места – 18.
* след изпращане на формата ще получиш имейл с инструкции за плащане
Виж останалите модули от програмата
