Bootstrap 4 сниппеты: первый экран (first-screen)

6 минут на чтение

Продолжим верстку ранее начатого макета на Bootstrap 4, подробнее здесь. Рассмотрим как разбить макет на секции, оформить их и сделать более удобной прокрутку на сайте.

Техническое задание

Функционал:

  • плавная прокрутка

Требования к верстке:

  • горизонтальные скосы в начале и конце каждой секции
  • тонированный бэкграунд

Верстка

Тонированный бэкграунд

Для того, чтобы сделать затемненный задний фон необходимо два блока:

  • разметка следующая:
  • .section – блок обертка для всей секции,в качестве фона устанавливаем и позиционируем изображение
  • .section-content – блок, расположенный внутри .section, должен быть абсолютно позиционирован относительно родителя и растянут по ширине и высоте на 100%, в качестве фона – черный цвет с прозрачностью на ваш выбор

 

Горизонтальные скосы секции

Для оформления горизонтального скоса после блока с содержимым секции вставляем пустой блок .slashes:

Стили прописываем не для блока, а для псевдоэлемента after данного блока. Устанавливаем высоту блока, для наклона используем свойство  transform по оси Y, в сочетании со смещением координат точки, относительно которой происходит трансформация, с помощью свойства transform-origin, добиваемся нужного эффекта.  Для изменения направления вращения меняем знак значения свойства трансформации skewY.

Плавная прокрутка

Плавную прокрутку реализуем с помощью плагина jQuery custom content scroller.  Со всеми возможными настройками можно ознакомиться на сайте разработчика. 

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

Пример #1

See the Pen WOV shippets BS firstscreen 1 by Paul (@1110000) on CodePen.

Facebook Vk Ok Twitter Telegram

Похожие записи:

С учетом возрастания количества, а в некоторых случаях преобладания, на сайтах посетителей, заходящих с мобильных устройств, адаптивное меню становится обязательной составляющей сайта. Bootstrap 4 включает отличный инструмент для создания  адаптивного меню – к...
Динамически переключаемые вкладки являются очень удобным элементом навигации, хорошей альтернативой карусели в некоторых случаях.  Они позволяют разместить большое количество контента в пределах одной секции, сгруппировав его по тематике или другим параметрам....
Всплывающие сообщения являются аналогом push-уведомлений, точнее имитируют их работу. Сообщения появляются (“всплывают”) поверх остального контента, применяются для вывода различного рода информации, или для оповещения пользователей о состоянии текущих процесс...