Как сделать такую прокрутку страницы?

Question

[Алексей Гончаров]

Как сделать такую прокрутку на странице? andrikanich.guru/freelance/2018/coffee

Там слева есть точки и при скролле страницы, страницы скроллится по этим точкам. Как такое сделать?
Заранее спасибо за помощь. Буду очень благодарен

Answer 1

[Олег]

Полотно экрана или контент-блок делим на одинаковые части, высотой с экран или, как на вашем сайте-примере - высотой, которую определил дизайнер. Каждой части присваиваем уникальный class или id - чтобы скрипт мог легко ориентироваться в них.
Для вычисления позиции прокрутки используется https://developer.mozilla.org/ru/docs/Web/API/Elem... (позиция элемента относительно верхнего левого угла окна браузера) + https://developer.mozilla.org/ru/docs/Web/API/Wind... (позиция вертикального скролла страницы).
Прокрутка осуществляется с помощью https://developer.mozilla.org/ru/docs/Web/API/Wind... (прокрутка окна браузера до координат).
На кнопки меню в виде точек слева добавляется прослушиватель click - которым крутится основная часть экрана
На событие wheel находим ближайший блок для прокрутки и делаем https://developer.mozilla.org/ru/docs/Web/API/Wind... до него.

З.Ы. когда-то видел клёвую 2D галерею в виде множества ячеек, размещённых как клетки карты. С параллакс-эффектом смотрится залипательно.

Comments

[Алексей Гончаров]

А нету библиотеки которая упростит это дело?

[Олег]

Алексей Гончаров, jquery + плагин jquery.scrollTo
https://github.com/flesler/jquery.scrollTo - гитхаб плагина
demos.flesler.com/jquery/scrollTo - демка

[Алексей Гончаров]

Олег, спасибо. А прямо полностью которая упростит по типу swipe.js есть? Swipe js просто не подходит там нету того функционала

[Алексей Гончаров]

Олег, эта 2d галерея как вы говорите тоже делается по вашей инструкции?

[Олег]

Алексей Гончаров, в другом ответе некий swiper.js предлагают

[Алексей Гончаров]

Олег, знаю я оттуда узнал это xd

[Олег]

Алексей Гончаров, как на демке demos.flesler.com/jquery/scrollTo

[Алексей Гончаров]

Олег, а есть название у такой прокрутки? Про которую я спрашиваю как сделать

[Олег]

Алексей Гончаров, называется плавной прокруткой (smooth scroll)
Вот ещё примеры https://css-tricks.com/snippets/jquery/smooth-scro...

[Алексей Гончаров]

Олег, там по кнопке скроллится, а на сайте в котором я показал, там плавная прокрутка мышью

[Олег]

Алексей Гончаров, называл ли кто этот вид слайдеров - вот чего не знаю, того не знаю.

[Олег]

Для slick слайдера вон сделали
jsfiddle.net/umv0Lz7k/1

[Олег]

Олег, поблочной прокруткой называется это.

[Олег]

Алексей Гончаров, https://github.com/alvarotrigo/fullPage.js - вот то, что вам нужно. Демки на странице.

[Алексей Гончаров]

Олег, ооооо. Вот это я и раньше ждал. Просто на сайте в котором я показал используются разные библиоетки velocity, mousewheel. И я незнал какая за что отвечает. Спасибо

[Алексей Гончаров]

Олег, смотрите там еще есть при скролле анимация отдаления. Объекты отдаляются и приближаются новые при скролле. А это как сделать? С тем что кофе передвигается с помощью мыши я понял как делать. А что быть с анимацией которая отдаляет элементы на страницы и приближает следующие при скролле?

[Олег]

<div class="motions-block active"></div> - блокам с классом motions-block на js добавляется класс active и происходит анимация

Происходит с помощью свойства transition
Изначальные стили элемента

.motions-block {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

А с .active уже так

.motions-block.active {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

Меняется свойство scale (масштаб) с 0 до 1

[Олег]

Без .active

C .active - начинается увеличение transform до scale(1)

Answer 2

[kryamk]

Можно рассмотреть вариант с swiper.js