Найти в Дзене

Веб страница с анимацией ее прокрутки. Часть 1.

Сегодня мы начнем новый проект в котором основной целью станет применение javascript на веб странице. Но сначала мы подготовим основную структуру. Для этого создайте новую веб страницу и добавьте в нее представленную ниже (на скриншоте) структуру и контент. Создание стилей Теперь перейдем в стадию добавления стилей и для этого создайте тег style внутри тега head в html файле. *Мы специально не разделяем стили в отдельный файл, так как их количество сильно ограничено. В будущем мы обязательно раскроем тему структурного разделения ваших веб проектов. Если вы хотите узнать как правильно формировать файловую структуру проектов, а также как использовать препроцессоры и методологию БЭМ, то на курсе веб разработчика от школы программирования для детей КИДКОД мы раскрываем эти темы во время занятий. С промо кодом "дзен" вы получите 25% скидку на первый месяц обучения. Сначала объявим основные стили для селектора - body: Теперь переходим к созданию стилей для секций: Далее объявляем стили для "
Оглавление
Вот такую красоту мы с вами сделаем!
Вот такую красоту мы с вами сделаем!

Сегодня мы начнем новый проект в котором основной целью станет применение javascript на веб странице. Но сначала мы подготовим основную структуру. Для этого создайте новую веб страницу и добавьте в нее представленную ниже (на скриншоте) структуру и контент.

  • top-section - Основная секция веб страницы
  • header - Текстовый компонент основной секции
  • bottom-section - Вспомогательная секция. Она нужна, чтобы обеспечить вертикальное перемещение для будущей анимации полосы прокрутки веб страницы.
  • scroll-bar - Будущая полоска прокрутки.
Структура и контент веб страницы
Структура и контент веб страницы

Создание стилей

Теперь перейдем в стадию добавления стилей и для этого создайте тег style внутри тега head в html файле. *Мы специально не разделяем стили в отдельный файл, так как их количество сильно ограничено. В будущем мы обязательно раскроем тему структурного разделения ваших веб проектов. Если вы хотите узнать как правильно формировать файловую структуру проектов, а также как использовать препроцессоры и методологию БЭМ, то на курсе веб разработчика от школы программирования для детей КИДКОД мы раскрываем эти темы во время занятий. С промо кодом "дзен" вы получите 25% скидку на первый месяц обучения.

Сначала объявим основные стили для селектора - body:

  • margin - Убираем внешний отступ.
  • overflow-x - Скрываем горизонтальный бар прокрутки веб страницы.
Общие стили веб страницы
Общие стили веб страницы

Теперь переходим к созданию стилей для секций:

  • height - Высота секции 100 viewport height (высота видимой части экрана браузера)
Множественные селекторы используют знак "запятой"
Множественные селекторы используют знак "запятой"

Далее объявляем стили для "верхней" секции:

  • background-image - Свойство определяющее фоновое изображение блока. Далее вы найдете картинку для фонового изображения.
  • background-position - Позиционирование изображения по центру блока.
  • background-repeat - Запрещаем "дублирование" изображения.
  • background-size - Размер фонового изображения будет равен размеру блока.
  • display - Изменяем способ отображения контента внутри блока для отображения его по центру секции.
  • justify-content - Выравнивание по центру основной оси (оси-х)
  • align-items - Выравнивание по центру пересекающей оси (оси-у)
Свойства "верхней" секции
Свойства "верхней" секции

Фоновое изображение вы можете скачать напрямую от сюда.

Фоновое изображение
Фоновое изображение

Объявляем стили для "нижней" секции. Так как она используется в качестве декоративного элемента, то мы изменим лишь цвет фона.

"Нижняя" секция
"Нижняя" секция

Осталось определить свойства для текстового блока:

  • padding - Внутренний отступ.
  • border - Граница блока состоит из 3х параметров: толщина, стиль и цвет границы.
  • text-align - Выравнивание текста внутри блока.
  • font-family - Изменения шрифта.
  • font-size - Размер шрифта.
  • font-weight - Жирность шрифта.
  • color - Цвет шрифта.
Свойства текстового блока
Свойства текстового блока

В качестве результата вы увидите две секции - основная с тестом и вспомогательная.

Промежуточный результат
Промежуточный результат

На следующем уроке мы добавим и анимируем с помощью javascript полоску прокрутки веб страницы. А пока вы ждете новый урок, записывайтесь на бесплатное пробное занятие в школу программирования для детей КИДКОД.

Продолжение на следующем уроке