Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

28 June 2025

Navegação da barra lateral HTML do painel OMIC EST

16 April 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>
        
    <header>
        <div class="logo">Andev.Web</div>
        <ul class="menu">
            <li>Home</li>
            <li>Blog</li>
            <li>Info</li>
        </ul>
        <div class="search">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
            </svg>
        </div>
    </header>

<div class="slider">
        
        <div class="list">
            <div class="item active">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ashe_0.jpg">
                <div class="content">
                    <p>The Frost Archer</p>
                    <h2>Ashe</h2>

</div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_0.jpg">
                <div class="content">
                    <p>The Nine-Tailed Fox</p>
                    <h2>Ahri</h2>

</div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Garen_0.jpg">
                <div class="content">
                    <p>The Might of Demacia</p>
                    <h2>Garen</h2>

</div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Janna_0.jpg">
                <div class="content">
                    <p>The Storm's Fury</p>
                    <h2>Janna</h2>

</div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_0.jpg">
                <div class="content">
                    <p>The Sinister Blade</p>
                    <h2>Katarina</h2>

</div>
            </div>
        </div>
        
        <div class="arrows">
            <button id="prev"><</button>
            <button id="next">></button>
        </div>
        
        <div class="thumbnail">
            <div class="item active">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ashe_0.jpg">
                <div class="content">
                    Ashe
                </div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_0.jpg">
                <div class="content">
                    Ahri
                </div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Garen_0.jpg">
                <div class="content">
                    Garen
                </div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Janna_0.jpg">
                <div class="content">
                    Janna
                </div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_0.jpg">
                <div class="content">
                    Katarina
                </div>
            </div>
        </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
    font-family: Poppins;
    margin: 0;
    background-color: #010101;
    color: #eee;
}
svg{
    width: 25px;
}
header{
    width: 1200px;
    max-width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: 50px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;
}
header .logo{
    font-weight: bold;
}
header .menu{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-weight: 500;
}
/* css slider */
.slider{
    height: 100vh;
    margin-top: -50px;
    position: relative;
}
.slider .list .item{
    position: absolute;
    inset: 0 0 0 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}
.slider .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider .list .item::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(
        to top, #000 40%, transparent
    );
}
.slider .list .item .content{
    position: absolute;
    left: 10%;
    top: 20%;
    width: 500px;
    max-width: 80%;
    z-index: 1;
}
.slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 10px;
}
.slider .list .item .content h2{
    font-size: 100px;
    margin: 0;
}
.slider .list .item.active{
    opacity: 1;
    z-index: 10;
}
@keyframes showContent {
    to{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}
.slider .list .item.active p:nth-child(1),
.slider .list .item.active h2,
.slider .list .item.active p:nth-child(3){
    transform: translateY(30px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s .7s ease-in-out 1 forwards;
}
.slider .list .item.active h2{
    animation-delay: 1s;
}
.slider .list .item.active p:nth-child(3){
    animation-duration: 1.3s;
}
.arrows{
    position: absolute;
    top: 30%;
    right: 50px;
    z-index: 100;
}
.arrows button{
    background-color: #eee5;
    border: none;
    font-family: monospace;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    font-size: x-large;
    color: #eee;
    transition: .5s;
}
.arrows button:hover{
    background-color: #eee;
    color: black;
}
.thumbnail{
    position: absolute;
    bottom: 50px;
    z-index: 11;
    display: flex;
    gap: 10px;
    width: 100%;
    height: 250px;
    padding: 0 50px;
    box-sizing: border-box;
    overflow: auto;
    justify-content: center;
}
.thumbnail::-webkit-scrollbar{
    width: 0;
}
.thumbnail .item{
    width: 150px;
    height: 220px;
    filter: brightness(.5);
    transition: .5s;
    flex-shrink: 0;
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.thumbnail .item.active{
    filter: brightness(1.5);
}
.thumbnail .item .content{
    position: absolute;
    inset: auto 10px 10px 10px;
}
@media screen and (max-width: 678px) {
    .thumbnail{
        justify-content: start;
    }
    .slider .list .item .content h2{
        font-size: 60px;
    }
    .arrows{
        top: 10%;
    }
}

JS

let items = document.querySelectorAll('.slider .list .item');
let next = document.getElementById('next');
let prev = document.getElementById('prev');
let thumbnails = document.querySelectorAll('.thumbnail .item');

// config param
let countItem = items.length;
let itemActive = 0;
// event next click
next.onclick = function(){
    itemActive = itemActive + 1;
    if(itemActive >= countItem){
        itemActive = 0;
    }
    showSlider();
}
//event prev click
prev.onclick = function(){
    itemActive = itemActive - 1;
    if(itemActive < 0){
        itemActive = countItem - 1;
    }
    showSlider();
}
// auto run slider
let refreshInterval = setInterval(() => {
    next.click();
}, 5000)
function showSlider(){
    // remove item active old
    let itemActiveOld = document.querySelector('.slider .list .item.active');
    let thumbnailActiveOld = document.querySelector('.thumbnail .item.active');
    itemActiveOld.classList.remove('active');
    thumbnailActiveOld.classList.remove('active');

// active new item
    items[itemActive].classList.add('active');
    thumbnails[itemActive].classList.add('active');

// clear auto time run slider
    clearInterval(refreshInterval);
    refreshInterval = setInterval(() => {
        next.click();
    }, 5000)
}

// click thumbnail
thumbnails.forEach((thumbnail, index) => {
    thumbnail.addEventListener('click', () => {
        itemActive = index;
        showSlider();
    })
})

Recomendado

Navegação da barra lateral HTML do painel OMIC EST

Um código de anhtuanle2004yst

Círculo do seletor de cores

HTML

CSS

JS

Recomendado

Navegação da barra lateral HTML do painel OMIC EST

Um código de anhtuanle2004yst

Círculo do seletor de cores

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS