CSS-i kerimisega seotud läbipaistvuse animatsioon: läbipaistvuse liikumise kontroll

Pidevalt arenevas veebidisaini maailmas on kaasahaaravate ja dünaamiliste kasutajakogemuste loomine esmatähtis. Traditsioonilised CSS-animatsioonid, kuigi võimsad, ei reageeri sageli kasutaja interaktsioonile. Kerimisega seotud animatsioonid pakuvad lahendust, võimaldades elementidel animeeruda kasutaja kerimisasendi põhjal. See tehnika annab loomulikuma ja intuitiivsema tunde, parandades veebisaidi interaktiivsust ja visuaalset atraktiivsust. Üks eriti tõhus rakendus on kerimisasendi kasutamine elementide läbipaistvuse kontrollimiseks, luues peeneid, kuid mõjusaid läbipaistvusefekte.

Kerimisega seotud animatsioonide mõistmine

Kerimisega seotud animatsioonid seovad animatsiooni edenemise otse kasutaja kerimistegevusega. Kui kasutaja lehte alla (või üles) kerib, muutuvad CSS-i omadused proportsionaalselt kerimisasendiga. See on vastupidine traditsioonilistele CSS-animatsioonidele, mille käivitavad sündmused nagu `:hover` või `:active` ja mis tunduvad sageli kasutaja vahetutest tegevustest eraldiseisvad.

Kerimisega seotud animatsioonide saavutamiseks on mitu tehnikat, millest igaühel on oma tugevused ja nõrkused:

• CSS Scroll Snap: Kuigi peamiselt loodud kerimiskogemuste loomiseks, kus vaateaken "klõpsatab" kindlatele elementidele, võib CSS Scroll Snap kaudselt mõjutada läbipaistvust, käivitades üleminekuid, kui element muutub nähtavaks. Siiski on otsene kontroll läbipaistvuse üle täpse kerimisasendi põhjal piiratud.
• Intersection Observer API: See JavaScripti API võimaldab teil jälgida, millal element siseneb vaateaknasse või väljub sellest (või mis tahes muust elemendist). Seejärel saate seda teavet kasutada CSS-klasside käivitamiseks, mis kontrollivad läbipaistvust. Kuigi see on võimas, nõuab see lähenemine JavaScripti ja võib hoolika rakendamise puudumisel jõudlust mõjutada.
• CSS `scroll()` funktsioon koos `animation-timeline`-iga: Kõige kaasaegsem ja jõudlusele orienteeritud lähenemine. See võimaldab natiivsel CSS-il siduda animatsiooni edenemise otse kerimisriba asendiga. Brauseritugi on endiselt arenemas, kuid see on kerimisega seotud animatsioonide tulevik.

See artikkel keskendub peamiselt `scroll()` funktsioonile koos `animation-timeline`-iga, et luua kerimisega seotud läbipaistvuse animatsioone, tutvustades selle võimalusi ja pakkudes praktilisi näiteid. Samuti käsitleme Intersection Observer API kasutamist laialdasema ühilduvuse ja paindlikkuse tagamiseks.

Miks kasutada kerimisega seotud läbipaistvuse animatsioone?

Läbipaistvuse kontrollimine kerimisasendi abil pakub veebidisainis mitmeid eeliseid:

• Parem kasutajakogemus: Peened läbipaistvuse muutused võivad suunata kasutaja pilku ja juhtida tähelepanu olulistele elementidele kerimise ajal. Näiteks võib kangelaspilt kasutaja allakerimisel järk-järgult sisse hajuda, luues sujuva ja kaasahaarava sissejuhatuse sisule.
• Täiustatud visuaalne hierarhia: Muutes elemente rohkem või vähem läbipaistvaks vastavalt nende olulisusele praeguse kerimisasendi suhtes, saate luua selgema visuaalse hierarhia, aidates kasutajatel mõista sisu struktuuri ja tähtsust. Kujutage ette külgriba, mis hajub sisse, kui kasutaja kerib mööda konkreetsest jaotisest, pakkudes kontekstitundlikku navigeerimist.
• Suurenenud interaktiivsus: Kerimisega seotud läbipaistvuse animatsioonid muudavad veebisaidid reageerivamaks ja interaktiivsemaks. Tunne, et elemendid reageerivad otse kasutaja sisendile (kerimisele), loob ühenduse ja kontrolli tunde.
• Loovad efektid: Läbipaistvuse animatsioone saab kombineerida teiste CSS-i omadustega, et luua unikaalseid ja visuaalselt vapustavaid efekte. Näiteks võite kombineerida läbipaistvuse muutusi skaleerimise või nihutamisega, et luua dünaamiline parallaksiefekt.

Kerimisega seotud läbipaistvuse animatsiooni rakendamine CSS-i `scroll()` funktsiooni ja `animation-timeline`-iga

`scroll()` funktsioon, mida kasutatakse koos `animation-timeline`-iga, pakub võimsat ja tõhusat viisi kerimisega seotud animatsioonide loomiseks puhtalt CSS-is. See toimib järgmiselt:

1. Määratlege animatsioon: Looge CSS-animatsioon, mis kontrollib läbipaistvuse omadust kindla kestuse jooksul.
2. Siduge animatsioon kerimisasendiga: Kasutage `animation-timeline: scroll()` omadust, et siduda animatsiooni edenemine dokumendi (või konkreetse elemendi) vertikaalse kerimisasendiga.
3. Peenhäälestage `animation-range`-iga: Määrake `animation-range` abil kerimisvahemik, mille jooksul animatsioon peaks toimuma. See võimaldab teil kontrollida täpset keritava ala osa, mis animatsiooni käivitab.

Näide 1: Kangelaspildi sissehajutamine

Loome lihtsa näite, kus kangelaspilt hajub sisse, kui kasutaja lehte alla kerib:

HTML:

            <div class="hero">
 <img src="hero-image.jpg" alt="Hero Image">
</div>

            

              
                Copy
              
            
          

CSS:

            .hero {
 height: 500px; /* Kohandage vastavalt vajadusele */
 overflow: hidden; /* Peida ülevoolav sisu */
 position: relative; /* Pildi positsioneerimiseks */
}

.hero img {
 width: 100%;
 height: auto;
 opacity: 0; /* Algselt peidetud */
 animation: fadeIn 2s linear forwards;
 animation-timeline: scroll();
 animation-range: 0vh 50vh; /* Animeeri vaateakna esimese 50vh jooksul */
 object-fit: cover; /* Tagab, et pilt katab ala */
}

@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

            

              
                Copy
              
            
          

Selgitus:

• `.hero` element määrab kangelasjaotise kõrguse ja asukoha. `overflow: hidden` tagab, et pilt ei voola üle, kui see on konteinerist suurem.
• `.hero img` elemendil on algselt `opacity: 0`, mis muudab selle nähtamatuks.
• `animation: fadeIn 2s linear forwards;` määratleb animatsiooni nimega `fadeIn`, mis kestab 2 sekundit lineaarse ajastusfunktsiooniga ja säilitab lõppoleku (opacity: 1).
• `animation-timeline: scroll();` seob animatsiooni dokumendi vertikaalse kerimisasendiga.
• `animation-range: 0vh 50vh;` määrab, et animatsioon peaks toimuma, kui kasutaja kerib vaateakna ülaosast (0vh) 50% alla (50vh).
• `@keyframes fadeIn` määratleb animatsiooni enda, liikudes `opacity: 0`-lt `opacity: 1`-le.

See näide demonstreerib põhilist sissehajumisefekti. Saate kohandada `animation-duration`, `animation-range` ja `@keyframes`, et animatsiooni oma konkreetsetele vajadustele vastavaks muuta.

Näide 2: Navigatsiooniriba väljahajutamine

Teine levinud kasutusjuht on navigatsiooniriba väljahajutamine, kui kasutaja alla kerib, muutes selle vähem pealetükkivaks. Siin on, kuidas seda rakendada:

HTML:

            <nav class="navbar">
 <!-- Navigatsioonilingid -->
</nav>

            

              
                Copy
              
            
          

CSS:

            .navbar {
 position: fixed; /* Kinnita naviriba üles */
 top: 0;
 left: 0;
 width: 100%;
 background-color: #fff; /* Või mis tahes soovitud taustavärv */
 padding: 10px 0;
 z-index: 1000; /* Tagab, et see on muu sisu peal */
 opacity: 1; /* Algselt nähtav */
 animation: fadeOut 1s linear forwards;
 animation-timeline: scroll();
 animation-range: 10vh 50vh; /* Haju välja 10vh ja 50vh vahel */
}

@keyframes fadeOut {
 from { opacity: 1; }
 to { opacity: 0; }
}

            

              
                Copy
              
            
          

Selgitus:

• `.navbar` element on fikseeritud asendis vaateakna ülaosas.
• `animation: fadeOut 1s linear forwards;` määratleb animatsiooni nimega `fadeOut`.
• `animation-timeline: scroll();` seob animatsiooni kerimisasendiga.
• `animation-range: 10vh 50vh;` määrab, et animatsioon peaks toimuma, kui kasutaja kerib 10% kuni 50% vaateaknast allapoole. See takistab naviriba kohest väljahajumist.
• `@keyframes fadeOut` määratleb animatsiooni, liikudes `opacity: 1`-lt `opacity: 0`-le.

See näide hajutab navigatsiooniriba välja. Saate ka `animation-range` ümber pöörata, et see sisse hajutada, kui kasutaja kerib teatud punktist mööda, luues kleepuva päise, mis ilmub ainult siis, kui seda on vaja.

Näide 3: Sisu paljastamine kerimisel

Saate kasutada läbipaistvust, et sisu järk-järgult paljastada, kui kasutaja kerib, luues avastamistunnet. See on eriti kasulik jaotiste jaoks, kus on palju teksti või pilte.

HTML:

            <section class="content-section">
 <h2>Section Title</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

            

              
                Copy
              
            
          

CSS:

            .content-section {
 margin-bottom: 50px; /* Lisa jaotiste vahele ruumi */
 opacity: 0; /* Algselt peidetud */
 transform: translateY(50px); /* Nihuta veidi alla */
 animation: reveal 1.5s ease-out forwards;
 animation-timeline: scroll();
 animation-range: entry 75%; /* Animeeri, kui jaotis siseneb vaateaknasse ja on 75% nähtav */
}

@keyframes reveal {
 from {
 opacity: 0;
 transform: translateY(50px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

            

              
                Copy
              
            
          

Selgitus:

• `.content-section` on algselt peidetud `opacity: 0`-ga ja veidi alla nihutatud `transform: translateY(50px)` abil. See loob dramaatilisema paljastamisefekti.
• `animation: reveal 1.5s ease-out forwards;` määratleb animatsiooni nimega `reveal` aeglustuva ajastusfunktsiooniga.
• `animation-timeline: scroll();` seob animatsiooni kerimisasendiga.
• `animation-range: entry 75%;` See on võtmetähtsusega. `entry` (või `exit`) märksõna viitab elemendi nähtavusele vaateakna suhtes. `entry 75%` tähendab, et animatsioon algab, kui elemendi ülaosa siseneb vaateaknasse ja lõpeb, kui 75% elemendist on nähtav.
• `@keyframes reveal` määratleb animatsiooni, liikudes `opacity: 0` ja `translateY(50px)` olekust `opacity: 1` ja `translateY(0)` olekusse.

Kerimisega seotud läbipaistvuse animatsiooni rakendamine Intersection Observer API-ga (JavaScript)

Kuigi CSS-i `scroll()` funktsioon ja `animation-timeline` pakuvad kõige kaasaegsemat ja jõudlusele orienteeritud lähenemist, võib brauseritugi olla piiratud. Intersection Observer API pakub robustset ja laialdaselt toetatud alternatiivi, ehkki see nõuab JavaScripti.

Intersection Observer API võimaldab teil jälgida, millal element siseneb vaateaknasse (või mõnda teise määratud elementi) või väljub sellest. Seejärel saate seda teavet kasutada CSS-klasside käivitamiseks, mis kontrollivad läbipaistvust.

Näide: Elementide sissehajutamine Intersection Observeriga

HTML:

            <div class="fade-in">
 <p>See element hajub kerimisel sisse.</p>
</div>

            

              
                Copy
              
            
          

CSS:

            .fade-in {
 opacity: 0; /* Algselt peidetud */
 transition: opacity 0.5s ease-in-out; /* Sujuv üleminek */
}

.fade-in.visible {
 opacity: 1; /* Nähtav, kui 'visible' klass on lisatud */
}

            

              
                Copy
              
            
          

JavaScript:

            const fadeInElements = document.querySelectorAll('.fade-in');

const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 entry.target.classList.add('visible');
 observer.unobserve(entry.target); // Lõpeta jälgimine, kui on nähtav
 } else {
 // Valikuline: Eemalda 'visible' klass, kui element pole enam nähtav
 // entry.target.classList.remove('visible');
 }
 });
});

fadedInElements.forEach(element => {
 observer.observe(element);
});

            

              
                Copy
              
            
          

Selgitus:

• `.fade-in` element on algselt peidetud `opacity: 0`-ga. Sujuva sissehajumisefekti loomiseks on lisatud `transition`.
• `.fade-in.visible` klass määrab `opacity` väärtuseks 1, muutes elemendi nähtavaks.
• JavaScripti kood kasutab `IntersectionObserver`it, et jälgida, millal `.fade-in` elemendid sisenevad vaateaknasse.
• Kui element on ristuv (nähtav), lisatakse sellele `visible` klass.
• `observer.unobserve(entry.target);` lõpetab elemendi jälgimise, kui see on nähtav. See on jõudluse seisukohalt oluline, kuna vaatleja ei pea jätkama elementide jälgimist, mis on juba animeeritud.
• Valikulist `else` plokki saab kasutada `visible` klassi eemaldamiseks, kui element pole enam nähtav, luues väljahajumisefekti, kui kasutaja tagasi üles kerib.

See näide demonstreerib lihtsat sissehajumisefekti Intersection Observer API abil. Saate kohandada CSS-klasse ja JavaScripti koodi, et luua keerukamaid animatsioone.

Jõudlusega seotud kaalutlused

Kuigi kerimisega seotud animatsioonid võivad kasutajakogemust märkimisväärselt parandada, on oluline arvestada jõudlusega, et vältida veebisaidi kiiruse ja reageerimisvõime negatiivset mõjutamist. Siin on mõned peamised jõudlusega seotud kaalutlused:

• Minimeerige JavaScripti kasutamist: CSS-i `scroll()` funktsioon koos `animation-timeline`-iga on üldiselt jõudsam kui JavaScriptil põhinevad lahendused nagu Intersection Observer API. Kasutage CSS-i alati, kui see on võimalik.
• Kasutage `will-change`: CSS-i omadus `will-change` võib anda brauserile vihje, et elemendi omadused hakkavad muutuma, võimaldades tal renderdamist optimeerida. Kasutage seda siiski säästlikult, kuna liigne kasutamine võib anda vastupidise efekti. Näiteks: `will-change: opacity;`
• Viivitage või piirake sündmuste käsitlejaid: Kui kasutate JavaScripti kerimissündmuste käsitlemiseks (isegi Intersection Observeriga), kasutage sündmuste käsitlejate viivitamist (debounce) või piiramist (throttle), et vältida liigseid funktsioonikutseid. See vähendab kordade arvu, mil brauser peab stiile ümber arvutama ja ekraani uuesti joonistama. Teegid nagu Lodash pakuvad mugavaid debounce- ja throttle-funktsioone.
• Optimeerige pilte ja muid varasid: Veenduge, et animatsioonides kasutatavad pildid ja muud varad on korralikult optimeeritud, et minimeerida faili suurust ja laadimisaega. Kasutage sobivaid pildivorminguid (nt WebP kaasaegsete brauserite jaoks), tihendage pilte ja kasutage laiska laadimist piltide jaoks, mis pole algselt nähtavad.
• Testige erinevatel seadmetel ja brauserites: Testige oma animatsioone põhjalikult erinevatel seadmetel ja brauserites, et tagada optimaalne jõudlus ja ühilduvus. Kasutage brauseri arendustööriistu jõudluse kitsaskohtade tuvastamiseks ja lahendamiseks.
• Vältige keerulisi arvutusi kerimiskäsitlejates: Hoidke oma kerimissündmuste käsitlejate (või Intersection Observeri tagasikutsete) loogika võimalikult lihtne ja tõhus. Vältige keerulisi arvutusi või DOM-i manipuleerimisi, mis võivad brauserit aeglustada.
• Kasutage riistvarakiirendust: Veenduge, et teie animatsioonid on riistvarakiirendusega, kasutades CSS-i omadusi, mis käivitavad GPU, näiteks `transform` ja `opacity`. See võib märkimisväärselt parandada jõudlust, eriti mobiilseadmetes.

Brauserite ühilduvus

Brauserite ühilduvus on kerimisega seotud läbipaistvuse animatsioonide rakendamisel oluline tegur. CSS-i `scroll()` funktsioon ja `animation-timeline` on suhteliselt uued funktsioonid ja ei pruugi olla täielikult toetatud kõigis brauserites, eriti vanemates versioonides.

Siin on üldine ülevaade brauserite ühilduvusest:

• CSS `scroll()` funktsioon ja `animation-timeline`: Tugi kasvab järk-järgult kaasaegsetes brauserites, sealhulgas Chrome, Firefox, Safari ja Edge. Kontrollige CanIUse.com-ist uusimat ühilduvusteavet. Kaaluge polütäite või tagavaralahenduse kasutamist vanemate brauserite jaoks.
• Intersection Observer API: Laialdaselt toetatud kaasaegsetes brauserites, sealhulgas Chrome, Firefox, Safari, Edge ja Opera. See teeb sellest usaldusväärse valiku laialdasema ühilduvuse tagamiseks.

Et tagada ühtlane kogemus erinevates brauserites, kaaluge järgmisi strateegiaid:

• Progressiivne täiustamine: Rakendage kõige arenenumaid tehnikaid (nt CSS `scroll()` funktsioon) brauseritele, mis neid toetavad, ja pakkuge tagavaralahendust vanemate tehnikate abil (nt Intersection Observer API) brauseritele, mis seda ei tee.
• Funktsioonide tuvastamine: Kasutage JavaScripti, et tuvastada brauseri tugi konkreetsetele funktsioonidele (nt `animation-timeline`) ja laadida tingimuslikult sobiv kood.
• Polütäited: Kasutage polütäiteid, et pakkuda tuge puuduvatele funktsioonidele vanemates brauserites. Olge siiski teadlik polütäidete mõjust jõudlusele.
• Sujuv tagasilangemine: Kujundage oma veebisait nii, et see toimiks korralikult ka siis, kui kerimisega seotud animatsioone ei toetata. Veenduge, et põhifunktsionaalsus ja sisu on endiselt juurdepääsetavad.
• Testimine: Testige oma animatsioone põhjalikult erinevates brauserites ja seadmetes, et tuvastada ühilduvusprobleeme.

Juurdepääsetavuse kaalutlused

Juurdepääsetavus on oluline kaalutlus igat tüüpi animatsioonide rakendamisel veebisaidil. Kerimisega seotud läbipaistvuse animatsioone tuleks kasutada viisil, mis ei mõjuta negatiivselt puuetega kasutajaid.

Siin on mõned juurdepääsetavuse kaalutlused:

• Vältige liigseid või häirivaid animatsioone: Liigsed või häirivad animatsioonid võivad olla desorienteerivad või isegi põhjustada krampe vestibulaarsete häiretega kasutajatel. Kasutage animatsioone säästlikult ja läbimõeldult.
• Pakkuge juhtnuppe animatsioonide peatamiseks või keelamiseks: Lubage kasutajatel animatsioone peatada või keelata, kui nad leiavad, et need on häirivad või ülekoormavad. Seda saab saavutada kasutajaeelistuste seadistuse pakkumisega või `prefers-reduced-motion` meediapäringu kasutamisega.
• Tagage piisav kontrast: Läbipaistvuse animatsioonide kasutamisel veenduge, et esi- ja taustavärvide vahel on piisav kontrast, et sisu oleks kergesti loetav.
• Kasutage semantilist HTML-i: Kasutage semantilisi HTML-elemente, et anda oma sisule selge ja loogiline struktuur. See aitab abitehnoloogiatel (nt ekraanilugejad) sisu mõista ja seda kasutajatele juurdepääsetaval viisil esitada.
• Testige abitehnoloogiatega: Testige oma animatsioone abitehnoloogiatega (nt ekraanilugejad), et tagada nende juurdepääsetavus puuetega kasutajatele.
• Arvestage kognitiivse koormusega: Keerulised animatsioonid võivad suurendada kognitiivset koormust, muutes kasutajatel sisu mõistmise ja töötlemise raskemaks. Hoidke animatsioonid lihtsad ja fokusseeritud ning vältige nende tarbetut kasutamist.
• Pakkuge alternatiivset sisu: Kui animatsioon edastab olulist teavet, pakkuge kasutajatele alternatiivset viisi selle teabe juurde pääsemiseks, näiteks tekstikirjelduse või staatilise pildi kaudu.

Globaalsed perspektiivid ja näited

Globaalsele sihtrühmale kerimisega seotud läbipaistvuse animatsioonide kujundamisel on oluline arvestada kultuuriliste erinevuste ja disainieelistustega. Mis ühes kultuuris hästi töötab, ei pruugi teises olla sama tõhus.

Siin on mõned globaalsed perspektiivid ja näited:

• Paremal-vasakule keeled: Veebisaitide puhul, mis toetavad paremalt-vasakule (RTL) keeli (nt araabia, heebrea), veenduge, et animatsioonid on visuaalse järjepidevuse säilitamiseks korralikult peegeldatud.
• Kultuurilised seosed värvidega: Olge animatsioonide värvide valimisel teadlik kultuurilistest seostest värvidega. Näiteks seostatakse valget värvi Lääne kultuurides sageli puhtuse ja rahuga, samas kui mõnes Aasia kultuuris seostatakse seda leinaga.
• Animatsiooni kiirus ja keerukus: Animatsiooni kiirust ja keerukust võib olla vaja kohandada vastavalt kultuurilistele eelistustele. Mõned kultuurid võivad eelistada aeglasemaid, peenemaid animatsioone, samas kui teised võivad olla vastuvõtlikumad kiirematele, dünaamilisematele animatsioonidele.
• Sisu tihedus: Mõnes kultuuris on veebisaitidel tavaliselt suurem sisu tihedus, mis võib mõjutada seda, kuidas animatsioone tajutakse ja kuidas neid tuleks rakendada.
• Näide 1: Jaapani reisiveebisait võib kasutada peeneid läbipaistvuse animatsioone, et paljastada maalilise asukoha erinevaid aspekte, kui kasutaja kerib, peegeldades Jaapani alahinnatud elegantsi esteetikat.
• Näide 2: Lõuna-Ameerika moebrändi veebisait võib kasutada julgemaid, dünaamilisemaid läbipaistvuse animatsioone, et esitleda oma erksaid ja energilisi disainilahendusi, peegeldades kultuurilist rõhku väljendusrikkusele ja elegantsile.
• Näide 3: Globaalsele sihtrühmale suunatud e-kaubanduse veebisait võib pakkuda kasutajatele võimalust kohandada animatsioonide kiirust ja intensiivsust vastavalt nende individuaalsetele eelistustele.

Kokkuvõte

CSS-i kerimisega seotud läbipaistvuse animatsioonid pakuvad võimsat ja mitmekülgset viisi kasutajakogemuse parandamiseks, visuaalse hierarhia täiustamiseks ja kaasahaaravate interaktsioonide loomiseks veebisaitidel. Kasutades CSS-i `scroll()` funktsiooni koos `animation-timeline`-iga või Intersection Observer API-d, saate luua peeneid, kuid mõjusaid läbipaistvusefekte, mis reageerivad otse kasutaja sisendile.

Siiski on nende animatsioonide rakendamisel oluline arvestada jõudluse, brauserite ühilduvuse, juurdepääsetavuse ja kultuuriliste erinevustega. Järgides selles artiklis toodud parimaid tavasid, saate luua kerimisega seotud läbipaistvuse animatsioone, mis on nii visuaalselt atraktiivsed kui ka tehniliselt korrektsed, pakkudes meeldivat kogemust kasutajatele üle kogu maailma.

Lisalugemist

• MDN Web Docs: Mozilla Developer Network pakub põhjalikku dokumentatsiooni CSS-animatsioonide, Intersection Observer API ja muude seotud veebitehnoloogiate kohta.
• CSS-Tricks: Populaarne veebiarenduse blogi artiklite ja õpetustega laias valikus CSS-teemadel, sealhulgas kerimisega seotud animatsioonid.
• Smashing Magazine: Juhtiv veebidisainerite ja arendajate veebiajakiri artiklitega kasutajakogemuse, juurdepääsetavuse ja esirakenduse arenduse kohta.