Atidenk gelmių spalvas

Ką rodo šis demo

Tai interaktyvi hero sekcija, kurioje pelės žymeklio ar prisilietimo judesys atidengia spalvotą animuotą vaizdo įrašą po nespalvotu fonu. Efektas sukuriamas naudojant HTML5 <canvas> elementą ir WebGL technologiją: kiekvieną kadrą programa skaičiuoja žymeklio padėtį ir dinamiškai piešia „lango" formą, pro kurią atsiskleidžia spalvotas turinys. Animuotas fonas yra optimizuotas .webm formato vaizdo įrašas, kuris automatiškai paleidžiamas be garso ir be vartotojo veiksmo.

Rezultatas — pirmas lankytojo kontaktas su svetaine tampa ne pasyvus, o aktyvus: žmogus instinktyviai pradeda judėti ir tyrinėti, todėl praleistas laikas puslapyje didėja, o pirmasis įspūdis tampa stipresnis.

Techninis sprendimas

Efektas sukurtas grynomis žiniatinklio technologijomis be papildomų bibliotekų:

• HTML5 Canvas 2D API — piešiamas apskritimas aplink žymeklį, naudojant globalCompositeOperation: "destination-in", kad išliktų tik toje vietoje esantis vaizdo įrašo kadras.
• Autoplay vaizdo įrašas — sklandžiai animuotos meduzos yra įrašytos kaip bejusmis, besikartojantis klipas; taip išvengiama sudėtingo animacijos kodo ir užtikrinamas sklandus 60 FPS vaizdas net mobiliuosiuose įrenginiuose.
• requestAnimationFrame — žymeklio pozicija atnaujinama kiekvieną ekrano atnaujinimą, todėl judesys atrodo momentiškas ir nenutrūkstamas.
• Prisilietimo palaikymas — tas pats efektas veikia planšetėse ir išmaniuosiuose telefonuose per touchmove įvykius.

Puslapio įkėlimo laikas išlieka žemas, nes vaizdo įrašas naudoja šiuolaikinį WebM kodavimą, o statinis JPEG fallback rodomas tol, kol vaizdo įrašas įkeliamas arba kai naršyklė nepalaiko automatinio paleidimo.

Kaip interaktyvios hero sekcijos padeda konversijai

Pirmieji 3–5 sekundės lemia, ar lankytojas liks svetainėje. Tradiciniai statiniai hero blokai su antrašte ir mygtuku nebeatlieka to darbo tose nišose, kur konkurencija intensyvi — dizaino studijose, technologijų startuoliuose, prabangos prekių ženkluose ar kūrybinėse agentūrose. Interaktyvi hero sekcija:

• Sulėtina „atšokimo" rodiklį (bounce rate), nes žmogus pradeda tyrinėti vietoj to, kad perskaitytų ir uždarytų.
• Perteikia techninę kompetenciją vizualiai — nereikia rašyti „mes kuriame modernias svetaines", nes lankytojas tai patiria pats.
• Kuria emocinį ryšį su prekės ženklu: unikalus, tik jūsų svetainei sukurtas efektas tampa atpažįstamu elementu.
• Pagerina socialinį dalijimąsi — neįprastos svetainės dažniau dalijamos žinutėse, socialiniuose tinkluose ir „Slack" kanaluose tarp kolegų.

Kam tinka šis sprendimas

Interaktyvios hero sekcijos labiausiai tinkamos:

• Kūrybinėms agentūroms ir dizaino studijoms — portfolio puslapis turi parodyti, ne tik papasakoti.
• Prabangos ir premium prekių ženklams — efektas sukuria išskirtinumo pojūtį nuo pirmos sekundės.
• Technologijų ir SaaS produktams — vizualinis „wow" momentas padeda perteikti produkto inovatyvumą.
• Renginių ir kampanijų puslapiams — vienkartinė emocinė patirtis sustiprina žinutę ir skatina registraciją.

Mes pritaikome efektą prie jūsų prekės ženklo spalvų, turinio ir struktūros — tiek kaip atskiras komponentas, tiek kaip viso puslapio dizaino dalis.