ЖМК-301/2. Веб-дизайн. Практическое занятие №3. Сложный Flat-дизайн cо сценарным скроллингом

Вам нужно создать страницу, реализованную по принципам сложного плоского дизайна с динамическими объектами. Для этого вам потребуется:

- одна вращающаяся иллюстрация для стартового блока на прозрачном фоне в формате .png. Загрузите ее в репозиторий;

- не менее пяти иллюстраций квадратной формы одинакового (или примерно одинакового) размера. В моем примере - 600х600рх. Загрузите их в репозиторий;

- не менее пяти абзацев текста. Каждый абзац соответствует одной из иллюстраций;

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

- фоновый цвет страницы. Используйте светлый фон, чтобы на нем были хорошо видны темные буквы;

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

Концепция десктоп-версии:

1 - интерактивное меню навигации

2 - раскрывающаяся и кликабельная вкладка при наведении курсора

3 - текст абзаца

4 - иллюстрация

5 - цветная врезка того же цвета, что и вкладка

Концепция мобайл-версии:

1 - интерактивное меню навигации

2 - кликабельная вкладка

3 - текст абзаца

4 - иллюстрация

5 - цветная врезка того же цвета, что и вкладка

В моем примере десять содержательных доменов дизайна (вкладка + абзац текста + картинка + цветная врезка). У вас их должно быть не менее пяти.

Для создания проекта вам потребуется:

1) CSS с параметрами стилей;

2) JavaScript библиотеки (3) с готовыми функциями;

3) JavaScript с логикой работы динамических объектов

4) HTML с подключенными вышеперечисленными файлами, опубликованный в вашем блоге.

Рекомендуемая тема: Notable Light с отключенными фоновыми элементами.

I CSS

1) Сначала задаем шрифт, интерфейс скроллинга и отображение бегунка справа:

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,900');

::-webkit-scrollbar {

  width: 13px;

  

}

::-webkit-scrollbar-track {

  -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;

  border: 11px solid transparent;

}

::-webkit-scrollbar-thumb {

  background: #646464;

  -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);

}

::-webkit-scrollbar-thumb:hover {

  background: #aaaaaa;

}

::-webkit-scrollbar-thumb:active {

  background: #888;

  -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);

}

2) Теперь указываем базовые селекторы страницы, прячем нижний горизонтальный скроллбар. В селекторе body укажите цвет фона всей страницы:

      

html {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

}

  body {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

    background-color: фоновый цвет страницы;

  }     

    

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  text-decoration: none;

  list-style: none;   

}

      

3) Начинаем с параметров для смартфонов. Специально помечаю их в коде вступительным комментарием чтобы из было легче найти при необходимости правки. Сначала идут параметры навигационной панели:

/*параметры для смартфонов*/

@media only screen and (max-width:480px) {

ul {

  position: fixed;

  display: block;

  margin-left: 20px;

  margin-top: 35vw;

  z-index: 3;

}

  

.nav {

  position: fixed;

  display: block;

  font-family: 'Montserrat', sans-serif;

  font-size: 12px;

  transform: rotate(-90deg);

  margin-left: 0px;

  margin-top: 15vw;

  letter-spacing: 0.2vw;

  z-index: 3;

}

  

li {

  content:'';

  height: 40px;

  width: 5px;

  transition: width 0.3s ease-in-out;

}  

  

li:hover  {

   transition: width 0.3s ease-in-out;

   width: 8.3vw;

}

4) Теперь нужно задать идентификаторы каждой вкладки на этой панели. У вас их должно быть не менее пяти. Сначала указывается имя - оно у всех разное, затем - цвет. Лучше всего если вы их назовете по номерам, например, так:

  

#one {background-color:#4169E1;}

#two {background-color:#302c2d;}

и так далее. Создав все вкладки, сохраните эту часть кода отдельно - ее нужно будет продублировать и для десктоп-версии.

5) Теперь задаем параметры цветной врезки:

  

section {

  position: relative;

  display: block;

  width: 100%;

  height: 100vh;

  overflow: hidden;

}

  

section .cover {

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  z-index: 1;

}

6) Расположение и отображение стартовой картинки:

  

section .cover img #start{

  position: absolute;

  display: block;

  min-width: 150%;

  min-height: 150%;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

7)  Основного контента, текста вверху и параметров выравнивания и движения объектов:

  

section .content {

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  z-index: 2;

}

  

section .text {

  width: 100%;

}

  

.leveler {

  position: relative;

  left: 50%;

  top: 30%;

  -webkit-transform: translateZ(0px) translateX(-50%) translateY(-50%);

  transform: translateX(-50%) translateY(-50%);

}

  

#start {

  position: absolute;

  padding-top: 70vw;

  margin-left: 15vw;

  width: 70vw;

  overflow: hidden;

  -webkit-animation: rotation 40s infinite linear;

}

  

@-webkit-keyframes rotation {

from {

-webkit-transform: rotate(0deg);

}

to {

-webkit-transform: rotate(359deg);

}

}

  

8) Указываем размер картинок, заголовочной части, текста над ней и параметров их движения:

img {

  width: 100%;

}

  

#title {

  font-family: 'Montserrat', sans-serif;

  font-size: 9vw;

  margin-top: 31vw;

  margin-left: 17vw;

  line-height: 6vw;

  color: #302c2d;

  opacity: 1;

  animation: move 5s

}

  

@keyframes move {

    from {

      margin-top: 13vw;

      opacity: 0.2;

    }

     to {

      margin-top: 31vw;

      opacity: 1;

    }

  }

  

.uppertext {

  font-family: 'Montserrat', sans-serif;

  font-size: 2.9vw;

  letter-spacing: 0.1vw;

  margin-top: 5vw;

  margin-left: 17vw;

}

 @keyframes expand {

    from {

      width: 0vw;

      opacity: 0;

    }

     to {

      width: 28vw;

      opacity: 1;

    }

  }

9) Теперь свойства скроллинга, показа иллюстраций и абзаца с текстом:

  

.scroll {

  position: relative;

  font-family: 'Montserrat', sans-serif;

  font-size: 3vw;

  font-weight: 900;

  letter-spacing: 0.3vw;

  color: #302c2d;

  margin-left: 30vw;

  margin-top: 70vw;

}

  

.square {

  position: relative;

  content:'';

  float: right;

  height: 120vh;

  width: 100vh;

}

  

.paragraph {

  width: 70vw;

  margin-left: 18vw;

  margin-top: 30vw;

  font-family: 'Montserrat', sans-serif;

  font-size: 2.8vw;

  line-height: 3.4vw;

  letter-spacing: 0.3vw;

  color: black;

}

10) Это градиент в первой цветной врезке. Укажите ваши цвета. первый цвет в списке = основной цвет в первой вкладке меню:

  

 #one2 {

  background: linear-gradient(to bottom right, цвет1, цвет2);

}

11) Добавляем класс постера для показа картинки:

  

.poster {

  width: 70vw;

  margin-top: 4vw;

  margin-left: 18vw;

  z-index: 1;

}

12) Задаем цвет шрифта в мобильной версии проекта, для тех случаев когда у вас будет темный фон врезки и ей нужен контрастный светлый шрифт:

  

#mobiletext {

    color: светлый цвет;

  }  

}

13) Параметры мобайла закончились. Теперь параметры для десктопа. Также начинаю с пометки чтобы легче было найти эти параметры в финальном коде. Перечень параметров похож на мобайл, пояснения даю только в пунктах, где вам нужно добавить свои значения:

      

/*параметры для десктопа*/

@media only screen and (min-width:990px) {

  

ul {

  position: fixed;

  display: block;

  margin-left: -200px;

  margin-top: -6vw;

  z-index: 3;

}

  

.nav {

  position: fixed;

  display: block;

  font-family: 'Montserrat', sans-serif;

  font-size: 0.85vw;

  transform: rotate(-90deg);

  margin-left: -245px;

  margin-top: -12vw;

  letter-spacing: 0.2vw;

  z-index: 3;

}

  

li {

  content:'';

  height: 40px;

  width: 5px;

  transition: width 0.3s ease-in-out;

}  

  

li:hover  {

   transition: width 0.3s ease-in-out;

   width: 80px;

}

  

14) Скопируйте идентификаторы ваших вкладок из пункта 4. Их порядок и набор цветов должен быть одинаковым и в мобайле и в десктопе.

15) Дальнейшие параметры стилей идут без изменений:

section {

  position: relative;

  margin-left: -10px;

  display: block;

  width: 120%;

  height: 60vw;

  overflow: hidden;

}

  

section .cover {

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  z-index: 1;

}

  

section .cover img #start {

  position: absolute;

  display: block;

  min-width: 100%;

  min-height: 100%;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

  

section .content {

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  z-index: 2;

}

  

section .text {

  width: 100%;

}

  

.leveler {

  position: relative;

  left: 50%;

  top: 30%;

  -webkit-transform: translateZ(0px) translateX(-50%) translateY(-50%);

  transform: translateX(-50%) translateY(-50%);

}

  

#start {

  position: absolute;

  padding-top: -9vw;

  margin-left: -5px;

  width: 38vw;

  overflow: hidden;

  -webkit-animation: rotation 180s infinite linear;

}

  

@-webkit-keyframes rotation {

from {

-webkit-transform: rotate(0deg);

}

to {

-webkit-transform: rotate(359deg);

}

}

  

img {

  width: 100%;

}

  

#title {

  position: fixed;

  font-family: 'Montserrat', sans-serif;

  font-size: 4.31vw;

  margin-top: 25%;

  margin-left: 2%;

  line-height: 2.63vw;

  color: #302c2d;

  opacity: 1;

  animation: move 3s

}

  

@keyframes move {

    from {

      margin-left: 8vw;

      opacity: 0.3;

    }

     to {

      margin-left: 10vw;

      opacity: 1;

    }

  }

  

.uppertext {

  font-family: 'Montserrat', sans-serif;

  font-size: 1vw;

  letter-spacing: 0.25vw;

  margin-top: 2.63vw;

  margin-left: 10.1vw;

}

  

 @keyframes expand {

    from {

      width: 0vw;

      opacity: 0;

    }

     to {

      width: 13.68vw;

      opacity: 1;

    }

  }

  

.scroll {

  position: relative;

  font-family: 'Montserrat', sans-serif;

  font-size: 0.80vw;

  font-weight: 900;

  letter-spacing: 0.1vw;

  color: #302c2d;

  margin-left: 45vw;

  margin-top: 20vw;

}

  

.square {

  position: relative;

  content:'';

  float: left;

  margin-left: 550px;

  height: 120vh;

  width: 300vh;

}

  

.paragraph {

  float: left;

  width: 29.28vw;

  margin-left: 25px;

  margin-top: 4vw;

  font-family: 'Montserrat', sans-serif;

  font-size: 1.31vw;

  line-height: 2vw;

  letter-spacing: 0.2vw;

  color: black;

}

16) Цвета градиента продублируйте из пункта 10:

#one2 {

  background: linear-gradient(to bottom right, цвет1, цвет2);

}

17) Добавляем параметры постера. Здесь укажите цвет тени, отбрасываемой иллюстрациями на цветную врезку. В моем примере используется тень того же цвета, что и фон страницы. На данном пункте версия для десктопа завершается:

.poster {

  overflow: hidden;

  width: 350px;

  margin-top: 6vw;

  margin-left: 525px;

  z-index: 1;

 filter: drop-shadow(4px 10px 15px цвет тени);

}

}

II Библиотеки JavaScript

18) Вам нужно добавить в проект три библиотеки, отвечающие за исполнение динамических объектов. Для этого каждую из библиотек необходимо скачать, открыть в Notepad++, сохранить отдельно как .js файл. Затем загрузить в репозиторий и конвертировать через Githack. На выходе у вас будет три ссылки для встраивания. Встраивать библиотеки нужно будет в том же порядке, в котором они приведены ниже.

При сбоях при встраивании, библиотеки можно также поставить в HTML напрямую, понимая, что они тогда превратят ваш код в чудовище.

Библиотеки: 

Первая: https://raw.githubusercontent.com/Dmitrykonn/locals/refs/heads/main/jquery1min.js 

Вторая: https://raw.githubusercontent.com/Dmitrykonn/locals/refs/heads/main/smoothscroll.js 

Третья: https://raw.githubusercontent.com/Dmitrykonn/locals/refs/heads/main/scrollaxlib.js

III Ваш JavaScript

19) То же самое нужно сделать с динамическим сценарием - сохранить его как .js файл. Он будет встраиваться после всех библиотек. Подробнее о встраивании ниже в HTML разделе.

jQuery(document).ready(function($){

  'use strict';

  $.Scrollax();

});

IV HTML

20) Начинаем с указания традиционных тегов и заголовка:

<!--DOCTYPE html-->

 <head>

    <meta charset="UTF-8">

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

21) Встраиваем CSS

22) Закрываем верхнюю часть страницы, открываем основную, указываем масштаб:

</head>

<body>

<html>

<head>

 <meta name="viewport" content="width=device-width, initial-scale=1">

23) Создаем навигационное меню. В классе навигации указываем отображаемое название (в моем примере - АЛЬБОМЫ). Напоминаю, что у вас в нем не менее пяти вкладок. Вы уже описывали его в CSS. Поэтому просто продублируйте имена вкладок в анкоре (выделил красным), в адресации нужно поставить закладки на абзацы - их имя должно начинаться с # (выделил голубым). У меня в примере - альбомы по номерам, у вас может быть что угодно:

<div class="nav">АЛЬБОМЫ</div>

    <ul>

   <a href="#album1"><li id="one"></li></a>

   <a href="#album2"><li id="two"></li></a> 

    </ul>

24) Теперь секция с заголовком, стартовой картинкой и описанием. Привожу ее полностью из моего примера, чтобы вы могли сопоставить расположение текста. Используйте свой текст и первую картинку на прозрачном фоне (ссылка из репозитория):

<section class="special" data-scrollax-parent="true" id="ntr">

  <div class="cover" id="start" data-scrollax="properties: { translateY: '30%', 'opacity': 1.5 }">

   <img src="ссылка на первую картинку"></div>

  <div class="content"> 

    <div class="text leveler">

      <div data-scrollax="properties: { 'translateY': '150%', 'opacity': 1.5 }">

       <div id="title">

        Катал Кохлан:<br><br>

       10 альбомов<br><br>рассерженного гения

       </div>

       <div class="uppertext">знаковые релизы с 1990 по 2022 год</div> 

       

       <div class="scroll">краткая              история</div> 

      </div>

     </div>

    </div>

   </section>

25) А дальше идут секции, состоящие из абзаца, картинки и цветной врезки. У вас их не менее пяти. Ниже приведено два примера, ключевое отличие между которыми - разный цвет шрифта. Если в мобайле у вас темный текст накладывается на светлый фон, то используется стандартная секция:

<section class="special" data-scrollax-parent="true" id="album1">

  <div class="cover" data-scrollax="properties: { translateY: '30%' }">

 <div class="square" id="one2"></div>

  </div>

  <div class="content">

    <div class="text leveler">

      <div data-scrollax="properties: { 'translateY': '150%', 'opacity': 1.5 }">

        <div class="paragraph">Ваш абзац с текстом.

</div>

        <div class="poster">

        <img src="ссылка на квадратную картинку">

        </div>

      </div>

    </div>

  </div>

</section>

Обратите внимание, что в секции вы указываете идентификатор из меню и закладку из него же (помечены голубым). У всех секций они разные и идут в той же последовательности, что и вкладки меню. 

26) Если у вас темный фон и нужен светлый текст для мобайла, то в секции будет дополнительный идентификатор mobiletext (помечен зеленым) и целиком секция будет выглядеть так:

<section class="special" data-scrollax-parent="true" id="album2">

  <div class="cover" data-scrollax="properties: { translateY: '30%' }">

 <div class="square" id="two"></div>

  </div>

  <div class="content">

    <div class="text leveler">

      <div data-scrollax="properties: { 'translateY': '150%', 'opacity': 1.5 }">

        <div class="paragraph" id="mobiletext">Ваш абзац с текстом.

</div>

        <div class="poster">

        <img src="ссылка на квадратную картинку">

        </div>

      </div>

    </div>

  </div>

</section>

Now remove all css classes and js files

27) Соберите последовательно все секции, укажите в них верные ссылки на картинки, разные абзацы текста, идентификаторы из меню и - если нужно - идентификаторы цвета шрифта для мобайла. Закройте теги:

</body>

</html>

28) Встройте библиотеки JavaScript (3) и ваш JavaScript (1).

Если вы встраиваете их из репозитория, то каждый файл встраивается так:

<script src="конвертированная ссылка из githack"></script>

Если напрямую, то каждый файл встраивается напрямую в теле отдельного тега <script></script>

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

</body>

</html>

30) Опубликуйте задание в своем блоге. Если все верно, то ваш проект будет выглядеть похожим образом: https://konoplevdesign3.blogspot.com/p/flat-expanded.html

Проверьте результат с десктопа и с мобайла (в вертикальной ориентации смартфона). 

Ссылки на выполненное задание принимаются в комментариях к этому посту для ЖМК-302 до 17:00 20 февраля, для ЖМК-301 до 17:00 24 февраля.

РЕЗУЛЬТАТЫ:

Акимкина Олеся - 4

Ананина Виктория - 5

Андрюк Анастасия - 5

Ахрарова Виктория - 5

Власов Максим - 5

Гайфуллина Анна - 5

Гостева Полина - 5

Григорьева Екатерина - 5

Добышева Таисия - 5

Жукова Виктория - 5

Зубко Сабина - 5

Ишмекеева Елизавета - 5

Климович Мария - 5

Кобякова Дарья - 5

Козилова Елизавета - 5

Корнилова Полина - 5

Куликова Мария - 5

Мамонтова Мария - 5

Маханек Вера - 5

Митюнин Андрей - 5

Новая Валентина - 4

Орлова Арина - 5

Панченко Валерия - 5

Слободская Елизавета - 5

Султанова Ирина - 5

Хайруддинов Тимур - 5

Цветкова Виктория - 5

Чугунова Елизавета - 5

Шабалина Виктория - 5

Широкоумова Полина - 5