Как делаются подобные сайты?

Question

[Руслан Дасаев]

Заказчик попросил сделать анимацию как на таком сайте redcollar.ru .Скажите, как верстальщику со знанием html, css и немного jquery как сделать такое?Чтобы задний фон менялся при скролле и т.д.И вообще при помощи чего конкретно сделано здесь, может использовались какие-то готовые решения?

Comments

[Руслан Дасаев]

Andrew N, Пока без стоимости.Заказчик-это и дизайнер в одном лице))Но я ей озвучил прайс 500 рублей секция.Я думал будет что-то обыкновенное, а она мне после всего такое выкатила:(( А что?

[Андрей]

Для начало освойте position-fixed

[Андрей]

Головной эффект с текстами на SVG сделан. В буржунете много туторов по теме подобных искажений.

[Exploding]

Cloud47,

Но я ей озвучил прайс 500 рублей секция.Я думал будет что-то обыкновенное

Т.е. цена была озвучена, не имея представления, что нужно сделать?
Хм... оригинальный подход...

[Aves]

Скорее не на svg, а на three.js

[alex-1917]

Exploding, судя по ТЗ (безумный набор свистоперделок) цена по божески)))) Все равно "Еще один сайт на Вордпресс" )))

[Nikita Dergachov]

От такого сайта укачивает очень сильно

[Exploding]

alex-1917, тем более для верстальщика "со знанием html, css", который не подозревает о существовании css-анимаций))

Answer 1

[Павел Новиков]

Паралакс это называется, в гугле много информации на эту тему и готовых библиотек

Answer 2

[Alexandr Alexandrov]

Ведь можно, для начала, найти клёвые примеры с фоновым изменением и развивать\ковырять\адаптировать:

• https://codepen.io/Funsella/pen/dpRPYZ
  
• https://medium.com/@_patrickcameron/a-complete-beg...
  
• jsfiddle.net/yu3ver/e0t7jbq0
  

Answer 3

[profesor08]

Именно в этом сайте задний фон сделан довольно просто, и без всей той херни, которую тебе насоветовали выше.
prntscr.com/jalr34

На заднем фоне блок, залитый градиентом. При прокрутке меняется позиция фона и получается такой эффект. Аналогично получится, если растянуть этот блок не на размер экрана, а на весь контент. И js не потребуется, если не хочешь управлять скоростью смещения фона с градиентом.

Answer 4

[Ivan Bogachev]

И вообще при помощи чего конкретно сделано здесь

Конкретно здесь многое сделано на three.js (да почти все). Тормоза в основном исходят от этого же инструмента, а точнее от того, что им малость злоупотребляют там, где можно все сделать проще.

как верстальщику со знанием html, css и немного jquery как сделать такое?

Параллакс с картинками, текстами и градиентными фонами для секций; смена надписей и плюсик - анимации svg; видео на фоне; немного css-трансформаций для переходов между страницами SPA; соответственно роутер, практика показывает, что в таких ситуациях имеет смысл написать свой, кастомный; шкала справа - еще css-переходы; на страницах проектов и агенства - большие картинки, еще видео, немного svg-анимаций, много абсолютного позиционирования, немного эффекта scrollfire + css-переходы; где-то между делом - подгрузка ресурсов аяксом. Если все это поделить на отдельные задачи, то такой сайт будет вполне реализуем, главное - не усложнять на ровном месте.

Answer 5

[asd111]

Смена цвета бэкграунда при скролле - делается на js, есть готовые либы.
Видео с эффектами - один блок с обычным видео и второй блок внутри с уменьшенным видео.
Текстовые эффекты и ещё пара эффектов - шейдеры на webgl.
Остальное на js.