Ynteraktyf webdesign

Gearfetting

In website hoecht gjin brosjuere te wêzen dêr't do foarby skrolst. Hieltyd faker meitsje ik ynteraktive websites, siden dêr't do mei spylje kinst: in globe dy't do draaist, keunstwurk dat plak makket foar dyn finger, gebouwen dy't harsels bouwe en lytse minskjes dy't weromprate. Yn dit berjocht lit ik fjouwer fan harren sjen!

Folsleine tekst

Spylje

Minsken ûnthâlde wat se oanrekke hawwe. In side dy't antwurdet op dyn mûs of finger noeget dy út om rûn te sjen, wat te besykjen, in bytsje langer te bliuwen. Dat wie eartiids dreech: komplekse 3D-technology, trage chips yn tillefoans, in batterij dy't leechrint... lestich! Mar troch ekstreme optimalisaasje en automatisearre AI-pipelines kin ik de lat no in stik heger lizze! NO KIN IT, IT KIN ECHT!!

Sjoch de film hjirûnder om it yn aksje te sjen:

In globe foar kardiology

gpcardio.org is it Global Primary Care Cardio Network: lêzingen, rjochtlinefernijings en in oersjoch fan de literatuer oer hert-, nier- en metabolike soarch, foar húsdokters. De thússide is in globe fan stippen mei de oanslutne ferienings fêstpind op harren lannen. De nijste lêzingen en fernijings draaie der as kaarten omhinne. Sleep de globe en de wrâld draait, tik op in kaart en de lêzing giet iepen, kies in chip en allinnich de fideo's bliuwe oer. BAM, DE HIELE WRÂLD! No, DAT is foarm jaan oan in wier globale ambysje!

[action1]

Keunstwurk dat rint

Foar in sportevenemint makke ik it keunstwurk fan de ûntwerper libben, mei 3D-shaders en WebGL. By de start barste de banen út it ovaal, folge troch confetti. De halftone-stippen reagearje op dyn finger of mûs, de banen sprinte as do skrolst, de sporten racen nei in finish mei elke kear in oare winner, en in gigantyske klok telt ôf nei de iepeningsdei. De libbene tekening komt foar 99,3% fan de piksels oerien mei it orizjinele keunstwurk, mar is teminsten 300% aardiger troch de ynteraktiviteit!

Gebouwen dy't harsels bouwe

Foar in yngenieursburo foar gebouwen en ynstallaasjes falle fjouwer tuorren ferdjipping foar ferdjipping op har plak. In scanline kleuret dan elke ferdjipping nei de steat dêr't se yn is, en it byld komt ta rêst yn griene dakken: de duorsume einsituaasje. Beweech dyn mûs en it toaniel draait mei dy mei. Fierderop rinne alle tsjinsten lâns it boupreses op ien horizontaal spoar, en trije ringen skowe byinoar as do skrolst. Dynamyk yn fêste aktiva? GJIN PROBLEEM!

Lytse minskjes

Foar in tsjinst foar arbeidsgesûnens joech ik de persoan yn harren logo in gesicht. Hâld de mûs oer ien en hy sjocht om 'e hoeke, tik derop en hy springt, dûnset of falt om en komt wer oerein, mei wat te sizzen. Se reine de side yn as do skrolst, en in hiele mannichte sortearret himsels yn 20, 60 en 20 prosint: ôfwêzigens mei in medyske oarsaak, mei persoanlike omstannichheden, en mei in oarsaak yn de organisaasje.

De pakketadviseur stelt fjouwer fragen. Mei elk antwurd feroarje de lytse minskjes: mear kollega's, flexwurkers, en wa't him sykmeldt giet lizzen. It advys lit sjen wat elk pakket per jier kostet, en do kinst it direkt nei de oanmelding nimme of om in telefoantsje freegje. Sykte en ôfwêzigens binne gjin wille, mar in figuerke dat omfalt is des te grappiger, en dy laits jout in oars serieus foarstel syn positive effekt.

Fluch wylst it beweecht

Ik bou dit op jierren ûnderfining mei spieltechnology: fan Snake '97 oant Protect Your Eggs, in spultsje dat ik makke mei myn bern fan sân, en trainingsdata yn 3D. De 3D-toanielen wurde tekene yn in worker njonken de side, sadat de side sels frij bliuwt om te reagearjen. Se tekenje allinnich as der wat feroaret en rêste in sekonde nei de lêste oanrekking. De lytse minskjes binne gewoan SVG en CSS. Efter elk 3D-toaniel sit in stilsteand byld, foar de earste werjefte, foar tillefoans dy't it net tekenje kinne, en foar besikers dy't leaver minder beweging hawwe. Gjin framework en gjin skript fan in tredde partij: de trije konseptsiden weagje tusken 0,15 en 0,46 MB.

Mjitten mei Lighthouse, it ark efter Google's PageSpeed Insights, prestaasje op de thússide, tillefoan / laptop:

| | Prestaasje | Grutste ynhâld (tillefoan) | |---|---|---| | gpcardio.org | 96 / 100 | 2,9 s | | It sportevenemint | 99 / 100 | 1,8 s | | It yngenieursburo | 100 / 100 | 1,4 s | | De tsjinst foar arbeidsgesûnens | 99 / 100 | 2,1 s |

Lighthouse 13.5, mediaan fan trije runs per side, 18 en 19 oktober 2026.

Konklúzje

Is it ek aardich?! Dat bleau in wize heechlearaar my freegjen oan de Universiteit. Dy 'les' pas ik no mei in soad wille ta: ynteraktyf webdesign is mear as in bytsje fersiering. It giet om optimisme en in bliuwende ynfloed dy't spilet mei natuerlike nijsgjirrigens! Wolst do ek meitinke oer de kreative mooglikheden, in side dy't minsken oanreitsje wolle? Stjoer my mar in berjocht!