Animação de órbita infinita com trigonometria CSS

Abrir no Editor Publique Seu Código

Recomendado

6 March 2025

Exemplo de seletor de data HTML

12 April 2025

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

Animação de órbita infinita com trigonometria CSS

Recomendado

Um código por lebdev

Exemplo de seletor de data HTML

Um Código de Dossousandrin

HTML

CSS

JS

Recomendado

Um código por lebdev

Exemplo de seletor de data HTML

Um Código de Dossousandrin

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS