Создание button swipe animation

Question

Как сделать такую кнопку (слайдер). Эта кнопка находится на всплывающем уведомлении на всю страницу без скролла. Когда проведешь эту кнопку слева направо уведомление закроется и появится сам сайт

Answer 1

Вот базовое решение, оно подходит для Chrome. Для других браузеров нужно добавить соответствующие вендорные префиксы.

function modalClose (modal) {
    modal.classList.add('disable');
    modal.close();
}

window.addEventListener('DOMContentLoaded', () => {
    const modal = document.querySelector('dialog');
    const slider = modal.querySelector('.slider');
    modal.showModal();

    slider.addEventListener('change', evt => {
        if (evt.target.value !== '100') {
            evt.target.value = 0;
            return;
        }

        modalClose(modal);
    });

});

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

p {
    text-align: center;
}

dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;

    border: none;

    background-color: #111;
}

.disable {
    display: none;
}

.slider {
    -webkit-appearance: none;
    width: 50%;
    min-width: 600px; /*эта строка нужна только чтобы не ломалось отображение в сниппете*/
    background-color: transparent;

    pointer-events: none;
}

.slider:focus {
    outline: none;
}

.slider::-webkit-slider-thumb {
    background: #ecf0f1;
    border-radius: 50%;
    cursor: pointer;
    width: 100px;
    aspect-ratio: 1;
    -webkit-appearance: none;

    pointer-events: all;
}

.slider::before {
    content: '';
    position: relative;
    display: block;
    width: 100px;
    aspect-ratio: 1;

    border-radius: 50%;

    transform: translate(100px, 0);

    background-color: #333;

    z-index: -1;
}

.slider::after {
    content: '';
    position: relative;
    display: block;
    width: 100px;
    aspect-ratio: 1;

    border-radius: 50%;

    transform: translate(-100px, 0);

    background-color: #333;
    outline: 1px solid #3ea;

    z-index: -1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p>основной контент страницы</p>
    
    <dialog>
        <input class="slider" type="range" value="0" min="0" max="100" step="1">
    </dialog>

    <script src="index.js"></script>
</body>
</html>

БЛОГ НА HUSL

Создание button swipe animation

Ответы (1 шт):