Come creare un effetto Apple Style con HTML, CSS e JavaScript

La possibilità di implementare un effetto Apple Style rappresenta un'opportunità di distinguersi in un momento in cui le moderne interfacce web non si limitano più a semplici animazioni di comparsa. Sempre più siti web utilizzano infatti elementi che cambiano forma mentre l'utente scorre la pagina, creando un'esperienza immersiva e professionale.

Effetto Apple Style: come trasformare una sezione in un cerchio durante lo scroll con HTML, CSS e JavaScript

In questo tutorial realizzeremo un effetto ("Apple Style") molto utilizzato nei portfolio creativi: una sezione contenente un'immagine partirà come un grande rettangolo e, durante lo scroll, si trasformerà gradualmente in un cerchio che continuerà ad accompagnare l'utente lungo la pagina.

Per far questo tilizzeremo esclusivamente:

• codice HTML;
• regole CSS;
• JavaScript puro.

Durante lo scroll il componente:

• si restringe progressivamente;
• diventa perfettamente circolare;
• rimane visibile durante lo scroll;
• crea un effetto moderno e dinamico.

questo è il risultato finale che desideriamo ottenere dal nostro lavoro:

Creiamo la struttura HTML

Iniziamo creando una Hero e l'elemento che verrà trasformato durante lo scroll. Questo è il codice HTML del nostro progetto:

<section class="hero">
  <div class="hero-wrapper">
    <div class="hero-image">
      <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600" alt="Tecnologia">
    </div>

    <div class="hero-text">
      <h1>Il futuro del Web Design</h1>
      <p>Esperienze digitali immersive</p>
    </div>
  </div>
</section>
<section class="content"></section>

In questo modo abbiamo creato una sorta di "contenitore" che ospita un'immagine e una seconda sezione utile per testare lo scroll.

Creiamo lo stile CSS

All'inizio l'elemento verrà impostato con una larghezza pari a circa l'80% della pagina, lasciando quindi dello spazio visibile sui lati per creare un effetto più leggero e raffinato rispetto ad una sezione a piena larghezza.

I bordi saranno leggermente arrotondati tramite la proprietà border-radius, creando un aspetto più morbido e moderno, ispirato ai principi di design utilizzati nelle interfacce contemporanee. Questa configurazione iniziale permetterà all'elemento di distinguersi dallo sfondo circostante e creerà una sensazione di profondità e separazione dal resto del layout.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background: #000;
  color: white;
}

.hero {
  height: 250vh;
  position: relative;
}
.hero-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hero-image {
  width: 80%;
  height: 75vh;
  overflow: hidden;
  border-radius: 40px;
  transform: scale(1) rotate(0deg);
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-text {
  position: absolute;
  text-align: center;
  opacity: 1;
  transform: scale(1);
  transition: opacity .4s ease, transform .4s ease;
}
.hero-text.hide {
  opacity: 0;
  transform: scale(.8);
}

.hero-text h1 {
  font-size: clamp(45px, 7vw, 90px);
}
.hero-text p {
  font-size: 24px;
  margin-top: 20px;
}

.content {
  background: #000;
  min-height: 350vh;
}

Utilizziamo position:sticky per mantenere l'elemento visibile durante lo scroll e accompagnare l'utente lungo tutta la pagina.

Trasformiamo il rettangolo in un cerchio per ottenere l'effetto Apple Style

Ora, con JavaScript modificheremo larghezza, altezza e border-radius in base allo scroll dell'utente.

const hero = document.querySelector(".hero");
const image = document.querySelector(".hero-image");
const img = document.querySelector(".hero-image img");
const text = document.querySelector(".hero-text");

window.addEventListener("scroll", () => {
  const scroll = window.scrollY;
  const maxScroll = hero.offsetHeight - window.innerHeight;
  let progress = scroll / maxScroll;
  progress = Math.min(Math.max(progress, 0), 1);

  /*
  FASE 1
  Rettangolo → quasi cerchio
  */
  if (progress < 0.7) {
    let p = progress / 0.7;
    let width = 80 - (50 * p);
    let height = 75 - (45 * p);
    let radius = 40 + (160 * p);

    image.style.width = width + "%";
    image.style.height = height + "vh";
    image.style.borderRadius = radius + "px";
    image.style.transform = "rotate(0deg)";
    /*
    Riappare tornando indietro
    */
    text.classList.remove("hide");
  }
  /*
  FASE 2
  Cerchio + rotazione
  */
  else {
    let p = (progress - 0.7) / 0.3;

    image.style.width = "300px";
    image.style.height = "300px";
    image.style.borderRadius = "50%";
    let rotation = p * 360;
    image.style.transform = `rotate(${rotation}deg)`;

    /*
    Fade OUT testo
    */
    text.classList.add("hide");
  }
});

Ad ogni movimento della pagina calcoliamo una percentuale di avanzamento e aggiorniamo le dimensioni dell'elemento. Il risultato sarà una trasformazione progressiva da grande rettangolo a piccolo cerchio.

In questo modo abbiamo creato un componente che cambia completamente forma durante lo scroll. Questo tipo di animazione è perfetto per un portfolio, una landing page e dei siti web creativi, perché rende la navigazione più coinvolgente senza la necessità di utilizzare delle librerie esterne.