Carrousel Soda aux fruits

1909 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 June 2024

Carte animée des réseaux sociaux

23 November 2024

Boutons de réseaux sociaux en survol

22 August 2025

Carrousel de cartes Lion 3D HTML CSS et JavaScript

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

Recommandé

Carte animée des réseaux sociaux

Boutons de réseaux sociaux en survol

Carrousel de cartes Lion 3D HTML CSS et JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS