Cabeçalho fixo orientado por rolagem

Abrir no Editor Publique Seu Código

Recomendado

1 November 2024

Site de portfólio HTML com menu lateral

20 December 2024

<main>
  <h1 class="scrollDrivenHeading" aria-hidden="true"></h1>
  
  <section class="primary-colors">
    <h1 class="srOnly">Primary Colors</h1>
    <p>The three primary colors (red, blue, and yellow) form the basis of all other colors on the color wheel. Mixing them in different combinations produces a wide array of hues.</p>
    <div class="color-wheel-container">
      <div class="color-wheel">
        <div class="color-segment red"></div>
        <div class="color-segment blue"></div>
        <div class="color-segment yellow"></div>
      </div>
    </div>
    <img src="https://assets.codepen.io/1948355/colors.jfif" alt="A vibrant explosion of multicolored abstract shapes resembling thick paint strokes in red, yellow, blue, and orange, forming a dynamic, swirling pattern.">
  </section>
  
  <section class="red-section">
    <h2 class="srOnly">Red Power</h2>
    <p>Red is a bold and vibrant color, symbolizing energy, passion, and warmth. It easily attracts attention and is often linked with strong emotions.</p>
    <div class="color-details">
      <div class="color-stats">
        <div class="stat">
          <span class="stat-value">#FF0000</span>
          <span class="stat-label">Hex</span>
        </div>
        <div class="stat">
          <span class="stat-value">0°, 100%, 50%</span>
          <span class="stat-label">HSL</span>
        </div>
        <div class="stat">
          <span class="stat-value">255, 0, 0</span>
          <span class="stat-label">RGB</span>
        </div>
      </div>
    </div>
    <img src="https://assets.codepen.io/1948355/red.jfif" alt="A dramatic, glowing red lightning bolt striking through clouds from the sky, surrounded by electric energy and a celestial backdrop.">
  </section>
  
  <section class="blue-section">
    <h2 class="srOnly">Blue Calm</h2>
    <p>Blue is a calm and cool color, representing tranquility, stability, and trust. It evokes images of the sky and sea, creating a peaceful mood.</p>
    <div class="color-details">
      <div class="color-stats">
        <div class="stat">
          <span class="stat-value">#0000FF</span>
          <span class="stat-label">Hex</span>
        </div>
        <div class="stat">
          <span class="stat-value">240°, 100%, 50%</span>
          <span class="stat-label">HSL</span>
        </div>
        <div class="stat">
          <span class="stat-value">0, 0, 255</span>
          <span class="stat-label">RGB</span>
        </div>
      </div>
    </div>
    <img src="https://assets.codepen.io/1948355/blue.jfif" alt="A serene digital landscape with a calm river winding through green hills and clusters of lush trees under soft morning light.">
 </section>
  
  <section class="yellow-section">
    <h2 class="srOnly">Yellow Joy</h2>
    <p>Yellow is a bright and cheerful color, standing for light, optimism, and creativity. It is highly visible and brings a sense of happiness and hope.</p>
    <div class="color-details">
      <div class="color-stats">
        <div class="stat">
          <span class="stat-value">#FFFF00</span>
          <span class="stat-label">Hex</span>
        </div>
        <div class="stat">
          <span class="stat-value">60°, 100%, 50%</span>
          <span class="stat-label">HSL</span>
        </div>
        <div class="stat">
          <span class="stat-value">255, 255, 0</span>
          <span class="stat-label">RGB</span>
        </div>
      </div>
    </div>
    <img src="https://assets.codepen.io/1948355/yellow.jfif" alt="A bright sunny field filled with yellow and blue flowers, with butterflies flying under a blue sky with scattered clouds and rays of sunlight.">
  </section>
</main>

CSS

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Open+Sans:wght@400;600;700&display=swap');

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
  --red: #FF0000;
  --blue: #0000FF;
  --yellow: #FFFF00;
  --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  line-height: 1.6;
}

main {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 4em;
  padding: 2em 1em;
}

section {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  border-bottom: 4px solid #333;
  padding: 2em 1em 6em;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition);
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

h1, h2 {
  font-family: "Kaushan Script", cursive;
  font-weight: normal;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.2;
}

p {
  font-size: 1.1rem;
  max-width: 65ch;
}

img {
  width: 100%; 
  height: 75dvh;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: var(--transition);
}

img:hover {
  transform: scale(1.01);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.color-wheel-container {
  display: flex;
  justify-content: center;
  margin: 1em 0;
}

.color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.color-wheel:hover {
  transform: rotate(180deg);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.color-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 50%);
  transform-origin: 50% 50%;
}

.color-segment.red {
  background-color: var(--red);
  transform: rotate(0deg);
}

.color-segment.blue {
  background-color: var(--blue);
  transform: rotate(120deg);
}

.color-segment.yellow {
  background-color: var(--yellow);
  transform: rotate(240deg);
}

.color-details {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.5em;
  margin: 1em 0;
}

.color-stats {
  display: flex;
  gap: 1.5em;
  justify-content: space-around;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.stat-value {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.3em;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.red-section .stat-value { color: var(--red); }
.blue-section .stat-value { color: var(--blue); }
.yellow-section .stat-value { color: var(--yellow); }

.scrollDrivenHeading {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .scrollDrivenHeading {
    display: block;
    position: sticky;
    top: 0;
    background-image: linear-gradient(0deg, transparent, black 1.5em);
    padding: 1em 0.5em;
    white-space: nowrap;
    z-index: 100;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    
    &::after {
      content: '';
      animation: headingContent step-end;
      animation-timeline: scroll();
    }
  }
  
  .srOnly {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }
}

@keyframes headingContent {
  0% { content: 'Primary Colors'; }
  
  9% { content: 'Primary Color'; }
  10% { content: 'Primary Colo'; }
  11% { content: 'Primary Col'; }
  12% { content: 'Primary Co'; }
  13% { content: 'Primary C'; }
  14% { content: 'Primary '; }
  15% { content: 'Primary'; }
  16% { content: 'Primar'; }
  17% { content: 'Prima'; }
  18% { content: 'Prim'; }
  19% { content: 'Pri'; }
  20% { content: 'Pr'; }
  21% { content: 'P'; }
  
  22%, 51% { content: 'R'; color: var(--red); text-shadow: 0 0 10px rgba(255, 0, 0, 0.7); }
  23%, 50% { content: 'Re'; }
  24%, 49% { content: 'Red'; }
  25%, 48% { content: 'Red '; }
  26%, 47% { content: 'Red P'; }
  27%, 46% { content: 'Red Po'; }
  28%, 45% { content: 'Red Pow'; }
  29%, 44% { content: 'Red Powe'; }
  
  30% { content: 'Red Power'; }
  
  52%, 80% { content: 'B'; color: var(--blue); text-shadow: 0 0 10px rgba(0, 0, 255, 0.7); }
  53%, 79% { content: 'Bl'; }
  54%, 78% { content: 'Blu'; }
  55%, 77% { content: 'Blue'; }
  56%, 76% { content: 'Blue '; }
  57%, 75% { content: 'Blue C'; }
  58%, 74% { content: 'Blue Ca'; }
  59%, 73% { content: 'Blue Cal'; }

60% { content: 'Blue Calm'; }
  
  81% { content: 'Y'; color: var(--yellow); text-shadow: 0 0 10px rgba(255, 255, 0, 0.7); }
  82% { content: 'Ye'; }
  83% { content: 'Yel'; }
  84% { content: 'Yell'; }
  85% { content: 'Yello'; }
  86% { content: 'Yellow'; }
  87% { content: 'Yellow '; }
  88% { content: 'Yellow J'; }
  89% { content: 'Yellow Jo'; }
  
  90%, 100% { content: 'Yellow Joy'; color: var(--yellow); }
}

@media (max-width: 768px) {
  main {
    gap: 3em;
  }
  
  section {
    padding-bottom: 4em;
  }
  
  .color-stats {
    flex-direction: column;
    gap: 1em;
    align-items: flex-start;
  }
  
  .stat {
    flex-direction: row;
    gap: 0.5em;
    align-items: center;
    min-width: auto;
  }
  
  .stat-value {
    margin-bottom: 0;
  }
}

/* Intersection Observer animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Cabeçalho fixo orientado por rolagem

Recomendado

Site de portfólio HTML com menu lateral

Um código por staticclass394

Um código por Redllowge

HTML

CSS

JS

Recomendado

Site de portfólio HTML com menu lateral

Um código por staticclass394

Um código por Redllowge

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS