Refresco de frutas Carrusel

2,615 Andev.web

Abrir en el editor Publica tu código

Recomendado

9 July 2025

Menú contextual de vidrio de neón con selector de color

29 May 2025

Panel de administración de AdminHub v2.1

19 November 2025

Formulario de registro HTML animado con estilo CSS

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;
    }
}

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);/