Piloti F1 2024 - galleria circolare con pollici

1447 zegarkidawida

Apri nell'Editor Pubblica il Tuo Codice

Piloti F1 2024 - galleria circolare con pollici

Consigliato

8 July 2025

Scelta del personaggio con animazione della scheda di anteprima (sprite CSS)

2 September 2025

Schermo TV HTML con incorporamento di YouTube ed effetto Glitch

21 June 2025

Contenitore di effetti luce HTML con CSS

HTML

CSS

*,::before,::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
  height: 100svh;
  display: grid;
  place-items: center;
    background-color: black;
    font-family: system-ui;
    font-size: 1rem; 
}
.gallery-wrapper{
    width: 80vw;
    overflow: hidden;
}
.gallery-nav{
    position: absolute;
    inset: 0;
    z-index: 1;
}

.gallery-nav img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.gallery-nav button{
    --_bg: rgba(0, 255,255,.5);

position: absolute;
    inset: 0;
    transform-origin: center;
    width: 50px; 
    height: 50px;
    cursor: pointer;
    color: white;
    text-decoration: none;
    padding: .25rem;
    font-size: 0.8rem;
    border: none;
    outline: none;
    border-radius: 999vw;
    background-color: #FFFFFF20;
    transition: background-color 300ms ease-in-out, opacity  300ms ease-in-out,filter 300ms ease-in-out;
    opacity: .75;
}
.gallery-nav button:hover,
.gallery-nav button:focus-visible,
.gallery-nav button.active{
    background-color: rgba(255, 255, 255,.5);
    opacity: 1;
}

.gallery-nav:has(:hover) > button:not(:hover){
    filter: sepia(100)
}
.gallery-nav > button::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--_bg);
    border-radius: 9999px;
    transition: all 0.3s;
    z-index: 10;
    display: grid;
    place-content: center;
}

.gallery-nav > button:hover::before {
    inset: 1rem -1.85rem;
    background-color: var(--_bg);
}
.gallery-nav > button::after {
    content: attr(title);
    position: absolute;
    inset: 1rem -1.85rem;
    transition: opacity 0.3s 150ms,translate 0.3s 150ms,letter-spacing 0.3s 0s;
    z-index: 10;
    display: grid;
    place-content: center;
    font-size: 0.7rem;
    text-wrap: nowrap;
    opacity: 0;
    /*translate: 0 10px;*/
    letter-spacing: 50px;
    overflow: hidden;
}
.gallery-nav > button:hover::after {
    opacity: 1;
    /*translate: 0;*/
    letter-spacing: 0;
    transition-delay: 150ms;
}

.gallery {
  display: grid;
    grid-auto-flow: column;
    flex-flow: row nowrap;
    position: relative;
    scroll-snap-type: x mandatory;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;
}
.gallery::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
.gallery::before {
    --_size: 195px;
    --_blur: 20px;
    --_dot-mask: radial-gradient(
        circle at 50% 50%,
        transparent var(--_size),
        white var(--_size)
    );
    content: "";
    position: fixed;
    inset: 0;
    background-color: #ffffff10;
    background-image: radial-gradient(
    circle at 50%,
    currentColor var(--_size),
    transparent calc(var(--_size))
  );
  pointer-events: none;
  backdrop-filter: blur(var(--_blur));

-webkit-mask-image: var(--_dot-mask);
  mask-image: var(--_dot-mask);
  transition: inset var(--_duration) ease-in-out;
  will-change: inset;
}

/* images (and spacers)*/
.gallery > * {
    display: block;
  width: 400px;
    aspect-ratio: 1/1;
  margin-right: 0.5rem;
    border-radius: 50%; 
    scroll-snap-align: center;
    z-index: -10;
}
.gallery > div{
   /*background-color: pink;*/
}

JS

const IMAGES = [
    {
      "id": "image-1",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/M/MAXVER01_Max_Verstappen/maxver01.png",
      "alt": "Max Verstappen",
      "title": "Max Verstappen"
    },
    {
      "id": "image-2",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/C/CHALEC01_Charles_Leclerc/chalec01.png",
      "alt": "Charles Leclerc",
      "title": "Charles Leclerc"
    },
    {
      "id": "image-3",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/L/LANNOR01_Lando_Norris/lannor01.png",
      "alt": "Lando Norris",
      "title": "Lando Norris"
    },
    {
      "id": "image-4",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/C/CARSAI01_Carlos_Sainz/carsai01.png",
      "alt": "Carlos Sainz",
      "title": "Carlos Sainz"
    },
    {
      "id": "image-5",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/S/SERPER01_Sergio_Perez/serper01.png",
      "alt": "Sergio Perez",
      "title": "Sergio Perez"
    },
    {
      "id": "image-6",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/O/OSCPIA01_Oscar_Piastri/oscpia01.png",
      "alt": "Oscar Piastre",
      "title": "Oscar Piastre"
    },
    {
      "id": "image-7",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/G/GEORUS01_George_Russell/georus01.png",
      "alt": "George Russel",
      "title": "George Russel"
    },
    {
      "id": "image-8",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/L/LEWHAM01_Lewis_Hamilton/lewham01.png",
      "alt": "Lewis Hamilton",
      "title": "Lewis Hamilton"
    },
    {
      "id": "image-9",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/F/FERALO01_Fernando_Alonso/feralo01.png",
      "alt": "Fernando Alonso",
      "title": "Fernando Alonso"
    },
    {
      "id": "image-10",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/Y/YUKTSU01_Yuki_Tsunoda/yuktsu01.png",
      "alt": "Yuki Tsunoda",
      "title": "Yuki Tsunoda"
    },
    {
      "id": "image-11",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/L/LANSTR01_Lance_Stroll/lanstr01.png",
      "alt": "Lance Stroll",
      "title": "Lance Stroll"
    },
    {
      "id": "image-12",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/D/DANRIC01_Daniel_Ricciardo/danric01.png",
      "alt": "Daniel Riccardo",
      "title": "Daniel Riccardo"
    },
    {
      "id": "image-13",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/O/OLIBEA01_Oliver_Bearman/olibea01.png",
      "alt": "Oliver Bearman",
      "title": "Oliver Bearman"
    },
    {
      "id": "image-14",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/N/NICHUL01_Nico_Hulkenberg/nichul01.png",
      "alt": "Nico Hulkenberg",
      "title": "Nico Hulkenberg"
    },
    {
      "id": "image-15",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/P/PIEGAS01_Pierre_Gasly/piegas01.png",
      "alt": "Pierre Gasly",
      "title": "Pierre Gasly"
    },
    {
      "id": "image-16",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/A/ALEALB01_Alexander_Albon/alealb01.png",
      "alt": "Alexander Albon",
      "title": "Alexander Albon"
    },
    {
      "id": "image-17",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/E/ESTOCO01_Esteban_Ocon/estoco01.png",
      "alt": "Eseban Ocon",
      "title": "Eseban Ocon"
    },
    {
      "id": "image-18",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/K/KEVMAG01_Kevin_Magnussen/kevmag01.png",
      "alt": "Kevin Magnussen",
      "title": "Kevin Magnussen"
    },
    {
      "id": "image-19",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/G/GUAZHO01_Guanyu_Zhou/guazho01.png",
      "alt": "Guanyu Zhou",
      "title": "Guanyu Zhou"
    },
    {
      "id": "image-20",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/V/VALBOT01_Valtteri_Bottas/valbot01.png",
      "alt": "Valtteri Botas",
      "title": "Valtteri Botas"
    },
    {
      "id": "image-21",
      "src": "https://media.formula1.com/d_driver_fallback_image.png/content/dam/fom-website/drivers/L/LOGSAR01_Logan_Sargeant/logsar01.png",
      "alt": "Logan Sargeant",
      "title": "Logan Sargeant"
    }
  ]

const navEl = document.querySelector('#gallery-nav');
const galleryEl = document.querySelector("#gallery");

const RADIUS = 250; // distance (radius) from center of gallery
const START_INDEX = 2; // index of item for load animation

function setupGalleryAndNav() {
    // add 2 extra elements at beginning to "compensate" for mask positioning
    const extraElStart1 =  document.createElement("div");
    galleryEl.appendChild(extraElStart1);
   
    IMAGES.forEach(image => {
        const galleryImg = document.createElement('img');
        galleryImg.src = image.src;
        galleryImg.alt = image.alt;
        galleryEl.title = image.title;
        gallery.appendChild(galleryImg);
    });
    // add 2 extra elements at end to "compensate" for mask positioning
    const extraElEnd1 =  document.createElement("div");
    galleryEl.appendChild(extraElEnd1);

// create button for each image
    IMAGES.forEach((image, index) => {
        const button = document.createElement('button');
        button.title = image.title;

const img = document.createElement('img');
        img.src = image.src;
        img.alt = image.alt;
        img.title = image.title;

button.appendChild(img);
        navEl.appendChild(button);

// position  button around the circle
        const buttonRect = button.getBoundingClientRect();
        const buttonSize = buttonRect.width;
        
        // calculate position
        const angle = (index / IMAGES.length) * 360;
        const x = Math.cos(angle * (Math.PI / 180)) * RADIUS;
        const y = Math.sin(angle * (Math.PI / 180)) * RADIUS;

// center the buttons around the middle of the <nav> container
        button.style.position = 'absolute';
        button.style.left = `calc(50% + ${x - (buttonSize / 2)}px)`;
        button.style.top = `calc(50% + ${y - (buttonSize / 2)}px)`;

// button event listener
        button.addEventListener('click', () => {
            // remove active
            navEl.querySelectorAll("button.active").forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');

// scroll to selected image
            const imgToScroll = document.querySelector(`#gallery img[src="${image.src}"]`);
             imgToScroll.scrollIntoView({ behavior: 'smooth' });
        });

// load inital image
        if (index === START_INDEX) {
            setTimeout(() => button.click(),150);
        }
    });
}

setupGalleryAndNav();

Consigliato

Scelta del personaggio con animazione della scheda di anteprima (sprite CSS)

Schermo TV HTML con incorporamento di YouTube ed effetto Glitch

Contenitore di effetti luce HTML con CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS