Refresco de frutas Carrusel

Abrir en el editor Publica tu código

Recomendado

16 August 2024

Código gráfico interactivo de dragón SVG

18 June 2025

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

Refresco de frutas Carrusel

Recomendado

Fondo de puntos animados

Código gráfico interactivo de dragón SVG

Un código de ByBy.inc

HTML

CSS

JS

Recomendado

Fondo de puntos animados

Código gráfico interactivo de dragón SVG

Un código de ByBy.inc

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS