Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

9 December 2024

Como animar a cor de fundo

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>imageSlider</title>
    <link rel="stylesheet" href="css/imageSlider.css">
</head>

<body>
    <header>
        <nav>
            <a href="">Home</a>
            <a href="">Contact</a>
            <a href="">Info</a>
        </nav>
    </header>
    <div class="carousel">
        <div class="list">

<div class="item">
                <img src="./img/img4.jpg" alt="">
                <div class="content">
                    <div class="author">WebAddict</div>
                    <div class="title">Design Slider</div>
                    <div class="topic">Animals</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, natus a repellendus eaque velit
                        reiciendis inventore deleniti ipsa impedit molestiae illum unde voluptas, animi quis saepe quos
                        atque neque provident rerum distinctio laborum veniam incidunt itaque. At magnam incidunt alias
                        voluptatibus modi enim eos iste, natus corrupti accusamus nobis cumque?
                    </div>

<div class="item">
                <img src="./img/IMG-20230824-WA0021.jpg" style="object-position: 0 28%; filter:brightness(50%)" alt="">
                <div class="content">
                    <div class="author">WebAddict</div>
                    <div class="title">Design Slider</div>
                    <div class="topic">Animals</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, natus a repellendus eaque velit
                        reiciendis inventore deleniti ipsa impedit molestiae illum unde voluptas, animi quis saepe quos
                        atque neque provident rerum distinctio laborum veniam incidunt itaque. At magnam incidunt alias
                        voluptatibus modi enim eos iste, natus corrupti accusamus nobis cumque?
                    </div>

<div class="buttons">
                        <button>See More</button>
                        <button>Next</button>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="./img/img3.jpg" alt="">
                <div class="content">
                    <div class="author">WebAddict</div>
                    <div class="title">Design Slider</div>
                    <div class="topic">Animals</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, natus a repellendus eaque velit
                        reiciendis inventore deleniti ipsa impedit molestiae illum unde voluptas, animi quis saepe quos
                        atque neque provident rerum distinctio laborum veniam incidunt itaque. At magnam incidunt alias
                        voluptatibus modi enim eos iste, natus corrupti accusamus nobis cumque?
                    </div>

<div class="buttons">
                        <button>See More</button>
                        <button>Next</button>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="./img/img1.jpg" alt="">
                <div class="content">
                    <div class="author">WebAddict</div>
                    <div class="title">Design Slider</div>
                    <div class="topic">Animals</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, natus a repellendus eaque velit
                        reiciendis inventore deleniti ipsa impedit molestiae illum unde voluptas, animi quis saepe quos
                        atque neque provident rerum distinctio laborum veniam incidunt itaque. At magnam incidunt alias
                        voluptatibus modi enim eos iste, natus corrupti accusamus nobis cumque?
                    </div>

<div class="buttons">
                        <button>See More</button>
                        <button>Next</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="thumbnails">
            <div class="item">
                <img src="./img/img4.jpg" alt="">
                <div class="content">
                    <div class="title">
                        Name Slider
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/IMG-20230824-WA0021.jpg" style="filter: brightness(70%);" alt="">
                <div class="content">
                    <div class="title">
                        Name Slider
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/img3.jpg" alt="">
                <div class="content">
                    <div class="title">
                        Name Slider
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/img1.jpg" alt="">
                <div class="content">
                    <div class="title">
                        Name Slider
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>

</div>
        <div class="arrows">
            <button id="prev">
                < </button>
                    <button id="next">></button>
        </div>
        <div class="time"></div>
    </div>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800;900&family=Oswald:wght@200;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    list-style:none;
}
body{
    font-family: "Poppins", sans-serif;
    background: #000;
    text-decoration: none;
    color: #eee;
    font-size: 12px;
}
header{
    width: 1140px;
    max-width: 80%;
    margin: auto;
    height: 50px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
position: relative;
z-index: 100;
}
a{
    color: #fff;
}
header a{
    margin-right: 40px;
    font-size: 1.2em
}
.carousel{
    margin-top: -50px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
img{
    width: 100%;
}

.carousel .list .item{
    position: absolute;
    inset: 0 0 0 0;

}
.carousel .list .item img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* filter: brightness(20%); */
}

.carousel .list .item .content{
    position: absolute;
    top: 20%;
    /* background-color: blue; */
    width: 1140px;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 30px;
    box-sizing: border-box;
    color: white;
    text-shadow: 0 5px 10px #0004;

}
.carousel .content .author{
    /* font-size: 4rem; */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 10px;

}
.carousel .list .content .title, .carousel  .list .content .topic{
    font-weight: bold;
    font-size: 5em;
    line-height: 1.3em;
    margin: 0;
}
.carousel .content .topic{
    color: #f1683a;
}
.carousel .list .item .buttons{
    display: grid;
    grid-template-columns: repeat(2, 130px);
    height: 40px;
    gap: 10px;
    margin-top: 20px;
}
.content button{
    background-color: #eee;
    font-family: Poppins;
    letter-spacing: 3px;
    font-weight: 500;

}
.content button:nth-child(2){
    background: transparent;
    color: #eee;
    border: 1px solid #eee;
}

/* Thumbnails */
.thumbnails{
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: max-content;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.thumbnails .item{
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    position: relative;
}

.thumbnails img{
    width: 100%;
    height: 100%;
 border-radius: 20px;
 /* filter: brightness(90%); */
    object-fit: cover;
}
.thumbnails .content{
    position: absolute;
    bottom: 10px;
    left: 10px
}
.thumbnails .title{
    font-weight: bold;
}
.arrows{
    position: absolute;
    top: 80%;
    right: 52%;
    width: 300px;
    max-width: 30%;
    display: flex;
    align-items: center;
    gap: 10px;
z-index: 9999;
}
.arrows button{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #eee4;
    color: #fff;
    font-family: monospace;
    font-weight: bold;
    font-size: large;

transition: 0.5s;
}

.arrows button:hover{
    background: #fff;
    color: #555;
}
.carousel .list .item:nth-child(1){
    z-index: 1;
}
.carousel .list .item:nth-child(1) .author,
.carousel .list .item:nth-child(1) .title,
.carousel .list .item:nth-child(1) .topic,
.carousel .list .item:nth-child(1) .des,
.carousel .list .item:nth-child(1) .buttons{
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent 0.5s .5s linear 1 forwards;
}
@keyframes showContent {
    to{
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0px);
    }
}
.carousel .list .item:nth-child(1) .title{
    animation-duration: 1.2s;
}
.carousel .list .item:nth-child(1) .topic{
    animation-duration: 1.4s;
}
.carousel .list .item:nth-child(1) .des{
    animation-delay: 1.6s
}
.carousel .list .item:nth-child(1) .buttons{
    animation-delay: 1.8s
}

/* Effects */
.carousel.next .list .item:nth-child(1) img{
    width: 150px;
    height: 220px;
    position: absolute;
    left: 50%;
bottom: 50px;
border-radius: 20px;
animation: showImage 0.5s linear 1 forwards;    
}
@keyframes showImage {
    to{
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius:0;
}
}
.carousel.next .thumbnails .item:nth-last-child(1){
    width: 0;
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}
@keyframes showThumbnail {
    to{
        width: 150px;
    }
}

.carousel.next .thumbnails{
    transform: translateX(150px);
    transform: translateX(150px);
    animation: transformThumbnail .5s linear 1 forwards;
}
@keyframes transformThumbnail {
    to{
        transform: translateX(0);
    }
}
/* prev */
.carousel.prev  .list .item:nth-child(2){
    z-index: 2;

}
.carousel.prev .list .item:nth-child(2) img{
    position: absolute;
    bottom: 0;
    left: 0;
    animation: outImage 0.5s linear 1 forwards;
}
@keyframes outImage {
    to{
        width: 150px;
        height: 150px;
        border-radius: 20px;
        left: 50%;
        bottom: 50px;
    }
}
.carousel.prev .thumbnails .item:nth-child(1){
    width: 0;
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail 0.5s linear 1 forwards;
}
.carousel.prev .list .item:nth-child(2) .author,
.carousel.prev .list .item:nth-child(2) .title,
.carousel.prev .list .item:nth-child(2) .topic,
.carousel.prev .list .item:nth-child(2) .des,
.carousel.prev .list .item:nth-child(2) .buttons{
    animation: contentOut 1.5s 1 forwards;
}
@keyframes contentOut {
    to{
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}
.carousel.next .arrows button,
.carousel.prev .arrows button{
    /* pointer-events: none; */
}
.time{
    position: absolute;
    width: 0%;
    height: 5px;
    background: #f1683a;
    z-index: 100;
}
.carousel.next .time,
.carousel.prev .time{
    width: 100%;
    animation: timeRunning 2s linear 1 forwards;
}
@keyframes timeRunning {
    to{
        width: 0;
    }
}
@media screen and (max-width:678px) {
    .carousel .list .item .content{
        padding: 0;
    }
    .carousel .list .item .content .title{
        font-size: 30px;
    }
}

JS

let carouselDom = document.querySelector(".carousel");
let listItemDom = document.querySelector(".carousel .list");
let thumbNailsDom = document.querySelector(".carousel .thumbnails");
let nextBtn = document.getElementById("next");
let prevBtn = document.getElementById("prev");

nextBtn.onclick = () => {
  showSlider("next");
};
prevBtn.onclick = () => {
  showSlider("prev");
};
let timeRunning = 3000;
let runTimeout;
let timeAutoNext = 5000;
let autoRun;

autoRun = setTimeout(() => {
  nextBtn.click();
}, timeAutoNext);
function showSlider(type) {
  let itemSlider = document.querySelectorAll(".carousel .list .item");
  let itemThumbNails = document.querySelectorAll(".carousel .thumbnails .item");
  if (type === "next") {
    listItemDom.appendChild(itemSlider[0]);
    thumbNailsDom.appendChild(itemThumbNails[0]);
    carouselDom.classList.add("next");
  } else {
    let positionLastItem = itemSlider.length - 1;
    listItemDom.prepend(itemSlider[positionLastItem]);
    thumbNailsDom.prepend(itemThumbNails[positionLastItem]);
    carouselDom.classList.add("prev");
  }
  clearTimeout(runTimeout);
  runTimeout = setTimeout(() => {
    carouselDom.classList.remove("next");
    carouselDom.classList.remove("prev");
  }, timeRunning);
  clearTimeout(autoRun);
  autoRun = setTimeout(() => {
    nextBtn.click();
  }, timeAutoNext);
}

Recomendado

Como animar a cor de fundo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS