Где научиться делать лендинги с достойной анимацией?

Question

[skuvaWeb]

Натолкните на путь, возможно подскажите источники, как делаются лендинги с анимацией? Я не имею в виду связку wow.js + animate.css, а что-то вроде сайтов с Awwwards, где подобному научиться?

Comments

[shmatuan]

Пробовать, ошибаться, искать отдельно каждую часть - 80% практики, 20% поиска
На самом деле большая часть из крутости этих сайтов - дизайн и картинка)

[Dymok]

GSAP

[lb-web]

Забудьте. Сайты с awwwards лютое говно с точки зрения юзабилити. Это сделано исключительно для вот таких конкурсов и проектов. Посмотрите на сайты топовых брендов, они не делают сайты подобного характера.

[Johny Smith]

@lb-web, Забудьте. Сайты с awwwards лютое говно с точки зрения юзабилити. Это сделано исключительно для вот таких конкурсов и проектов. Посмотрите на сайты топовых брендов, они не делают сайты подобного характера.

Вы и те кто лайкнули вас, интересно вы вообще понимаете предназначение лендинга, или вы все пишите или лайкаете просто как попало, даже не думая и не читая вопросы?

[Андрей]

Olek1, просветите, что ли. Я лайкнул. Может, я не прав, интересно Ваше мнение в чем именно.

[Johny Smith]

@f-end, просветите, что ли. Я лайкнул. Может, я не прав, интересно Ваше мнение в чем именно.

Отключаем юношеский максимализм, и читаем ещё раз вопрос, вдумчиво, слева направо, не по-диагонали, а как задумал автор:

Где научится делать лендинги с достойной анимацией?

Надо научиться сделать лендинг, с качественной анимацией. При чём тут топовые бренды, вообще?

Это тоже самое, если вы зададите вопрос "Как сделать красивую аэрографию на автомобиле?" а вам будут такие как вы отвечать: "Фу!!! Вон в Дубае ездят МакЛарэны! Вам надо делать только МакЛарэн!!!".

Вопрос задан коротко, и главное понятно.

[crdrads]

Olek1, вы и те кто вас не лайкнул вообще понимаете разницу между лендингами и ПРОМО-САЙТАМИ? На awwards 90% глючного, загружающегося по 5 минут говна это ПРОМО-САЙТЫ, а не лендинги. То что автор нуб и не понимает разницу это его проблемы. Ни один вменяемый человек не будет запихивать в ЛЕНДИНГ WebGL (а именно эта нечисть в основе всех этих придурошных сайтов с awwwards). Промо сайты это обычный маркетинговый развод крупных клиентов, которые имеют его для галочки, как часть рекламной стратегии бренда. Промо-сайт существует не для продвижения продаж какого-то конретного товара или получения лидов. Он существует для продвижения бренда, его репутации и тд. Это не ЛЕНДИНГ.

awwwards это такая мафия околомаркетинговой тусовки, навязывающая этот стиль для промо-сайтов, для того чтобы было удобно разводить бизнес. Брать с них пример будет ну прям совсем уже глупенький человек, который в жизни не найдет подобного заказа самостоятельно, без маркетинговой конторы где-то в Москве или Нью-Йорке (ибо в реале никому не нужен ЛЕНДИНГ, загружающийся 2 минуты и в котором непонятно куда жмакать - а это именно 90% недо-сайтов с awwwards; другое дело никому не нужный промо-сайт для компании с миллирдными доходами - ей заплатить 10к маркетологам на этот сайт раз плюнуть, из них может баксов 500 дойдет до кодера, хаха). Это обычный распил бабла маркетингового бюджета крупного бизнеса под красивой оберткой. ВСЕ.

[Johny Smith]

crdrads,

по 5 минут говна это ПРОМО-САЙТЫ, а не лендинги. То что автор нуб и не понимает разницу это его проблемы

Про лендинг статья в википедии есть, про "промо-сайт" статьи нету, скиньте ссылку где можно почитать про их разницу, гугление ничего стоящего не дало

[crdrads]

Olek1, а ну все понятно, теоретик. Зато какой тон опытный был!

Не про все есть в википедии. Кое-что надо получить на практике или включить голову. Вот пожалуйста, первый сайт с awwwards - https://www.sartobikes.com/

Я ждал его загрузку не менее 30-50 секунду (причем загрузку не самого сайта, а парсинга его говно скриптов). И после этого меня встречает отключенный скролл (!!!), какой-то уебанский курсор и непонимание что тут вообще нажимать, как эту нечисть скроллить, как этим сайтом пользоваться и вообще куда я попал))) Офигенный лендинг! Вот так "приземлился"))

После усердного изучения становится понятно что это промо-сайт эксклюзивных велосипедов ручной сборки из золота))) Это не сайт для сбора ЛИДОВ (что есть главным назначением ЛЕНДИНГА). Это не онлайн-магазин. Это промо-сайт))

И таких сайтов там 90%. Это дно полное!

[Johny Smith]

crdrads, при чём тут "теоретик-не-теоретик", ссылку нормальную дайте прочитать что такое промо и чем оно отличается от лэндоса, если своими словами не можете объясняться. Это тема уже для другого вопроса, ладно, будь по-вашему, я создам: Чем отличается Promo Site от Landing Page?

[Developer]

Кто научиТСЯ?

Answer 1

[Anton Filippov]

изучать canvas, pixi, webgl, gsap, etc, scrollmagic. и практиковаться

Answer 2

[lukoie]

для начала освоить базовое
например тут https://courses.cssanimation.rocks/p/level-up

Comments

[Kadzi]

не составит ли вам труда накидать еще таких ссылочек?)

[lukoie]

Kadzi, https://htmlacademy.ru/courses/80
https://webdesign.tutsplus.com/articles/popular-co...
https://cssanimation.rocks/courses/
https://www.quora.com/Which-is-the-best-course-for...
https://www.creativebloq.com/inspiration/css-anima...

https://coursehunters.net/course/cssanimation
https://coursehunters.net/course/prodvinutaya-svg-...
https://coursehunters.net/course/osvoyte-30-fronte...
https://coursehunters.net/frontend

[Kadzi]

lukoie, спасибо!

[Александр Кетов]

Есть от них ещё книжечка бесплатно

Answer 3

[uRoot]

К вопросу skuvaWeb я бы ещё добавил: где взять такие макеты?

Comments

[Anton Filippov]

у хороших креативных моушн-дизайнеров, либо самому продумывать всё это. Это уже не просто накидать блоков из юай-китов

[uRoot]

Anton Filippov, та хотелось бы найти готовый в инете, по возможности. Но я таких не находил

[Anton Filippov]

CryNet, ну зайдите на тот же авввардс и сделайте скриншоты сайтов :) Это будет статическими макетами, и пробуйте их реверс инжинирить уже сами

[uRoot]

Anton Filippov, ну это такое... проще найти начинающего дизайнера и попросить его потренироваться))

[Anton Filippov]

CryNet, если у нас одинаковые представления о начинающих дизайнерах, то он не сможет сделать даже близкое к awwwards уровню)

[uRoot]

Anton Filippov, я понял. Ну, тогда вариантов нет :)

[lukoie]

на дриббле, естественно

Answer 4

[Johny Smith]

В Readymag. И там тех. поддержка на русском языке

Answer 5

[FullStack Alex]

Мне статьи и стиль Sarah Drasner нравятся:
https://sarahdrasnerdesign.com/#projects

slides.com/sdrasner/vue-animation1?token=aXKXDj9N
(Пассворд: vue!)

https://github.com/sdras/animating-vue-workshop/bl...

shop.oreilly.com/product/0636920045335.do