Задать вопрос

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

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

Там слева есть точки и при скролле страницы, страницы скроллится по этим точкам. Как такое сделать?
Заранее спасибо за помощь. Буду очень благодарен
  • Вопрос задан
  • 510 просмотров
Подписаться 2 Средний Комментировать
Решения вопроса 1
@lolzqq
HTML,CSS,JS,PHP
Полотно экрана или контент-блок делим на одинаковые части, высотой с экран или, как на вашем сайте-примере - высотой, которую определил дизайнер. Каждой части присваиваем уникальный 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 галерею в виде множества ячеек, размещённых как клетки карты. С параллакс-эффектом смотрится залипательно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
kryamk
@kryamk
Можно рассмотреть вариант с swiper.js
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы