Реших да разтърся нещата тази седмица и да включа видео разходка с моята публикация в блога. Надявам се, че това е само първата част от поредица от уроци за CSS и GSAP анимация, докато продължавам да уча. Включих връзки към любимите ми ресурси, Codepen, върху който ще работим заедно, и всякаква допълнителна информация, която смятам, че ще трябва да прегледате в долната част на тази статия.

След работата ми в екипа на Blackhole за седмицата на изграждане на моето училище, исках да споделя това, което научих за анимацията с други хора в кодовата общност. Мисля, че анимациите са чудесен начин да привлечете вниманието към нещо на вашата страница, както и да придадете на вашия сайт излъскан, професионален завършек.

Нещо, което трябва да имате предвид, когато използвате анимации с вашите проекти, е производителността. Днес ще се фокусираме върху свойствата: завъртане, мащабиране и непрозрачност. Това са безопасни свойства, които да въведете като анимации към уебсайта си, без това да повлияе на производителността.

Какво ще ви трябва за този курс:

Основни познания по HTML, CSS и JavaScript. Използвам доста основни техники, така че всеки трябва да може да гледа и пресъздава проекта. Може да е непосилно, ако нямате поне малко разбиране за HTML/CSS и Js. Силно препоръчвам да използвате FreeCodeCamp.org, за да се запознаете с кодирането, ако наистина сте начинаещ в кодирането.

Codepen — ако все още нямате създаден акаунт, направете го сега. Безплатно е! Ето връзката към файла, с който ще започнем заедно: https://codepen.io/amlane/pen/vMrwVY

Уверете се, че сте избрали „Fork“ в горната част на сайта на Codepen, за да можете да запазите промените си и да запазите проекта си за бъдещи справки. Освен това, ако все още имате проблеми след урока, можете лесно да споделите кода си с мен, за да ви помогна да отстраните грешки.

Ще споделя също как да използвам GSAP скрипта в IDE (използвам VS Code)

След този курс трябва да можете да:

  • Прилагане на анимация към HTML елемент
  • Използвайте стойностите на анимацията: завъртане, мащаб и непрозрачност
  • използвайте документация за решаване на проблеми
  • включвайте и изключвайте анимацията с „щракване“
  • започнете да използвате GSAP анимация

Добре, ще се видим във видеото!

Моите любими ресурси:

W3School— Има пълен списък на всички свойства, дефиниции и налични стойности на анимация.
CSS-трикове- Има примери за анимации, информация за производителността при използване на определени свойства с анимация и дори можете да разклоните техните анимации в Codepen, за да играете сами с тях или да ги запазите като справка.

GSAP — JavaScript анимационна библиотека от професионален клас.