Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

18 October 2025

Animazione CSS Button UI Sxrgxx

15 January 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();
    })
})

Consigliato

Animazione CSS Button UI Sxrgxx

Salita alla torre circolare

Pulsante pagina non valida

HTML

CSS

JS

Consigliato

Animazione CSS Button UI Sxrgxx

Salita alla torre circolare

Pulsante pagina non valida

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS