Какие технологии необходимо знать для создания красивых анимированных веб-сайтов?

Question

[DanielTonne]

Здравствуйте. Занимаюсь версткой сайтов, сейчас на работе планируется повышение квалификации. Я желаю заниматься разработкой красивых анимированных сайтов, например тех, которые можно видеть на сайте awwwards.com.

Но у нас в компании специалистов кто делает именно такие сайты нет, т.к большая часть разработки это e-ccomerce.

Грейд для повышения мне предложили составить самому.

Что необходимо знать на текущее время чтобы создавать подобные сайты? Какие используются технологии?
Буду рад любой полезной информации.

Comments

[archelon]

canvas. threejs и т.д.

Answer 1

[Вадим]

Тут не будет идеального ответа, так как всё зависит от конкретного дизайна и его идеи.

Но если так издалека начать накидывать, то конечно же:

CSS

• transforms
  
• perspective
  
• animations
  
• производительность (например, такие свойства как: will-change, contain)
  
• filters
  
• clip-path
  
• positions
  
• masks
  

JS

• requestAnimationFrame
  
• Управление скроллом
  
• дебаунс\тротлинг
  
• canvas
  
• WebGL
  
• three.js
  
• EventLoop - таски, в том числе рендер таски
  
• Управление видео и аудио
  

SVG

• фильтры
  
• блюры
  
• анимации
  
• паттерны
  
• маски
  

Общее

• Производительность - как организовать слои и анимацию так, чтобы выдавать как можно больше fps и как можно меньше перерисовок.
  
• Безопасные для анимации свойства (то есть знать что такое repaint и reflow)
  

Comments

[DanielTonne]

Спасибо за информацию! Буду изучать.

Answer 2

[true]

очевидно надо гуглить js-библиотеки для анимации

Answer 3

[Temur__k]

gsap, anime.js