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

Question

[Тарас Шульга]

Суть такова пришел клиент, сказал хочет анимацию сменный картинок как на первом экране https://travelshift.com/ , посмотрев, что да как и погуглив понял, что это делается с помощью WebGL, шейдеров и библиотеки three.js. После того как я это сказал, я услышал вот такие слова. - 'Это можно сделать объединив пару несложных сss анимация и все все эти js и бла-бла не нужны', на вопрос - с чего вы взяли был такой ответ 'Сказал начальник отдела разработки. Это просто комбинация анимаций состоящая из 3 несложных анимаций, надо всего лишь их объединить. Подобные проекты уже у нас были, но сейчас все разработчики на других проектах'' , и вот захотелось узнать - это я на столько тугодум, что не знаю как это на сss сделать, или там профи сss сидит?

Comments

[Алексей Ярков]

Ну так пусть клиент и делает сам )) В чём проблема? Спросите его про посещение доктора. Он с ним тоже спорит о методах лечения?

[Тарас Шульга]

Алексей Ярков, так я примерно так и ответил, просто подумал спросить - это я дуб или все таки как всегда клиент специалист с опытов во всем но времени нет?)

[RAX7]

на css такое точно не сделаешь, скорей всего "начальник отдела разработки" сам не понимает что несет.

Answer 1

[Ivan Bogachev]

На CSS вы это никак не сделаете - там неравномерное растяжение картинок присутствует. Тут "начальник отдела разработки" либо не шарит во фронтенде, либо пытается сбить цену. Но штука из разряда "ябзаверстал", а я тут как раз собираю коллекцию примеров с шейдерами, так что набросал похожий эффект для нее, только без кляксы в центре (там есть немного лишнего кода, но это издержки, чтобы серия примеров не сильно отличалась).


* Если вдруг будете копировать себе, не забывайте про лицензию.

Comments

[Тарас Шульга]

Спасибо за красивый пример. Брать не буду. Ибо тогда отказаться от работы. Мне просто хотелось услышать дуб я Аль нет=)

[Dimonchik]

а "начальник отдела разработки" возьмет

[Тарас Шульга]

dimonchik2013, лол, если нагуглит этот вопрос)

[Олег]

Лицензия на codepen...)))
Спасибо, поржал

[Ivan Bogachev]

Олег, а что смешного? Скорее грустно, что у нас люди еще не научились манерам и приходится напоминать о них, в европе с этим все гораздо лучше.

[Олег]

Ivan Bogachev, Это ни в коем разе не закрытый ресурс. Он скорее для ревью. Рано или поздно на тебя обратят внимание. Но требовать лицензию на набор общедоступных символов - это бред.
ДА, я посматриваю часто там реализацию, как и 99%.
То же самое и с открытыми репо на git

[Ivan Bogachev]

лицензию на набор общедоступных символов - это бред

Олег, ну ок, скажите это всему open-source сообществу. Одно дело, когда вы посмотрели идею и написали свое решение, и другое дело, когда люди просто копируют весь код и убирают информацию об авторе. Это как-то некрасиво что ли, особенно если речь идет не о примере на пару строк, а о чем-то более серьезном.

[Stranger in the Q]

забавно, я тоже попробовал:

https://ru.stackoverflow.com/a/1100338/188366

https://codepen.io/strangerintheq/pen/eYNbOyL

Answer 2

[Andrey Suha]

Да конечно легко делается на css, даже думаю двух анимаций достаточно будет, это просто Вы не компетентный.

P.s. если что это сарказм;) какой нах css?

Answer 3

[hzzzzl]

/оффтоп
офигенный эффект
(сделаешь на css - покажешь как)