Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно пролистывать. Центральная карточка должна быть выделена каким-то образом, и на ней будет показана дополнительная информация.
Первоначальная установка была очень простой. В качестве html-файла будет использоваться временная шкала div, которая будет содержать несколько карточек с информацией.
<div id="Timeline"> <div class="box"/> <div class="box"/> <div class="box"/> <div class="box"/> <div class="box"/> </div>
.box { width: 500px; height: 750px; background-color: white; }
Теперь нужно отцентрировать эти карточки в шкале времени. Это было сделано с помощью простого CSS, но с использованием свойства translate для вертикального центрирования, так как в будущем именно это я буду использовать для прокрутки различных элементов временной шкалы.
body{ overflow: hidden; background-color: black; } #Timeline { display: flex; gap: 4px; position: absolute; left: 25px; gap: 8px; transform: translate(0%, 50%); } #Timeline > .box{ width: 40vmin; height: 50vmin; }
Следующей частью кода была возможность перемещать временную шкалу по желанию пользователя. Прежде всего, нужно было определить, была ли нажата мышь. Это было сделано с помощью простого опускания мыши и переменной флага. Затем обратное действие, когда мышь была поднята.
let canMove = false; window.onmoulet canMove = false;sedown = event => { canMove = true; } window.onmouseup = () => { canMove = false; }
Теперь мне нужно было перемещать элементы, пока мышь была опущена.
Я сохраняю положение мыши при нажатии как исходное положение, затем, поскольку я работаю со свойством translate, мне нужно преобразовать его в проценты.
Используя разницу между положением мыши и ее исходным положением, я рассчитаю, на какую часть экрана мышь переместилась в процентах. Затем я добавлю это значение к сохраненному уже перемещенному проценту (чтобы он не возвращался к началу при каждом щелчке) и, наконец, добавлю новый перевод.
let initialMousePosition = 0; let canMove = false; let currentTimelinePosition = 0; let saveScrollPercent = 0; window.onmousedown = event => { canMove = true; initialMousePosition = event.clientX; } window.onmouseup = () => { canMove = false; saveScrollPercent = currentTimelinePosition; } window.onmousemove = event => { if (canMove){ let movementDifference = event.clientX - initialMousePosition; let movePercentage = 100 * (movementDifference / window.innerWidth); currentTimelinePosition = saveScrollPercent + movePercentage; document.getElementById("Timeline").style.transform = `translate(${currentTimelinePosition}%, 50%`; } }
Это почти готовый продукт. Он работает, как задумано, но может выглядеть красивее. Давайте добавим изображение и текст в каждое поле.
<div class="box"> <img src="https://picsum.photos/200/300?random=5"/> <p>Some Text</p> </div>
.box > img { pointer-events: none; width: 100%; height: 85%; /* 20% small*/ object-fit: cover; }
Теперь, играя с временной шкалой, я заметил, что временная шкала может прокручиваться за пределы экрана, поэтому я добавил несколько строк, чтобы исправить это.
currentTimelinePosition = Math.max( Math.min(saveScrollPercent + movePercentage, 30) , -55);
Это не самый аккуратный вариант, и эти цифры не самые лучшие для работы, но в результате карты на каждом конце могут находиться в середине, но не дальше.
Теперь прокрутка ограничена, и мне захотелось выделить открытку в центре. Моей первой идеей было сделать ее больше остальных. В итоге это не сработало, так как изменение высоты привело бы к смещению всего ряда, и он стал выглядеть хуже. Вместо этого я решил изменить изображение так, чтобы оно росло внутри карточки.
Новая идея заключается в том, чтобы изображение занимало большую часть карточки (я переименовал поле в более подходящее), а когда изображение находится в центре, оно прокручивается вверх, открывая текст.
Прежде всего, как найти центральную карточку? Это оказалось не так сложно, как я ожидал.
document.getElementById("Timeline").style.transform = `translate(${currentTimelinePosition}%, 0%)`; let children = document.getElementById("Timeline").children; for (let i = 0; i < children.length; i++) { children[i].classList.remove("centered"); if (children[i].getBoundingClientRect().left <= windowCenter && children[i].getBoundingClientRect().right >= windowCenter - 8) { children[i].classList.add("centered"); } }
"-8" - это только для того, чтобы учесть промежутки между карточками.
В фоновом режиме я добавил класс "centered" к первому элементу временной шкалы по умолчанию, чтобы он выглядел "открытым", и изменил начальные позиции на "30", чтобы первая карточка была в центре при загрузке страницы.
.box > img { pointer-events: none; width: 100%; height: 85%; object-fit: cover; transition-duration: 1.5s; }
Я добавил длительность перехода, чтобы изображение отслаивалось, и код был завершен.
Я был вполне доволен конечным продуктом. Я хотел бы вернуться к нему в будущем, когда узнаю больше и попробую реализовать версию, в которой карта увеличивается в размере.
Если вы хотите посмотреть полный код, он находится на моем GitHub (https://github.com/BradleyMcGill/WeeklyWebsite/tree/main/W01%20-%20TimeLine).
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.