@olegov99

Как верстают такие сайты?

Доброго времени суток, друзья! Подскажите пожалуйста, как верстают такие сайты в стиле минимализма?
https://www.evomedia.lt/en
https://wideeye.co/
https://wearebishopdesign.com/
А конкретнее, какие технологии используют? Как создают подобную анимацию? Как выглядит структура html документа? Там каждая страница отдельный html документ, или же все это в одном файле? Искал в интернете, ничего не нашел. Буду благодарен за любую помощь)
  • Вопрос задан
  • 662 просмотра
Решения вопроса 1
lukoie
@lukoie
0 дизайнер вместе с пиэмом придумывает концепцию проекта - разделы, блоки, картинки, формочки
1 дизайнер рисует в скетче и анимирует в принциплс
2 когда вся конструкция утверждена Главным, всё это верстается в Брекетсе с Эмметом в хтмл5 и сасс
3 добавляют анимации и вот это вот всё на ES6
4 тестят, полируют и в продакшн

А конкретнее, какие технологии используют?

эджайл, гит, галп

Как создают подобную анимацию?

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

Как выглядит структура html документа?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="...">
    <title>...</title>
    <link href="..." rel="stylesheet">
  </head>
  <body>
    <header>
      <div>
            ...
      </div>
    </header>

    <main>

      <section>
        <div class="container">
            ...
        </div>
      </section>

    </main>

    <footer>
        ...
    </footer>
    <script src="..."></script>
  </body>
</html>


Там каждая страница отдельный html документ, или же все это в одном файле?

Да!

Искал в интернете, ничего не нашел.

Ищите в яндексе - там найдется ВСЁ!
Буду благодарен за любую помощь)

могу предложить перевод с/на английский и картину из янтаря, кому-то на день рожденья можно подарить, например
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
KickeRocK
@KickeRocK
FrontFinish
Эм.
А открыть DevTools и глянуть код?
Там же и скрипты посмотреть и разметку.
Можно конкретнее, что у вас вызвало вопросы?
Блок с видео? Плавное появление при скролле?
Ответ написан
Вся анимация через TweenMax. На одном есть react, а на других jQuery. В них ничего сложного нет.
Ответ написан
Комментировать
slii
@slii
Не сказал бы, что это что то нереальное, лучше посмотрите вот этот сайт - https://www.thenewmobileworkforce.com/
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы