Image Comparison Slider by @Samurai97 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<th>Definisce una cella di intestazione di una tabella HTML.
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
heightDetermina l'altezza di un elemento HTML in pixel
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

La sicurezza in informati

le miniere di nuxis

PERGAMEMORY - I Segreti dei Bevill

classifica finita

GoUp Fitness Il tuo percorso verso

Design, Marketing & AI News (Portf

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Comparison Slider</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="img-wrapper">
            <div class="img img1" style="background-image: url('https://assets.cdn.filesafe.space/RzpXTQDAowc9X5iz0H0x/media/6515db7e5cf2e9fa82679678.png');"></div>
            <div class="img img2" style="background-image: url('https://assets.cdn.filesafe.space/RzpXTQDAowc9X5iz0H0x/media/6515db7e5cf2e93e7d679677.png');"></div>
        </div>
        <div class="slider" id="slider">
            <div class="handle">
                <div class="arrow left-arrow"></div>
                <div class="arrow right-arrow"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>


.container {
    position: relative;
    width: 80%;
    max-width: 800px;
    height: 400px;
    overflow: hidden;
    cursor: ew-resize;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.img1 {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.img2 {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 5px;
    height: 100%;
    background-color: #fff;
    cursor: ew-resize;
    z-index: 2;
    transition: background-color 0.3s;
}

.handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.arrow {
    width: 0; 
    height: 0; 
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.left-arrow {
    border-right: 12px solid #fff;
    margin-right: 5px;
}

.right-arrow {
    border-left: 12px solid #fff;
    margin-left: 5px;
}

document.addEventListener("DOMContentLoaded", function() {
    const slider = document.getElementById('slider');
    const img1 = document.querySelector('.img1');
    const img2 = document.querySelector('.img2');
    const container = document.querySelector('.container');

    let isDragging = false;

    const onDrag = (e) => {
        if (!isDragging) return;

        let containerRect = container.getBoundingClientRect();
        let offsetX = e.clientX - containerRect.left;
        let containerWidth = containerRect.width;

        if (offsetX < 0) offsetX = 0;
        if (offsetX > containerWidth) offsetX = containerWidth;

        let percentage = (offsetX / containerWidth) * 100;

        slider.style.left = percentage + '%';
        img1.style.clipPath = `polygon(0 0, ${percentage}% 0, ${percentage}% 100%, 0 100%)`;
        img2.style.clipPath = `polygon(${percentage}% 0, 100% 0, 100% 100%, ${percentage}% 100%)`;
    };

    slider.addEventListener('mousedown', () => isDragging = true);
    document.addEventListener('mouseup', () => isDragging = false);
    document.addEventListener('mousemove', onDrag);
});