La luce delle persiane

/* La luce delle persiane
   Sopra tutta la pagina cade la luce di una finestra con le persiane chiuse a metà: righe di luce e d’ombra,
   sfumate, col montante in mezzo, disegnate con due gradienti. Scorrendo il pomeriggio passa: la finestra
   proiettata gira, si allunga e scivola sulla pagina come il sole che scende. In fondo, ai contatti, viene
   sera: i colori della pagina passano al verde notte e le righe di luce restano sul buio. */

gsap.registerPlugin(ScrollTrigger);

/* ---- valori da cambiare ---- */
const POMERIGGIO = { rotation: -26, skewX: -8, scaleY: 1, xPercent: 0, yPercent: 0 };      /* la luce in cima alla pagina */
const TRAMONTO = { rotation: -46, skewX: -22, scaleY: 1.45, xPercent: 34, yPercent: 10 };  /* la luce in fondo */
const SCIVOLA_TELEFONO = 10;   /* sul telefono la finestra copre già lo schermo: verso destra scivola meno */
const SERA = {
  '--fondo': '#17211B',
  '--testo': '#EFE9DC',
  '--tenue': '#AEB6A4',
  '--luce': 'rgba(255, 222, 160, 0.2)',
  '--ombra': 'rgba(0, 0, 0, 0.2)',
};

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const finestra = document.querySelector('[data-finestra]');
const contatti = document.querySelector('[data-contatti]');

/* ---------------------------------------------------------------- il pomeriggio che passa */
gsap.set(finestra, POMERIGGIO);

Il codice di questa animazione è nell’accesso a vita.

L’anteprima resta libera: guardala, rallentala, provala sul telefono.