Kurkite srautus, o ne atskirus puslapius

Dokumentų laikų svetainės buvo puslapių krūvos. Produkto patirtys yra sekos: smalsumas, susiorientavimas, įrodymai, veiksmas. Pirmiausia sudėliokite kelionę ir tik tada leiskite slinkčiai (arba žingsniams) ją atskleisti.

Slinktis kaip laiko juosta

Kiekvienas ekrano aukštis gali veikti kaip taktas: viena mintis, viena nuotaika, vienas prašymas. Atsiskleidimą paleiskite šiek tiek anksčiau, nei turinys visiškai įslenka į matomą sritį, kad judesys jau vyktų, kai jį pastebi akis.

Animuokite vieną kartą, per pirmąjį atsiskleidimą, nebent istorijai reikia judesio, susieto su slinktimi. Kartojami įėjimai kaskart grįžtant atrodo pigiai ir švaisto kadrus.

Pakopinis atsiskleidimas įslinkus į ekraną

jsx

1import { motion } from 'motion/react';
2
3export function StaggerContainer({ children }) {
4  return (
5    <motion.div
6      initial="hidden"
7      whileInView="visible"
8      viewport={{ once: true, margin: '-80px', amount: 0.3 }}
9      variants={{
10        hidden: { opacity: 0 },
11        visible: {
12          opacity: 1,
13          transition: { staggerChildren: 0.1, delayChildren: 0.12 },
14        },
15      }}
16    >
17      {children}
18    </motion.div>
19  );
20}
21
22export function StaggerItem({ children }) {
23  return (
24    <motion.div
25      variants={{
26        hidden: { opacity: 0, y: 28 },
27        visible: {
28          opacity: 1,
29          y: 0,
30          transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] },
31        },
32      }}
33    >
34      {children}
35    </motion.div>
36  );
37}

Loading code…

Paralaksas su stabdžiais

Gylio užuominos padeda pasakoti, kai sluoksniai juda skirtingu greičiu: fonas lėčiau, priekinis planas – beveik kartu su slinktimi. Perlenkite šiuos santykius ir gausite ne įtraukimą, o svaigulį.

Paralaksą varykite tik per transform. Slinkčiai susieti niekada nenaudokite top ar left.

Paralakso disciplina

Fonas juda mažiau nei priekinis planas – tai gylis, o ne karuselė
Vieno paralakso puslapio viršuje paprastai visiškai pakanka
Gerbkite sumažinto judesio nuostatą: pasiūlykite statišką kompoziciją, kuri vis tiek skaitosi
Jei tekstas veikia ir su užrakintais sluoksniais, efektas yra pasirenkamas

Susiekite judesį su slinkties pozicija

Laiku paremti ciklai kovoja su lankytojo tempu. Pozicija paremtas judesys – progresas nuo 0 iki 1, susietas su permatomumu, spalva ar masteliu – ritmą atiduoda į lankytojo rankas.

Lengvas spyruoklinis švelninimas ant neapdoroto progreso sušvelnina trūkčiojantį jutiklinį kilimėlį ir kontrolės neatima.

Apibendrinimas

Srautai laimi tada, kai kiekvienas taktas pateisina kitą. Pirmiausia sudėliokite skyrius popieriuje ir tik paskui junkite slinktį, pakopinius atsiskleidimus bei judesį, susietą su slinkties pozicija. Jei efektas kelionės nepastumia į priekį, tai tik triukšmas.

Judesio sudedamosios dalys

Paprastos dalys, iš kurių sudedame slinkties istorijas

Live Preview

Fade In

CodeStep 1 of 4

1<motion.div
2  initial={{ opacity: 0 }}
3  whileInView={{ opacity: 1 }}
4  viewport={{ once: true }}
5  transition={{ duration: 0.5 }}
6>
7  Enter softly
8</motion.div>

Loading code…

Susiję straipsniai

Dizainas

Svetainės pertvarkymo sąrašas: kurti iš naujo ar atnaujinti

Ženklai, kad vizualinis atnaujinimas konversijos neišgelbės, ir atvejai, kada atsiperka kūrimas iš naujo

Skaityti straipsnį

Produktas

SEO, kuris iš tikrųjų atneša užklausų, o ne tik pozicijas

Struktūra, greitis, ketinimą atitinkantys puslapiai ir matavimas – SEO kaip augimo sistema, o ne sąrašų spektaklis

Skaityti straipsnį

Norite, kad jūsų produktas būtų toks pat apgalvotas?

Žiūrėti paslaugas Pradėti projektą