Неделя 1 - Карточки с временной шкалой

Неделя 1 - карточки с временной шкалой

Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно пролистывать. Центральная карточка должна быть выделена каким-то образом, и на ней будет показана дополнительная информация.

Первоначальная установка была очень простой. В качестве 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).