Pagină internă · nu e în meniu

Gimmicks

11 efecte pentru site-uri, de la simplu la complex. Toate sunt făcute întâi pentru telefon. Deschide pagina pe iPhone, derulează și spune-mi numerele pe care le păstrăm.

Firefox și „Reduce motion” văd varianta statică. Așa trebuie.

  1. 01
  2. 02
  3. 03
  4. 04
  5. 05
  6. 06
  7. 07
  8. 08
  9. 09
  10. 10
  11. 11
01

Bara de sus se strânge

Scroll-linked header · animation-timeline: scroll()

Uită-te la bara de sus cât derulezi. Logo-ul se micșorează, bara capătă umbră, iar linia roșie de jos arată cât din pagină ai citit.

Complexitate
●○○○○○○ 1 din 7
Bun pentru
Orice site. Pagini lungi: articole, oferte, termeni.
Merge pe
iPhone (Safari 26+), Android Chrome. Firefox: bara rămâne fixă.
02

Imaginea se deschide

Clip-path reveal · view()

Fiecare imagine se dezvăluie când intră pe ecran: din stânga, de jos sau dintr-un cerc din mijloc.

Telefoane Mureș, pagina principală
din stânga · telefoanemures.ro
FixLand Geodesy, pagina principală
de jos · fixland-geodesy.ro
Termolink, pagina principală
cerc · termolink.ro
Complexitate
●●○○○○○ 2 din 7
Bun pentru
Portofolii, galerii de produse, poze de proiect.
Merge pe
iPhone (Safari 26+), Android Chrome. Altfel: imaginea apare normal.
03

Drumul se desenează PĂSTRAT

SVG line drawing · stroke-dashoffset + view()

O linie se trasează odată cu degetul tău, iar fiecare oprire apare când linia ajunge la ea. Bun pentru un proces în pași.

Ne spui ce vrei01 · APEL SAU VOCAL Demo gratuit02 · ÎNAINTE DE ÎNTÂLNIRE Prezentare03 · 20 DE MINUTE Lansăm04 · ȘI EVOLUĂM
Complexitate
●●○○○○○ 2 din 7
Bun pentru
„Cum lucrăm”, livrare, traseul unei comenzi, o hartă.
Merge pe
iPhone (Safari 26+), Android Chrome. Altfel: linia e deja desenată.
04

Cifrele numără

Animated counter · @property <integer> + counter()

Cifrele pornesc de la zero și urcă până la valoarea reală când ajung pe ecran. Fără JavaScript. Numai cifre adevărate.

11

site-uri live în portofoliu

20

de minute durează prezentarea

4

pași de la vocal la lansare

Complexitate
●●●○○○○ 3 din 7
Bun pentru
Secțiunea de rezultate: clienți, comenzi, ani, kilograme reciclate.
Merge pe
Android Chrome sigur. iPhone: de verificat pe telefon. Altfel: apare cifra finală.
05

Textul se aprinde PĂSTRAT

Word-by-word scroll highlight · view-timeline

Cuvintele trec din gri în albastru închis, unul câte unul, în ritmul în care derulezi. Ritmul de citire îl dă degetul.

Nu vindem pachete. Ascultăm ce te încurcă, construim un demo care funcționează și abia apoi vorbim de bani. Dacă îl poți descrie, îl putem construi.

Complexitate
●●●○○○○ 3 din 7
Bun pentru
Manifestul firmei, o promisiune, un citat de client.
Merge pe
iPhone (Safari 26+), Android Chrome. Altfel: textul e normal.
06

Înainte și după

Before/after slider · clip-path + pointer events

Trage cu degetul stânga-dreapta peste imagine. Schița devine site-ul livrat. Derularea în sus și în jos merge în continuare.

Site-ul GDI Electric Cab, livrat
Complexitate
●●●○○○○ 3 din 7
Bun pentru
Renovări, curățenie, reparații, site vechi și site nou, foto editat.
Merge pe
Toate browserele. Și cu tastatura (săgeți).
07

Carusel cu focus

Scroll-snap carousel · view(inline) scale + live dots

Glisezi lateral. Cardul din centru crește, celelalte se estompează, iar punctele de jos arată unde ești.

  • GDI Electric Cab
    GDI Electric Cab · reciclare cabluri
  • Creathor
    Creathor · educație pentru creatori
  • INEO
    INEO · magazin RO și FR
  • AxaCont
    AxaCont · contabilitate
  • Barbura & Barbura
    Barbura & Barbura · avocați
Complexitate
●●●●○○○ 4 din 7
Bun pentru
Produse recomandate, recenzii, proiecte, echipă.
Merge pe
Glisarea: toate. Efectul de focus: iPhone (Safari 26+), Android Chrome.
08

Cardurile se stivuiesc PĂSTRAT

Stacking sticky cards · position: sticky + view-timeline

Fiecare card se oprește sus, iar următorul alunecă peste el. Cele din spate se micșorează și se întunecă, ca un teanc de foi.

  1. 01 · Ce construim

    Magazine online

    Rapide pe telefon, cu plată cu cardul și ramburs, gata pentru mai multe țări.

  2. 02 · Ce construim

    Aplicații interne

    Programul pe care nu-l găsești de cumpărat: comenzi, livrări, documente, stoc.

  3. 03 · Ce construim

    Automatizări

    Facturi, AWB-uri, e-mailuri, rapoarte. Ce faceți acum de mână se face singur.

  4. 04 · Ce construim

    Asistenți AI

    La telefon, pe chat sau în spatele magazinului: răspund, preiau rezervări, citesc documente.

Complexitate
●●●●○○○ 4 din 7
Bun pentru
Servicii, pachete, pași, beneficii. 3–5 carduri.
Merge pe
Stivuirea: toate. Micșorarea: iPhone (Safari 26+), Android Chrome.
09

Derulezi în jos, merge în lateral

Horizontal scroll section · sticky + translate on view-timeline

Secțiunea se fixează pe ecran. Tu derulezi în jos, iar panourile trec de la dreapta la stânga. La final, pagina continuă normal.

  1. 01

    Ne spui ce vrei

    La telefon, pe WhatsApp sau în formular. Cu cuvintele tale.

  2. 02

    Construim demo-ul gratuit

    Înainte de prima întâlnire. Nu machete: o variantă care funcționează.

  3. 03

    Prezentare de 20 de minute

    Pe Google Meet, la telefon sau față în față.

  4. 04

    Lansăm și evoluăm

    După lansare rămânem partenerul tău. Ceri, construim, lună de lună.

Complexitate
●●●●●○○ 5 din 7
Bun pentru
Un proces, o cronologie, o colecție. 3–5 panouri.
Merge pe
iPhone (Safari 26+), Android Chrome. Altfel: panourile se glisează lateral cu degetul.
10

Scena la scroll PĂSTRAT

Scrollytelling · pinned scroll scene · view-timeline + animation-range

Panoul stă pe loc, iar tu derulezi prin trei stări: vocalul, planul, aplicația. E semnătura homepage-ului BrandOps și primul efect din catalog.

01 · vocal

Ne spui ce te încurcă

Un mesaj vocal, în cuvintele tale.

02 · plan

Desenăm soluția

Ce intră, ce iese, unde ajung datele.

03 · livrat

O folosești

Pozezi buletinul, borderoul se completează singur.

0:42 · mesaj vocal Pierdem timp copiind din buletine pe fiecare borderou de achiziție. Se poate face să se completeze singur?
FIG. 02 · PLANUL POZĂ BULETIN CITIRE AUTOMATĂ NUME · CNP · ADRESĂ BORDEROU COMPLETAT VERIFICĂ OMUL, 1 CLIC ZERO COPY-PASTE
Complexitate
●●●●●●○ 6 din 7
Bun pentru
O singură poveste pe pagină: un proces, o transformare, un produs care se schimbă.
Merge pe
iPhone (Safari 26+), Android Chrome. Altfel: cele trei stări una sub alta.
11

Cardul devine pagină

Shared-element morph · View Transitions API

Atinge un card. Imaginea și titlul cresc și devin pagina proiectului, ca într-o aplicație. Butonul „Înapoi” al telefonului te duce exact unde erai.

Complexitate
●●●●●●● 7 din 7
Bun pentru
Produs → pagina produsului, proiect → studiu de caz, articol → citire.
Merge pe
iPhone (Safari 18+), Android Chrome, Firefox 144+. Altfel: se deschide fără animație.

Spune-mi numerele pe care le păstrăm, de exemplu „2, 5, 8”. Le adaug în catalogul de efecte pentru site-urile viitoare.