Как и где можно научиться делать такие сайты?

Question

[Krypton Proger]

На чем пишутся такие шикарные сайты и где этому можно научиться?

Rain Forest Foods
Casa Mance
KIKK
ss2017 Descente
Falter Wild Plus

Comments

[CapeRatel]

в интернете

[Hyubert]

Если вы спрашиваете о таком, то Вам еще рано об этом думать - вы видимо только начали свой путь в веб-разработке, и пока вы дойдете до такого результата - пройдет не 1 год.

[Hyubert]

вот этот кстати не сложный - www.casamance.com

минимум технологий - паралакс, анимация по попаданию в вьюпорт и прелоадер, все остальное просто html + css

[lukoie]

шота я не понял. а почему ответ Сережа Ахен не вынесен решением, хотя решения уже выделены? он же конкретно показал чем это сделано!

[Курум]

Поменьше бы таких сайтов - крайне неудобные. Красивые - да, но не информативные.

[mydarck]

У меня умер видео драйвер от первого сайта. Теперь я тоже хочу научиться делать такие сайты!

[Андрей]

Ставишь Wappalizer (дополнение для хрома) и смотришь какие технологии применяются конкретным сайтом.

[Полина Емельянова]

Андрей: КСТАТИ, ДА!!!!!

[Андрей]

Полина Емельянова: Кстати на него 100% надежды нет - он кое-где замечен в подвирании бессовестном :)

Answer 1

[kulaeff]

На том же, на чем пишутся и обычные сайты, но с более активным использованием технологий для анимаций. Ключевые слова: canvas, css свойства (animate, transform, transition), web animation api, threejs (webgl), gsap (tweenlite, tweenmax), svg animation.

Comments

[Антон Мудренок]

Web animation api?)) Вы с 2020?)

Answer 2

[Максим Тимофеев]

Задумывая дизайн новичок исходит из своих возможностей. У профи возможности ограничены только фантазией. Так что эти сайты сделаны на опыте и креативном мышлении, а так же большом количестве знаний. Хотите научится нет проблем - надо учить все что попадается под руку. Начать надо с отличных знаний html, css, javascript, canvas, svg, а дальше сами начнете понимать что еще надо.

Answer 3

[Сережа Ахен]

Вот например pixijs фреймворк, который предполагается как визуальный 2D WebGL движок.
У них в галерее много красивых сайтов и презентаций, написанных с его помощью (Rain Forest Foods из вашего списка, кстати, тоже).
www.pixijs.com/gallery

Comments

[Mokhirjon Naimov]

Так и думал что задействованы какие то игровые движки :)

[Сережа Ахен]

Mokhirjon Naimov: ну он не совсем игровой. Скорее визуальный движок.

[Алексей Бурлака]

Ваш же пример там в галерее
www.pixijs.com/gallery

Answer 4

[D3lphi]

На том же на чем и все остальные: html, css, js (фронт энд). Вы рассчитывали услышать что-то иное?

Answer 5

[Денис Каракчиев]

Сайт, который грузится 1.5 минуты и лагает при прокрутке на core i5, ммм, ну даже не знаю. Может быть лучше уж видео ?)

Comments

[lightalex]

А у вас первый сайт из списка лагал?
У меня просто i7, вроде бы вывозит всю анимацию
Интересно насколько первый проект оптимизирован
Там вроде бы самая сложная анимация из всего списка

[Денис Каракчиев]

lightalex: ss2017.descente.jp и falter.wild.plus/#en нормально работают. У остальных либо лаги, либо очень кривая анимация, если я скроллю как-то не так, как от меня видимо ожидают ))

Answer 6

[Сергей Рогожкин]

Простой народный признак разработчика-чудака - хук на скроле. Второй затасканный штамп, когда контент выезжает "из за угла", чтобы уставшие глаза еще больше напрягались. Для полной компании недостает прилипчивой навигации, которая выпрыгивает случайным образом и сужает область чтения. В примерах собраны негативные приемы сайтостроения. Считаю не надо на это равняться. Научиться не делать такие сайты.

Comments

[Денис Каракчиев]

Что за хук на скролле?

[Сергей Рогожкин]

Денис Каракчиев: когда страница лишается родной прокрутки; вешается обработчик на событие .on('scroll'), который предотвращает дефолтное поведение.

[Денис Каракчиев]

Сергей Рогожкин: никогда не понимал почему, допустим, постраничная прокрутка это плохо? Иногда она кажется очень удобной для целей презентации чего-либо, и т.п. Видимо мне нельзя быть дизайнером =)

[Сергей Рогожкин]

Денис Каракчиев: tonsky.livejournal.com/309456.html

Answer 7

[Юрий Макарин]

Согласен, сайты может и красивые и креативные, но для коммерческих целей мало подходят.

Могу подсказать быстрый старт по созданию лендинг-пейдж своими руками, без конструкторов и навыков программирования на базе cms wordpress.
Кстати уже в воскресенье 23.04.17 будет ближайший интенсивный тренинг.
Подробнее здесь
И есть еще группа мероприятия (там новости, фото и отзывы)

Comments

[lukoie]

для своих спойлер давайте. компоузером?

[Юрий Макарин]

lukoie: Не понял, что Вы имели ввиду, поясните пожалуйста.

[lukoie]

Юрий Макарин: я имел в виду, дорогой друг, чтобы для местной аудитории могли в двух словах сказать о чем там будет идти речь. одностраничники на вордпрессе Вы будете рекламировать создавать каким именно инструментом? Вижуал Компоузером, или каким то другим?

[Юрий Макарин]

lukoie: Ну инструментов будет достаточно много, непосредственно наполнение сайта будет с помощью визуального редактора, наподобие Visual Composer (таких редакторов существует достаточно много, но благо они очень похожи), в двух словах тут не рассказать, да и стоит ли - программе курса посвящена отдельная страница, ссылку на нее дублирую: Подробнее о курсе создания лендинг пейдж

[lukoie]

Юрий Макарин: так это только для питерцев, в оффлайне?

[Юрий Макарин]

lukoie:
Да, сегодняшнее "живое" мероприятие проходило в Петербурге.

Но есть и онлайн вариант - все то же самое, но в виде видеоинструкций и поддержка в vk.com или telegram (или другим способом, если не удобны предложенные)
Онлайн-вариант не привязан к дате - можно начать в любой момент и имеет несомненный плюс - я консультирую индивидуально!
Что бы начать - нужно заполнить форму регистрации на сайте и я свяжусь с Вами!