Bootstrap 4 сниппеты: плавная прокрутка

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

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

Функционал:

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

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

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

Верстка

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

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

разметка следующая:

<div class="section"> <div class="section-content"> //содержимое секции </div> </div>

1
2
3
4
5

<div class="section">
   <div class="section-content">
      //содержимое секции
   </div>
</div>
.section – блок обертка для всей секции,в качестве фона устанавливаем и позиционируем изображение

.section{ background: url("Url картинки"); background-size: cover; background-position: right; }

1
2
3
4
5

.section{
  background: url("Url картинки");
  background-size: cover;
  background-position: right;
}
.section-content – блок, расположенный внутри .section, должен быть абсолютно позиционирован относительно родителя и растянут по ширине и высоте на 100%, в качестве фона – черный цвет с прозрачностью на ваш выбор

.section:nth-of-type .section-content{ height: 100%; width: 100%; background-color: rgba(0,0,0,0.6); position: absolute; }

1
2
3
4
5
6

.section:nth-of-type .section-content{
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.6);
  position: absolute;
}

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

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

<div class="section"> <div class="section-content"> //содержимое секции </div> <div class="slashes"></div> </div>

//содержимое секции

</div>

</div>

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

.slashes:after{ background: #fff; content: ''; display: block; height: 50px; left: 0; position: absolute; right: 0; transform: skewY(-1.4deg); transform-origin: 0px; }

.slashes:after{

background: #fff;

content: '';

display: block;

height: 50px;

left: 0;

position: absolute;

right: 0;

transform: skewY(-1.4deg);

transform-origin: 0px;

}

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

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

$('.content-wrapper').mCustomScrollbar({ theme: "dark-thin", //цветовая схема scrollInertia:1000, //плавность анимации scrollbarPosition: "outside", // положение полосы прокрутки mouseWheel:{ scrollAmount: 800 //величина прокрутки в пикселях }, callbacks:{ whileScrolling:function(){ //функция, вызываемая при прокрутке myCustomFn(this); }, } });

$('.content-wrapper').mCustomScrollbar({

theme: "dark-thin", //цветовая схема

scrollInertia:1000, //плавность анимации

scrollbarPosition: "outside", // положение полосы прокрутки

mouseWheel:{

scrollAmount: 800 //величина прокрутки в пикселях

callbacks:{

whileScrolling:function(){ //функция, вызываемая при прокрутке

myCustomFn(this);

}

});

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

Пример #1

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

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