Sommers 1.0 — toggle reveal hero

Produs Ruben Stom: Animated Hero Banner Prompts + Website Files (rubenstom.gumroad.com/l/Animated-Hero-Banner). Pagina live: /sommers/ · sursa zip: 27. The Toggle Reveal Hero.

• Hero pe tot ecranul cu doua clipuri suprapuse: aceeasi camera cu lumina stinsa si cu lumina aprinsa.
• Un intrerupator asezat chiar in interiorul literei O din SOMMERS. Il apesi si camera se aprinde, cu o trecere de 1,2 secunde.
• Cat timp lumina e stinsa, cursorul se poarta ca o lanterna: un cerc moale care descopera clipul luminat doar acolo unde treci cu mouse-ul. Cand aprinzi lumina, lanterna dispare.
• Loader negru la incarcare, care blocheaza clicul pana se stinge.
• Dedesubt, o sectiune de citat.

• Nicio librarie. Lanterna e un mask-image cu gradient radial, mutat din JS prin variabile CSS, cu interpolare intr-un requestAnimationFrame.
• Doua fonturi Google: Newsreader si Tenor Sans.
• Header si footer dezactivate din setarile de pagina; bodyClasses: sommers.

O sectiune, un element Code. Sursa era un singur fisier cu CSS si JS inline: markup 2,5 KB in code, 5,6 KB in cssCode, 2,5 KB in javascriptCode. Totul scopat sub .tr, id-urile prefixate tr-. Caile catre cele doua imagini de intrerupator au devenit doua constante la inceputul scriptului.

Doua clipuri de 6 secunde, rescalate la 1600px si reincodate la CRF 21: 5,4 MB → 1,1 MB. Doua imagini de intrerupator, 1238×1238 PNG cu transparenta → 400×400 (4 MB → 340 KB). Plus doua postere JPG facute din cadrele care veneau in arhiva.

Atentie: clipul cu lumina aprinsa e folosit de doua ori in pagina — o data pentru trecere, o data pentru lanterna. Fisierul se descarca o singura data, dar ruleaza doua decodari in paralel.

• height: 100% pe html si body muta scroll-ul in body. Sursa il avea, impreuna cu overflow-x: hidden. Efectul: pagina se deruleaza inauntrul lui body, window.scrollY ramane 0, iar inaltimea documentului se opreste la un ecran — sectiunea de citat nu mai intra in ea (1044px in loc de 1705px). Hero-ul isi ia oricum inaltimea din 100vh, asa ca am scos height si pagina se deruleaza normal.
• Trei valori rem in sectiunea de citat, convertite in px.
• De verificat cu mana: trecerea de 1,2s la apasarea intrerupatorului si lanterna care urmareste cursorul. Amandoua depind de tranzitii CSS si de requestAnimationFrame, care sunt oprite intr-un tab de fundal. Comutarea in sine — clasa, imaginea, ascunderea lanternei — e verificata.

1. Reincodeaza cele doua clipuri la 1600px, micsoreaza cele doua PNG-uri de intrerupator, fa doua postere. Toate in biblioteca media.
2. Desparte CSS-ul si JS-ul din pagina sursa, converteste cele trei rem, prefixeaza selectorii cu .tr (lasa html si body), si scoate height: 100% de pe html/body.
3. Prefixeaza id-urile cu tr-, pune caile catre uploads si poster pe cele doua clipuri de fundal, invelesta in <div class="tr">.
4. Un element Code intr-o sectiune fara padding; setarile de pagina ca mai sus.