Pilotos de F1 2024 - galería circular con miniaturas

2,488 zegarkidawida

Abrir en el editor Publica tu código

Pilotos de F1 2024 - galería circular con miniaturas

Recomendado

18 December 2025

Código fuente HTML5 del juego Bloodmoney

12 January 2025

Un código de Mikeykun

12 July 2025

Contador de clics de la barra espaciadora - JavaScript HTML

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;*/
}

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