Refresco de frutas Carrusel

3,004 Andev.web

Abrir en el editor Publica tu código

Recomendado

29 May 2025

Un código de mathieu.ratro

30 November 2024

Texto resplandeciente

15 May 2025

Un código de Mete

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