AngryYumy
@AngryYumy
Заплати фрилансеру чеканой монетой

Анимация на canvas/js?

Суть такова пришел клиент, сказал хочет анимацию сменный картинок как на первом экране https://travelshift.com/ , посмотрев, что да как и погуглив понял, что это делается с помощью WebGL, шейдеров и библиотеки three.js. После того как я это сказал, я услышал вот такие слова. - 'Это можно сделать объединив пару несложных сss анимация и все все эти js и бла-бла не нужны', на вопрос - с чего вы взяли был такой ответ 'Сказал начальник отдела разработки. Это просто комбинация анимаций состоящая из 3 несложных анимаций, надо всего лишь их объединить. Подобные проекты уже у нас были, но сейчас все разработчики на других проектах'' , и вот захотелось узнать - это я на столько тугодум, что не знаю как это на сss сделать, или там профи сss сидит?
  • Вопрос задан
  • 421 просмотр
Решения вопроса 1
sfi0zy
@sfi0zy
UI developer. Верстаю неверстаемое.
На CSS вы это никак не сделаете - там неравномерное растяжение картинок присутствует. Тут "начальник отдела разработки" либо не шарит во фронтенде, либо пытается сбить цену. Но штука из разряда "ябзаверстал", а я тут как раз собираю коллекцию примеров с шейдерами, так что набросал похожий эффект для нее, только без кляксы в центре (там есть немного лишнего кода, но это издержки, чтобы серия примеров не сильно отличалась).


* Если вдруг будете копировать себе, не забывайте про лицензию.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
hzzzzl
@hzzzzl
/оффтоп
офигенный эффект
(сделаешь на css - покажешь как)
Ответ написан
@andreysuha
Что то знаю
Да конечно легко делается на css, даже думаю двух анимаций достаточно будет, это просто Вы не компетентный.

P.s. если что это сарказм;) какой нах css?
Ответ написан
sniggering_deus
@sniggering_deus
Mother is a god in the eyes of a child.
На чистом CSS подобный эффект никак не выйдет.

Для подобных анимаций можно и нужно использовать например GSAP или Three.js или другие инструменты, с помощью которых реализуются подобные эффекты.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы