Animazione orbita infinita con trigonometria CSS

1012 zegarkidawida

Apri nell'Editor Pubblica il Tuo Codice

Animazione orbita infinita con trigonometria CSS

Consigliato

27 December 2024

Una home page creata con directory

17 July 2025

Pagina di accesso al CoffeeShop con effetto vetro e Tailwind

31 January 2025

Film di carte CSS pure 3D

HTML

<section class="section">
    <div class="section-wrapper">
      <header class="header">
        <hgroup class="hgroup">
          <h2 class="headline">Meet Our Team!</h2>
          <p class="tagline">Creative minds shaping the future</p>
        </hgroup>
        <a href="#" class="section-link"> View All </a>
      </header>
      
      <ul class="cards" style="--nth-siblings: 5">
        <li class="card" style="--nth-child: 1">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-1.avif"
                width="144" height="144" alt="Ethan B., DevOps Engineer" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Ethan B.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">DevOps Engineer</p>
                <p class="team-bio">
                  Master of servers, pipelines, and keeping things running
                  smoothly.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 2">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-2.avif"
                width="144" height="144" alt="Ava L., UI/UX Designer" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Ava L.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">UI/UX Designer</p>
                <p class="team-bio">
                  Turning ideas into stunning designs, one pixel at a time.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 3">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-3.avif"
                width="144" height="144" alt="Liam J., Mobile Developer" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Liam J.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">Mobile Developer</p>
                <p class="team-bio">
                  Crafting sleek, intuitive apps for users on the go.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 4">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-4.avif"
                width="144" height="144" alt="Sophia K., Data Scientist" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Sophia K.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">Data Scientist</p>
                <p class="team-bio">
                  Decoding patterns and finding insights in the chaos.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 5">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-5.avif"
                width="144" height="144" alt="Codey X, AI Code Assistant" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Codey X</h3>
              <div class="team-content-wrapper">
                <p class="team-title">AI Code Assistant</p>
                <p class="team-bio">
                  Powered by algorithms, driven by collaboration.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 6">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-6.avif"
                width="144" height="144" alt="Maya R., Project Manager" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Maya R.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">Project Manager</p>
                <p class="team-bio">
                  Keeping the team in sync and deadlines on track.
                </p>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </section>

CSS

@layer reset, base, utilities, components, layout, overrides;

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --direction {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}

@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

:where(:not(dialog)) {
    margin: 0;
  }

:where(html) {
    -webkit-text-size-adjust: none;

@media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

:where(body) {
    min-block-size: 100svb;
    -webkit-font-smoothing: antialiased;
  }
}

@layer base {
  html {
    --surface-1: oklch(20% 0.03 269);
    --surface-2: oklch(26% 0.04 269);
    --text-1: oklch(91% 0.03 61);
    --body: 400 1rem/1.5rem system-ui, sans-serif;
    --display: 400 3.562rem/4rem system-ui, sans-serif;
    --display-small: 400 2.25rem/2.75rem system-ui, sans-serif;
    --label: 500 0.875rem/1.25rem system-ui, sans-serif;
    --title: 400 1.375rem/1.75rem system-ui, sans-serif;
    color-scheme: dark;
  }

body {
    background-color: var(--surface-1);
    color: var(--text-1);
    font: var(--body);
  }
}

@layer layout {
  .section {
    display: grid;
    max-inline-size: 100%;
    min-block-size: 100svb;
    overflow-x: clip;
    padding-block: 80px;
    place-items: center;
  }

.section-wrapper {
    display: grid;
    place-items: center;
  }

.header {
    display: grid;
    place-items: center;
    gap: 16px;
    z-index: 2;

/* lg-n-above */
    @media (width >=1024px) {
      /* Placing header and cards in the same grid cell to stack them */
      /* Both elements use grid-area: 1/1 to overlap within the same area */
      grid-area: 1/1;
    }
  }

.hgroup {
    display: grid;
    place-items: center;
    gap: 8px;
  }

.headline {
    font: var(--display-small);

/* lg-n-above */
    @media (width >=1200px) {
      font: var(--display);
    }
  }

.section-link {
    color: var(--text-1);
    text-decoration: underline;
    font: var(--label);

/* lg-n-below */
    @media (width < 1024px) {
      display: none;
    }
  }

.cards {
    list-style: none;
    padding: 0;

/* lg-n-below */
    @media (width < 1024px) {
      display: grid;
      grid-auto-flow: column;
      gap: 32px;
      max-inline-size: 100%;
      overflow-x: scroll;
      padding-block: 32px;
      padding-inline: 32px;
    }

/* lg-n-above */
    @media (width >=1024px) {
      --avatar-opacity: 1;
      --avatar-img-scale: 1;
      --tooltip-visibility: hidden;
      --tooltip-opacity: 0;
      --animation-state: running;

display: grid;
      /* Placing header and cards in the same grid cell to stack them */
      /* Both elements use grid-area: 1/1 to overlap within the same area */
      grid-area: 1/1;
      min-block-size: 700px;
      place-items: center;

&:has(.avatar-link-wrapper:is(:hover, :focus-visible, :active)) {
        --animation-state: paused;
        /* Reduces opacity of non-hovered avatars to create a layered effect */
        --avatar-opacity: 0.4;
      }
    }
  }

.card {
    padding: 0;

/* lg-n-above */
    @media (width >=1024px) {
      --radius: min(620px, 40cqi);
      --offset-per-child: calc(360deg / (var(--nth-siblings) + 1));
      --angle-offset: calc(var(--nth-child) * var(--offset-per-child));
      --inline-ratio: 1/1;
      /* Keeps the horizontal scaling unchanged */
      --block-ratio: 1/2;
      /* Reduces vertical scaling, making it an oval */

/* Adjusts tooltip direction based on avatar position */
      /* Future improvement: Replace with the sign() CSS function when it becomes widely supported */
      /* Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/sign */
      --direction: min(max(calc(cos((var(--angle) + var(--angle-offset))) * -100), -1), 1);

/* Stack all cards in the same grid cell */
      grid-area: 1/1;

/* Based on Bramus' article, modified with inline/block ratios to create an oval shape */
      /* Source: https://web.dev/articles/css-trig-functions */

translate: calc(cos((var(--angle) + var(--angle-offset))) * var(--radius) * var(--inline-ratio))
        calc(sin((var(--angle) + var(--angle-offset))) * var(--radius) * var(--block-ratio) * -1);

animation: adjust-angle linear 40s infinite reverse var(--animation-state);
    }
  }

/* Continuously rotates the avatars in a circular motion */
  @keyframes adjust-angle {
    to {
      --angle: 360deg;
    }
  }

.avatar-link-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-1);

&:is(:hover, :focus-visible, :active) {
      --avatar-img-scale: 1.1;
      --avatar-opacity: 1;
      --tooltip-opacity: 1;
      --tooltip-visibility: visible;
    }

/* lg-n-below */
    @media (width < 1024px) {
      flex-direction: column;
      gap: 16px;
    }
  }

.visual {
    aspect-ratio: 1;
    border-radius: 1rem;
    box-shadow: 0 2px 4px 0 oklch(0 0 0 / 10%);
    inline-size: 240px;
    opacity: var(--avatar-opacity);
    overflow: clip;
    transition: opacity 0.3s ease;

/* lg-n-above */
    @media (width >=1024px) {
      inline-size: 144px;
      border-radius: 1e5px;
    }
  }

.avatar-img {
    background-color: var(--surface-2);
    block-size: 100%;
    display: block;
    inline-size: 100%;
    object-fit: cover;
    scale: var(--avatar-img-scale, 1);
    transition: scale 0.3s ease;
  }

.tooltiptext {
    display: grid;
    gap: 4px;

/* lg-n-above */
    @media (width >=1024px) {
      position: absolute;
      /* Adjusts tooltip placement based on avatar position */
      /* Moves the tooltip to the left or right depending on the avatar's location */
      /* --direction is either 1 (right) or -1 (left) */
      max-inline-size: 20ch;
      opacity: var(--tooltip-opacity);
      transition-duration: 0.3s;
      transition-property: opacity, visibility;
      transition-timing-function: ease;
      translate: 110% 0;
      visibility: var(--tooltip-visibility);

/* make the tooltips non-interactive */
      pointer-events: none;
      user-select: none;

/* Adjusts text alignment based on avatar position */
      /* Ensures the tooltip text aligns properly when shifted left or right */
      @container style(--direction: -1) {
        text-align: end;
        translate: -110% 0;
      }
    }
  }

.team-name {
    font: var(--title);
  }
}

Consigliato

Una home page creata con directory

Pagina di accesso al CoffeeShop con effetto vetro e Tailwind

Film di carte CSS pure 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS