Как сделать плавный скролл в wot
Обновлено: 08.07.2024
Одно из самых частых действий пользователей в игре World of Tanks, помимо стрельбы и движения танка — переключение режимов прицеливания. Не удивительно, что и для этого игрового момента существует возможность настройки с помощью модов.
Установка:
Текущая версия конфига: 1.38.4 для WOT 1.4.0.1 от 12.02.2019.
PMOD это комплексная модификация, это не модпак, это один единственный мод. Он позволяет улучшить геймплей, и предоставляет много новых возможностей, ранее недоступных игроку.
В стандартной конфигурации мод почти ничего не делает, изменения по сравнению с чистым клиентом:
* Немного увеличено удаление камеры в аркадном и артиллерийском режимах.
Для настройки мода вам не нужны знания в программировании, или же танцы с бубном.
Все что вам нужно это капля желания и текстовый редактор Notepad++.
Все настройки мода находятся в файлах внутри папки: mods/configs/pmod (pmod.json - корневой файл)
Внутри файлов вас ждет подробное описание всех параметров и их стандартные значения.
В бою World of Tanks зачастую важная каждая деталь и каждая секунда времени. Случайный переход из снайперского режима в аркадный или обратно поворотом колесика мышки может помешать вовремя прицелиться и не успеть сделать решающий выстрел.
В чистом клиенте игры, кратность приближения снайперского и аркадного прицела меняется поворотом колесика мышки. Это же действие переключает вас между режимами стрельбы при достижении максимального приближения в аркадном или минимальной кратности в снайперском. Это не всегда удобно и уместно. Например, в ближнем бою стоит немного больше чем нужно повернуть колесико мышки и прицел перейдет в снайперский режим, который на малых расстояниях только мешает целиться.
Мод NoScroll запрещает переключение с помощью мыши и оставляет переход между режимами прицеливания только по кнопке Shift. При вращении колесика, кратность аркадного или снайперского режима по достижении значения переключения просто останется в этом значении без перехода между режимами.
На видео ниже показана работа мода. Видно, что игрок не тратит время на последовательное изменение кратности прицела для перехода из аркадного в снайперский режим и обратно:
В прошлом году, создавая страницу продукта FilePond, я наткнулся на API scrollIntoView. Это удобный метод указывает браузеру прокрутить элемент в окне просмотра.
Эта статья была изначально опубликована в моем личном блоге
API scrollIntoView можно назначить анимацию прокручиваемой части, добавив свойство поведения в объект scrollIntoViewOption.
Я быстро запрыгнул на своего JavaScript-коня и написал крошечный скрипт для автоматического определения щелчков на якорях, чтобы браузер оживлял переход к элементу привязки. Этот переход действительно может дезориентировать пользователя, поэтому анимация этого процесса значительно улучшит UX.
Оказывается, есть свойство CSS scroll-behavior , которому нужно задать параметр smooth . Похоже на awesome: yes-please . Если мы хотим установить плавную прокрутку контейнеру, мы просто можем установить свойство scroll-behavior и все готово.
Вот мое новое демо, где я использую только лишь CSS
Прежде чем мы начнем сходить с ума и пихать это на все сайты давайте подумаем о нескольких моментах.
Значение расстояния прокрутки
Если есть большое расстояние для перемещения, Firefox пропустит контент, чтобы ограничить время прокрутки, в то время как Chrome, прокручиваясь на максимальной скорости просто займет время, чтобы добраться до цели.
Мы могли бы использовать Smart CSS для обнаружения длинных страниц и условно применить стиль плавной прокрутки.
Легкость просмотра
Пользователи просто могут заскучать при такой анимации и захотеть спать. Решение здесь будет такое - обернуть свойство CSS в prefers-reduced-motion медиа-запрос. Но, к сожалению, Chrome не поддерживает это свойство. Safari поддерживает, но Safari не поддерживает плавную прокрутку.
Заключение
При выборе новой функциональности мы не должны сразу бежать за JavaScript. Сначала можно быстро выяснить, можно ли это сделать и с помощью CSS. Свойство scroll-behavior может быть хорошим улучшением UX, но обязательно отключите его на очень длинных страницах и дайте пользователю возможность отключить его, чтобы сохранить легкое чтение ваших страниц.
Как вам известно, по нажатию на якорную ссылку нас перекидывает на ту часть страницы с которой эта ссылка связана. Сам переход происходит мгновенно и этот нюанс мы с вами поправим.
Для того чтобы реализовать плавный переход после нажатия по ссылке, нам необходимо будет написать небольшой скрипт, который отследит момент нажатия, выяснит на какой блок ссылается якорь и плавно прокрутит страницу до нужного места. Но давайте обо всем по порядку 🙂
1. Структура меню с якорными ссылками
Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока
, внутренняя ссылка на этот блок будет иметь следующий вид:
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:
Каждая ссылка ссылается на соответствующий блок:
2. Скрипт плавного перехода к нужному блоку
Итак нам нужно обработать нажатия по ссылкам в нашем меню, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.
Каждую строку скрипта я прокомментировал, если остались вопросы пиши в комментариях к посту – помогу 😉
Разработаем следующее: после клика по ссылке будет происходить плавный скролл до элемента на JavaScript. Реализуем это без использования плагинов, сначала при помощи библиотеки jQuery, а затем на чистом JavaScript
Плавный скролл до якоря.
Наш HTML файл получится примерно такой.
Атрибут href указывает к какому элементу необходимо осуществить переход.
1. Плавный скролл с используя jQuery
Чтобы добавить плавность перехода для необходимого элемента, просто добавьте навигации класс scrollto
Изменить скорость скролла можно поменяв значение duration
3. Плавный скролл на чистом JavaScript - метод Element.scrollIntoView()
Будем использовать метод scrollIntoView(). Это стандартный нативный метод JavaScript.
У метода scrollIntoView() есть недостаток.
Если у нас будет навигация position: fixed , то нам необходимо добавить отступ сверху на x-пикселей , т.е. высоту навигации .
Для решения данной задачи отлично подойдёт метод Window.scrollBy() .
4. Плавный скролл на чистом JavaScript - метод Window.scrollBy()
Метод Window.scrollBy() имеет параметр top в котором мы укажем количество пикселей, на сколько нам необходимо прокрутить страницу.
От общей высоты документа отнимем высоту навигации и получим необходимое смещение в пикселях по оси Y .
Если нужен отступ сверху, укажите class элемента (навигации), чтобы вычислить его высоту. Если не нужен отступ, переменной topOffset присвойте значение 0 .
Читайте также: