ЖМК-201/2. Веб-дизайн. Практическое занятие №7. 3D-дизайн с модулем видео

Вам нужно создать страницу, реализованную по принципам 3D дизайна и состоящую из:

- фоновой иллюстрации;

- видеофрагмента;

- цветного блока с текстом, синхронизированного с навигационным меню.

Подготовительный этап

Возьмите любое видео и обрежьте его до 10-15 секундного фрагмента. Также удалите из видео звук и уменьшите размер до нескольких мегабайт. Сделать это можно через любой онлайн-сервис, например: https://vidocean.ru/tools/trim-mp4 и https://vidocean.ru/tools/compress-to-size + https://vidocean.ru/tools/mute-video

Загрузите видео в репозиторий. Туда же загрузите фоновую иллюстрацию.

Как получить работоспособную ссылку на видео? Скопируйте ссылку по кнопке view raw. Она будет следующего вида:

https://github.com/Никнейм/имя репозитория/raw/refs/heads/main/ваш файл.mp4

Преобразуйте ее так:

https://raw.githubusercontent.com/Никнейм/имя репозитория/refs/heads/main/ваш файл.mp4

Стили:

1) Создайте класс в котором будет лежать вся страница. Укажите в нем следующие значения (если объекты уйдут за пределы экрана, то измените отступ сверху):

  width: 100%;

  position: absolute;

  margin-top: -50vh;

2) Задаем псевдокласс с размерами и цветами. В первом случае ничего менять не нужно. Во втором используйте свои основные цвета (noir, main additional). В моем примере используются разные вариации аквамаринового цвета. В третьей части псевдокласса задаем шрифт - можете оставить как есть, либо изменить:

  :root {

  --space-xs: 8px;

  --space-sm: 16px;

  --space-md: 24px;

  --space-lg: 48px;

  --noir: rgba(102, 205, 170, 0.82), transparent 50%;

  --white: white;

  --gray: #D3D3D3;

  --main: Aquamarine;

  --additional: rgba(102, 205, 170);

  --roboto: "Roboto", sans-serif;

  --mono: "JetBrains Mono", monospace;

  --instrument: "Montserrat", sans-serif;

  --page-padding: clamp(18px, 4vw, 52px);

  --cubic: cubic-bezier(0.39, 0.1, 0.94, 0.76);

}

3) добавляем общий селектор:

* {

  box-sizing: border-box;

}

4) Для основных селекторов страницы указываем вашу фоновую картинку:

html,

body {

  margin: 0;

  width: 100%;

  min-height: 100%;

  background: url("фоновая картинка");

  color: var(--white);

  font-family: var(--roboto);

}

body {

  overflow-x: hidden;

}

5) Добавляем логику отображения 3D-графики:

html.visual,

html.visual body {

  height: auto;

}

.visual.visual-smooth {

  scroll-behavior: auto !important;

}

.visual.visual-smooth [data-visual-prevent] {

  overscroll-behavior: contain;

}

.visual.visual-stopped {

  overflow: hidden;

} 

6) Теперь класс скроллинга:

.viz-cover-scroll {

  position: relative;

  width: 100%;

  max-width: 100vw;

  height: 500vh;

  background: 

    radial-gradient(circle at 50% 40%, rgba(255, 214, 243, 0.12), transparent 32%),

    linear-gradient(180deg, var(--noir), #000);

  overflow: visible;

  color: var(--white);

}

7) Классы движущегося текста в основной части экрана:

.viz-cover-sticky {

  position: sticky;

  top: 0;

  width: 100%;

  height: 100svh;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--noir);

  isolation: isolate;

}

.viz-cover-sticky::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.18;

  background:

    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);

  background-size: 32px 32px;

  mask-image: radial-gradient(circle at center, black, transparent 78%);

  -webkit-mask-image: radial-gradient(circle at center, black, transparent 78%);

}

8) Класс надписей слева и справа от основного экрана:

.viz-cover-sidecopy {

  position: absolute;

  top: 50%;

  z-index: 5;

  display: flex;

  gap: var(--space-sm);

  font-family: var(--mono);

  font-size: clamp(0.75rem, 1vw, 0.9rem);

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--gray);

  pointer-events: none;

  overflow: visible;

  width: max-content;

  min-width: min(680px, 80vh);

  justify-content: center;

  align-items: center;

  will-change: transform, opacity, filter;

}

.viz-cover-sidecopy span {

  display: inline-block;

  white-space: nowrap;

  color: inherit;

  padding-inline: var(--space-xs);

  will-change: transform, opacity;

}

.viz-cover-sidecopy-left {

  left: var(--page-padding);

  right: auto;

  transform: translate(-50%, -50%) rotate(-90deg);

  transform-origin: center center;

}

.viz-cover-sidecopy-right {

  right: var(--page-padding);

  left: auto;

  transform: translate(50%, -50%) rotate(90deg);

  transform-origin: center center;

}

9) Классы надписей в центре:

.viz-cover-center-copy {

  position: absolute;

  z-index: 4;

  width: min(760px, calc(100vw - var(--page-padding) * 2));

  text-align: center;

  pointer-events: none;

  color: var(--white);

  perspective: 1000px;

  will-change: transform, opacity, filter;

}

.viz-cover-overline {

  margin: 0 0 var(--space-sm);

  font-family: var(--mono);

  font-size: clamp(0.75rem, 1vw, 0.9rem);

  text-transform: uppercase;

  color: var(--m);

  will-change: transform, opacity, filter;

}

10) Класс заголовка и его атрибутов:

.viz-cover-intro-title {

  margin: 0;

  overflow: hidden;

  font-family: var(--instrument);

  font-size: clamp(3.5rem, 12vw, 13rem);

  font-style: italic;

  font-weight: 400;

  line-height: 0.78;

  letter-spacing: -0.06em;

  color: var(--white);

  text-transform: uppercase;

}

.viz-cover-intro-title .char,

.viz-cover-overlay-title .char {

  display: inline-block;

  will-change: transform, opacity, filter;

}

.viz-cover-intro-text {

  width: min(560px, 86vw);

  margin: var(--space-md) auto 0;

  font-family: var(--roboto);

  font-size: clamp(1rem, 1vw, 1.125rem);

  line-height: 1.35;

  color: var(--additional);

  will-change: transform, opacity, filter;

}

11) Теперь добавляем блок видео:

.viz-cover-video-frame {

  position: relative;

  z-index: 3;

  width: 300px;

  height: 300px;

  overflow: hidden;

  background: var(--noir);

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow:

    0 0 0 1px rgba(255, 214, 243, 0.06),

    0 24px 80px rgba(0, 0, 0, 0.42);

  will-change: width, height, border-radius, transform;

}

.viz-cover-video-frame::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: 0.18;

  mix-blend-mode: screen;

  background: repeating-linear-gradient(

    to bottom,

    rgba(255, 255, 255, 0.16) 0px,

    rgba(255, 255, 255, 0.16) 1px,

    transparent 1px,

    transparent 7px

  );

  transform: translateY(-100%);

}

.viz-cover-video-frame::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: 0.35;

  background:

    linear-gradient(

      110deg,

      transparent 0%,

      transparent 42%,

      rgba(255, 214, 243, 0.18) 50%,

      transparent 58%,

      transparent 100%

    );

  transform: translateX(-120%);

}

.viz-cover-video {

  position: relative;

  z-index: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: scale(1);

  will-change: transform;

}

12) Группа классов перекрывающих слоев поверх видео:

.viz-cover-dark-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background: rgba(0, 0, 0, 0);

}

.viz-cover-frame-label {

  position: absolute;

  left: var(--space-sm);

  right: var(--space-sm);

  z-index: 2;

  display: flex;

  justify-content: space-between;

  font-family: var(--mono);

  font-size: 11px;

  line-height: 1;

  text-transform: uppercase;

  color: var(--white);

  mix-blend-mode: difference;

  pointer-events: none;

  will-change: transform, opacity;

}

.viz-cover-frame-label-top {

  top: var(--space-sm);

}

.viz-cover-frame-label-bottom {

  bottom: var(--space-sm);

}

.viz-cover-overlay {

  position: absolute;

  inset: 0;

  z-index: 3;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  color: var(--white);

  text-align: center;

  padding: var(--page-padding);

  clip-path: inset(100% 0 0 0);

  opacity: 0;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}

13) Перекрывающие слои между видео и фоном:

.viz-cover-overlay-inner {

  width: min(980px, 92vw);

  display: flex;

  flex-direction: column;

  align-items: center;

  color: var(--white);

}

.viz-cover-overlay-title {

  margin: 0;

  font-family: var(--instrument);

  font-size: clamp(3.75rem, 11vw, 10rem);

  font-style: italic;

  font-weight: 400;

  line-height: 0.78;

  letter-spacing: -0.06em;

  color: var(--white);

  text-transform: uppercase;

}

.viz-cover-overlay-text {

  width: min(680px, 90vw);

  margin: var(--space-md) auto 0;

  font-family: var(--roboto);

  font-size: clamp(1rem, 1.3vw, 1.25rem);

  line-height: 1.35;

  color: var(--additional);

}

14) Класс меню:

.viz-cover-menu {

  margin-top: var(--space-md);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: var(--space-sm);

  font-family: var(--mono);

  font-size: clamp(0.75rem, 1vw, 0.9rem);

  text-transform: uppercase;

  color: var(--white);

}

15) Класс ссылок в меню по умолчанию и при наведении курсора:

.viz-cover-menu a {

  color: inherit;

  text-decoration: none;

  transition: color 0.3s var(--cubic);

}

.viz-cover-menu a:hover {

  color: var(--main);

}

16) Классы развертывания меню и прогресс-бара под видео:

.viz-cover-menu span {

  display: inline-flex;

  color: var(--main);

  opacity: 0.8;

}

.viz-cover-progress {

  position: absolute;

  left: var(--page-padding);

  right: var(--page-padding);

  bottom: var(--space-md);

  z-index: 7;

  height: 1px;

  background: rgba(255, 255, 255, 0.16);

  overflow: hidden;

}

.viz-cover-progress-bar {

  width: 0%;

  height: 100%;

  background: var(--main);

  transform-origin: left center;

}

17) Класс блока под видео:

.viz-cover-bottom-note {

  position: absolute;

  right: var(--page-padding);

  bottom: calc(var(--space-md) + 12px);

  z-index: 7;

  display: flex;

  align-items: center;

  gap: var(--space-xs);

  font-family: var(--mono);

  font-size: clamp(0.75rem, 1vw, 0.9rem);

  text-transform: uppercase;

  color: var(--additional);

  pointer-events: none;

  will-change: transform, opacity;

}

18) Класс цветного блока внизу под текстом:

.viz-after-cover {

  min-height: 100vh;

  padding: var(--page-padding);

  display: flex;

  flex-direction: column;

  justify-content: center;

  background: var(--additional);

  color: var(--noir);

}

19) Абзацы в нем:

.viz-after-cover p {

  margin: 0 0 var(--space-sm);

  font-family: var(--mono);

  text-transform: uppercase;

}

20) Его заголовок:

.viz-after-cover h2 {

  margin: 0;

  font-family: var(--instrument);

  font-size: clamp(3rem, 10vw, 10rem);

  font-style: italic;

  line-height: 0.85;

}

21) Теперь большой блок параметров для смартфона. Просто скопируйте:

@media (max-width: 767px) {

  :root {

    --space-xs: 6px;

    --space-sm: 12px;

    --space-md: 18px;

    --space-lg: 36px;

  }

  .viz-cover-scroll {

    height: 420vh;

  }

  .viz-cover-prelude {

    top: var(--space-sm);

    left: var(--space-sm);

    right: var(--space-sm);

    font-size: 11px;

  }

  .viz-cover-sidecopy {

    position: absolute;

    left: var(--space-sm);

    right: var(--space-sm);

    z-index: 5;

    width: auto;

    min-width: unset;

    max-width: calc(100vw - var(--space-sm) * 2);

    gap: var(--space-xs);

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    font-size: 10px;

    line-height: 1.1;

    text-align: center;

    transform: none;

    transform-origin: center center;

  }

  .viz-cover-sidecopy-left {

    top: calc(var(--space-sm) + 28px);

    bottom: auto;

    left: var(--space-sm);

    right: var(--space-sm);

    transform: none;

  }

  .viz-cover-overlay-title {

  font-size: clamp(2rem, 8vw, 8rem);

    letter-spacing: 0;

    padding-top: 5px;

    padding-bottom: 5px

}

  .viz-cover-sidecopy-right {

    top: auto;

    bottom: calc(var(--space-sm) + 28px);

    left: var(--space-sm);

    right: var(--space-sm);

    transform: none;

  }

  .viz-cover-center-copy {

    width: calc(100vw - var(--space-md) * 2);

  }

  .viz-cover-intro-title {

    font-size: clamp(2.1rem, 12vw, 4.8rem);

    letter-spacing: 0;

    padding-top: 5px;

    padding-bottom: 5px

  }

  .viz-cover-intro-text {

    font-size: clamp(0.875rem, 3.5vw, 1rem);

  }

  .viz-cover-video-frame {

    width: 210px;

    height: 210px;

  }

  .viz-cover-overlay {

    padding: var(--space-md);

  }

  .viz-cover-overlay-text {

    font-size: clamp(0.95rem, 3.8vw, 1.05rem);

  }

  .viz-cover-menu {

    gap: var(--space-xs);

    font-size: 11px;

  }

  .viz-cover-progress {

    left: var(--space-sm);

    right: var(--space-sm);

    bottom: var(--space-sm);

  }

  .viz-cover-bottom-note {

    display: none;

  }

} 

JavaScript

22) Загрузите пять библиотек в репозиторий, конвертируйте ссылки и подключите в соответствующей части HTML. Библиотеки:

https://raw.githubusercontent.com/Dmitrykonn/designmodules/refs/heads/main/gsap.js

https://raw.githubusercontent.com/Dmitrykonn/designmodules/refs/heads/main/scrolltrigger.js

https://raw.githubusercontent.com/Dmitrykonn/designmodules/refs/heads/main/customease.js

https://raw.githubusercontent.com/Dmitrykonn/designmodules/refs/heads/main/visual.js

https://raw.githubusercontent.com/Dmitrykonn/designmodules/refs/heads/main/splittype.js

23) Таким же образом поступите с основным файлом:

https://raw.githubusercontent.com/Dmitrykonn/designmodules/refs/heads/main/visualizer.js

HTML 

24) Указываем стандартные теги

<html lang="en">

  <head>

    <meta charset="UTF-8"></meta>

    <title>Ваш заголовок</title>

25) Встраиваем шрифт. Если используете свой, замените ссылку и название шрифта в псевдоклассе root:

  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

26) Встраиваем стили.

27) Закрываем </head> и открываем  <body>

28) Открываете ваш класс из пункта 1.

29) Открываем классы обложки и текстового блока слева по вертикали:

  <div class="viz-cover-scroll" data-viz-cover="">

  <div class="viz-cover-sticky">

    <div aria-hidden="true" class="viz-cover-sidecopy viz-cover-sidecopy-left">

  <span>ваш текст</span>

  <span>ваш текст</span>

  <span>ваш текст</span>

  <span>ваш текст</span>

  <span>ваш текст</span>

    </div>

30) Повторяем тот же вариант для текста по вертикали справа:

    <div aria-hidden="true" class="viz-cover-sidecopy viz-cover-sidecopy-right">

   <span>ваш текст</span>

  <span>ваш текст</span>

  <span>ваш текст</span>

  <span>ваш текст</span>

  <span>ваш текст</span>

    </div>

31) Добавляем класс надписи вверху страницы:

    <div class="viz-cover-center-copy">

      <p class="viz-cover-overline">текст надписи вверху</p>

32) Класс основного заголовка:

      <h1 class="viz-cover-intro-title" data-split="">

       Ваш главный заголовок

      </h1>

33) Класс блока вступительного текста внизу в первом скролле:

      <p class="viz-cover-intro-text">

        текст в первом скролле.

      </p>

    </div>

34) Класс видео. Укажите ссылку на ваш подготовленный заранее ролик:

    <div class="viz-cover-video-frame">

      <video class="viz-cover-video" loop="" muted="" playsinline="" preload="metadata">

        <source src="ссылка на видео" type="video/mp4"></source>

      </video>

35) Классы перекрывающих слоев:

      <div class="viz-cover-dark-overlay"></div>

      <div class="viz-cover-overlay">

        <div class="viz-cover-date"></div>

       <div class="viz-cover-overlay-inner">

36) Повтор основного заголовка для 3D-сплита:

          <h2 class="viz-cover-overlay-title" data-split="">

            ваш основной заголовок

          </h2>

37) Текст в перекрывающем слое второго скролла поверх видео:

          <p class="viz-cover-overlay-text">

        текст перекрывающего слоя

          </p>

38) Блок меню с закладками для вкладок. Ниже вам нужно будет расставить пять абзацев текста и подключить к ним эти закладки:

          <div aria-label="Cover menu" class="viz-cover-menu">

            <a href="#chapter1">вкладка 1</a>

            <span>✦</span>

            <a href="#chapter2">вкладка 2</a>

            <span>✦</span>

            <a href="#chapter3">вкладка 3</a>

            <span>✦</span>

            <a href="#chapter4">вкладка 4</a>

            <span>✦</span>

            <a href="#chapter5">вкладка 5</a>

          </div>

39) Закрываем предыдущие теги классов:

        </div>

      </div>

    </div>

40) Указываем прогресс-бар:

    <div aria-hidden="true" class="viz-cover-progress">

      <div class="viz-cover-progress-bar"></div>

    </div>

41) Надпись над прогресс-баром справа:

    <div aria-hidden="true" class="viz-cover-bottom-note">

      <span>надпись справа</span>

      <span>↓</span>

    </div>

  </div>

</div>

42) Теперь цветной блок с текстом. Мелкий текст в абзаце, крупный текст в заголовке:

<section class="viz-after-cover" id="viztized-landing-highlight">

  <p>мелкий текст</p>

  <h2>крупный заголовок</h2>

43) Пост-заголовок, после крупного:

  <div class="viz-dev-notes">

    <h3>пост-заголовок</h3>

44) Теперь задайте не менее пяти абзацев с текстом и синхронизируйте с ними вкладки с первой по пятую по следующему принципу:

<p id="chapter1">первый абзац</p>

45) Добавьте шестой абзац, выполненный другим цветом;

46) Закрываем теги класса и секции с цветным блоком:

</div>

</section>

47) Встройте все библиотеки и основной JavaScript

48) Закройте ваш класс обертки страницы из пункта 1.

49) Закройте оставшиеся теги:

</body>

</html>

Если все верно, то ваша страница будет выглядеть похожим образом: https://konoplevdesign3.blogspot.com/p/3d-viz-cover.html

Ссылки на выполненное в вашем блоге задание принимаются в комментариях к данному посту до 16:00 26 октября.

РЕЗУЛЬТАТЫ:

Бакиров Александр - 5

Баранова Вероника - 5

Баянов Александр - 5

Ваулин Павел - 5

Глушенкова Анна - 5

Головина Алёна - 5

Горбунова Виктория - 5

Грищук Ульяна - 5

Исхакова Илона - 5

Касимова Кира - 5

Коломытцев Егор - 5

Кудряшова Екатерина - 5

Лысенко Влада - 5

Малкина Ольга - 5

Мартынова Ангелина - 5

Михина Полина - 5

Нефедова София - требуются исправления

Петрова Мария - 5

Петухова Елизавета - 5

Плюхина Екатерина - 5

Поликанов Андрей - 5

Попова Дарья - 5

Сурашева Дарина - 5

Суржик Анастасия - 5

Хатипова Милана - 5

Юдин Никита - 5