Refresco de frutas Carrusel

2107 Andev.web

Abrir en el editor Publica tu código

Recomendado

17 July 2025

Sinfonía del estado estacionario

28 December 2024

Un código de mematixd3162

22 August 2025

Comentario de marcador de posición de código HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="carousel">
        <div class="list">
            <div class="item active" style="--background: #EA3D41">
                <div class="content">Strawberry</div>
                <img src="https://i.postimg.cc/W4mDGgk2/fruit-strawberry.png" class="fruit">
            </div>
            <div class="item" style="--background: #2D5643">
                <div class="content">avocado</div>
                <img src="https://i.postimg.cc/hjpfwns6/fruit-avocado.png" class="fruit">
            </div>
            <div class="item hidden" style="--background: #E7A043">
                <div class="content">orange</div>
                <img src="https://i.postimg.cc/KzZ1JjPt/fruit-orange.png" class="fruit">
            </div>
        </div>
        <div class="leaves"></div>
        <div class="mockup"></div>
        <div class="shadow"></div>
        <div class="arrow">
            <button id="prev"><</button>
            <button id="next">></button>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS

html, body {
    height: 100%;
    overflow-x: hidden; /* Evita el desbordamiento horizontal */
}

body {
    margin: 0;
    padding: 0;
}
header{
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    box-sizing: border-box;
    font-family: monospace;
    font-weight: bold;
    font-size: large;
    position: relative;
    z-index: 1;
}
header ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 20px;
}
.carousel{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin-top: -40px;
}
.list{
    width: 100%;
    height: 100%;
}

.item{
    width: 100%;
    height: 100%;
    background-color: var(--background);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
}
.item img.fruit{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: none;
}
.item .content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 10rem;
    color: #eee;
    font-weight: bold;
    font-family: system-ui;
    text-transform: uppercase;
    white-space: nowrap;
}
.item.active{
    display: block;
}
.item.hidden{
    display: block;
    pointer-events: none;
    background-color: transparent;
    z-index: 1;
}

#prev,
#next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #eee9;
    background-color: #eee5;
    color: #eee;
    font-size: x-large;
    font-family: monospace;
    cursor: pointer;
    z-index: 15;
}
#prev{
    left: 20px;
}
#next{
    right: 20px;
}

@keyframes toActive{
    from{
        top: 100%;
        opacity: 0;
    }
}
@keyframes toOut{
    from{
        top: 50%;
        opacity: 1;
    }
}
.item.active img.fruit{
    animation: toActive 0.5s ease-in-out 1;
}
.item.hidden img.fruit{
    animation: toOut 0.8s ease-in-out 1;
    top: -100%;
    opacity: 0;
}
.item.active .content{
    animation: toActive 0.8s ease-in-out 1;
}
.item.hidden .content{
    opacity: 0;
}

.carousel.right .item.active img.fruit{
    animation: toActivePrev 0.5s ease-in-out 1;
}
.carousel.right .item.hidden img.fruit{
    animation: toOut 0.8s ease-in-out 1;
    top: 100%;
    opacity: 0;
}
.carousel.right .item.active .content{
    animation: toActivePrev 0.8s ease-in-out 1;
}

@keyframes toActivePrev{
    from{
        top: 0;
        opacity: 0;
    }
}

:root{
    --width-mockup: calc(371px / 1.5);
    --height-mockup: calc(673px / 1.5);
}

.mockup {
    position: absolute;
    top: 50%;
    left: 50%;
    --left: 0%;
    transform: translate(-50%, -50%);
    height: var(--height-mockup);
    width: var(--width-mockup);
    background: 
        url(https://i.postimg.cc/CMrRsFzf/mockup.png)  0 0 no-repeat, 
        url(https://i.postimg.cc/3NqW8ZPZ/list-Soda1.jpg) var(--left) 0;
    background-size: auto 100%;
    background-blend-mode: multiply;
    -webkit-mask-image: 
    url(https://i.postimg.cc/CMrRsFzf/mockup.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: auto 100%;
    transition: background 0.5s;
}

.leaves{
    position: absolute;
    width: 170px;
    height: 170px;
    background-image: url(https://i.postimg.cc/1z1nVJ4C/leaves.png);
    background-size: 100%;
    top: calc((50% - (var(--height-mockup) / 1.7)));
    left: calc((50% + (var(--width-mockup) / 5)));
}
.shadow{
    width: var(--width-mockup);
    height: 100px;
    background-color: #0008;
    border-radius: 50%;
    position: absolute;
    top:  calc((50% + (var(--height-mockup) / 2)));
    left: 50%;
    transform: translateX(-50%);
    filter: blur(20px);
}
@media screen and (max-width: 768px) {
    .item .content{
        transform: translate(-50%, -50%) scale(.5);
    }
    .item img.fruit{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

JS

let list = document.querySelectorAll('.carousel .list .item');
let carousel = document.querySelector('.carousel');
let next = document.getElementById('next');
let prev = document.getElementById('prev');

let mockup = document.querySelector('.mockup');

let count = list.length;
let active = 0;
let leftMockup = 0;
let left_each_item = 100 / (list.length - 1);

next.onclick = () => {
    active = active >= count - 1 ? 0 : active + 1;
    leftMockup = leftMockup + left_each_item;
    carousel.classList.remove('right');
    changeCarousel();
}
prev.onclick = () => {
    active = active <= 0 ? count - 1 : active - 1;
    leftMockup = leftMockup - left_each_item;
    carousel.classList.add('right');
    changeCarousel();
}
function changeCarousel() {
    // find item has class hidden to remove it
    let hidden_old = document.querySelector('.item.hidden');
    if(hidden_old) hidden_old.classList.remove('hidden');

// find item old active to remove it and add class hidden
    let active_old = document.querySelector('.item.active');
    active_old.classList.remove('active');
    active_old.classList.add('hidden');
    // add class active in position active new
    list[active].classList.add('active');
    // change mockup background
    mockup.style.setProperty('--left', leftMockup + '%');

clearInterval(refreshInterval);
    refreshInterval = setInterval(()=> {next.click()}, 3000);
}

// auto run 3s
let refreshInterval = setInterval(()=> {next.click()}, 3000);/

Recomendado

Sinfonía del estado estacionario

Un código de mematixd3162

Comentario de marcador de posición de código HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS