Како се градат интерактивните веб-страници

Лансирања на производи водени од скролање, анимирани страници што раскажуваат приказна, портфолио-сајтови што реагираат на секое движење – тоа се веб-страниците што ги тераат луѓето да прашаат „како воопшто се прави тоа?“. Искрениот одговор е помалку мистичен од ефектот: мал сет техники, применети со дисциплина, врз основа што е намерно здодевна.

Тоа е парадоксот што вреди да се разбере пред да ангажирате некого за ваков вид работа или сами да се обидете. Највпечатливите интерактивни сајтови одвнатре се изградени како најконвенционалните. Спектаклот е слој – а занаетот е во тоа колку внимателно тој слој се додава.

Почнете со документ, а не со платно

Под секоја добро изградена интерактивна страница лежи семантички HTML документ: вистински наслови, вистински пасуси, вистински линкови, во разумен редослед. Ова не е носталгија – тоа е она што пребарувачите го индексираат, што читачите на екран го изговараат, што прво се вчитува и што останува ако JavaScript откаже или сè уште се презема. Ако содржината постои само во излезот на скрипта или во canvas елемент, таа практично не постои за голем дел од веб.

Работниот метод е прогресивно подобрување: изградете го документот што работи насекаде, потоа додајте го стилот, па движењето. Секој слој го претпоставува претходниот и грациозно се сведува на него. Посетител на стар уред добива брза, читлива страница; посетител на нов хардвер ја добива целата кореографија; никој не добива празен екран со вртелешка.

Кутијата со алатки за анимација: прво CSS, JavaScript кога е потребно

На поголемиот дел од движењето во интерфејсите воопшто не му треба JavaScript. CSS транзициите ги покриваат промените на состојбата – hover, фокус, отворено, затворено – а CSS keyframe анимациите сè што се повторува или се одвива само. Клучното техничко правило е кои својства ги анимирате: transform и opacity може да ги обработи композиторот на прелистувачот, надвор од главната нишка, и остануваат течни дури и додека страницата е зафатена. Анимирањето на layout својства – width, height, top, left, margin – го принудува прелистувачот одново да ја пресметува страницата на секој кадар, и таму се раѓа сецкањето.

JavaScript влегува како оркестратор: подредува чекори, реагира на внес, движи пружини и криви на забавување што CSS не може да ги изрази, сето тоа синхронизирано со циклусот на прецртување на прелистувачот преку requestAnimationFrame. Библиотеките за анимација се погодности врз истите овие примитиви, а не магија. На далечниот крај стојат canvas и WebGL за 3D сцени и работа со честички – навистина моќни, и доволно тешки што секогаш треба да се испорачуваат со резервно решение и со причина.

Како всушност работат секциите водени од скролање

Речиси секој ефект на скролање е една идеја во различни костими: мапирај ја позицијата на скролање кон напредокот на анимацијата. Додека елементот патува низ видливиот дел на екранот, неговото патување се претвора во број меѓу 0 и 1, и тој број ја движи анимацијата – проѕирност, трансформација, чекор во секвенца. Штом ќе го видите ова мапирање, навидум сложените страници се разложуваат на листа мали, здодевни равенки.

Имплементацијата доаѓа во три главни вкуса. IntersectionObserver ефикасно одговара на „дали овој елемент е на екранот?“ и е идеален за активирање еднократни влезови. За континуирано движење – напредок на анимацијата тесно врзан за скролањето – слушател на скролање што храни requestAnimationFrame го прави мапирањето рачно. А CSS scroll-driven анимациите сега многу од овие мапирања ги изразуваат декларативно, оставајќи му на прелистувачот да ги извршува целосно надвор од главната нишка, со постарите техники како резерва.

Препознатливата „закотвена сцена“ – каде што секцијата стои во место додека скролањето пушта анимација до крај – е поскромна отколку што изгледа: висок обвивен елемент со sticky дете. Висината на обвивката дефинира колку трае сцената; колку далеку корисникот скролал низ обвивката е вредноста на напредокот. Не е потребно киднапирање на скролот, а лентата за скролање продолжува да се однесува како лента за скролање.

Буџетите за перформанси ја одржуваат илузијата жива

Течен екран се прецртува околу шеесет пати во секунда, што остава околу шеснаесет милисекунди за производство на секој кадар. Пробијте го тој буџет и анимацијата сецка – а анимација што сецка е полоша од никаква, бидејќи целата премиса на интерактивниот сајт е леснотијата. Затоа интерактивната работа е работа на перформанси: главната нишка мора да остане лесна, читањата и запишувањата во layout мора да се групираат, а сè што е скапо мора да се случува надвор од жешката патека.

Другиот буџет е тежината. Богатите страници акумулираат големи слики, видео и скрипти, а секој килобајт го одложува моментот кога кореографијата може да почне. Вчитувајте одложено сè што е под првиот екран, компресирајте немилосрдно и тестирајте на телефон од средна класа преку мобилна конекција – публиката не ја користи машината за развој, а демо што е течно само на неа е неуспешно демо.

• Анимирајте само transform и opacity, за сè што се движи континуирано
• Групирајте ги читањата и запишувањата во layout; никогаш не ги мешајте внатре во еден кадар
• Вчитувајте ги тешките ресурси одложено, за движењето никогаш да не чека на медиуми
• Поставете буџет за големина на скриптите и држете ги библиотеките во него
• Тестирајте на хардвер од средна класа преку мобилна мрежа, а не на машината што го изградила сајтот

Пристапност и намалено движење

Движењето не е неутрално. Кај луѓе со вестибуларни нарушувања, паралаксата и големите замашни анимации можат да предизвикаат вистинска вртоглавица и гадење, поради што оперативните системи нудат поставка „намали движење“, а прелистувачите ја изложуваат како media query prefers-reduced-motion. Да се почитува е еден услов во CSS или JavaScript: задржете ги содржината и распоредот, а кореографијата заменете ја со моментални или благи транзиции. Да изградите спектакуларна страница што го игнорира тоа значи да изградите страница што некои посетители физички не можат да ја користат.

Основата „прво документ“ повторно се исплаќа тука. Бидејќи содржината одоздола е вистински HTML, навигацијата со тастатура и читачите на екран продолжуваат да работат низ секоја анимирана состојба – под услов слојот на подобрување да го зачувува редоследот на фокусот и никогаш да не го заробува корисникот во сцена. Тестот е директен: исклучете го глушецот, затворете ги очите – и страницата сепак треба да има смисла.

Кога интерактивноста помага – и кога штети

Интерактивноста ја заслужува својата цена кога носи значење. Да се демонстрира како работи производ, да се темпира приказна за информациите да пристигнуваат по ред, да му се овозможи на посетителот да истражи нешто од агли што фотографија не може да ги покаже – во тие случаи движењето врши објаснувачка работа што статичната содржина навистина не може, и инженерскиот труд е оправдан.

Штети кога стои меѓу посетителот и задачата. Менија, страници со цени, документација, процеси на наплата – каде и да пристигнува човек со цел, секој анимиран украс е данок на неговото трпение. Тестот што го применуваме е едноставен: отстранете го ефектот и прашајте се што е изгубено. Ако одговорот е „ништо освен декорација“, обично треба да остане отстранет.

• Анимирајте за да објасните, не за да импресионирате
• Страниците за приказни и презентации толерираат движење; страниците за задачи го казнуваат
• Ако отстранувањето на ефектот не губи значење, изоставете го
• Често посетуваните интерфејси бараат брзина и предвидливост, а не спектакл