12 Essential Scroll-To-View Hreyfileikar
Hreyfð hliðarþættir eru mjög algengar á áfangasíðum og uppsetningartölvum. En þeir eru ekki alltaf að tala um í hringi í hönnun vegna þess að hugmyndin um "lífskjör á sýn" er ekki fjallað mikið.
Ég nota setninguna með því að fletta að skoða þar sem það virðist vera nákvæm lýsing. Í grundvallaratriðum þegar þú flettir niður á síðunni koma nýjar hreyfimyndir inn í myndina.
Það er ekki tækni sem virkar fyrir hvern vef en það bætir við snögga snerta í ákveðnar skipulag. Og ég hef kuratað nokkrar af uppáhaldi mínum hér til að sýna fram á hvernig þessi hreyfimyndir hreyfa sig og hvers vegna þú gætir reynt að nota þær sjálfur.
1. Á morgun sofa
Á Á morgun sofa website þú munt taka eftir nokkrar nokkuð góðkynja líflegur áhrif. Þetta hverfa mismunandi stykki af texta og CTA í skoðun um allt útlitið.
Það sem er áhugavert er hvernig flestar myndirnar og bakgrunnsvettvangarnir eru að fullu sýnilegir jafnvel á fyrstu fletta. Margir vefsíður nota fading hreyfimyndir til að birta myndir og skjámyndir meðan textinn er sýnilegur.
Þessi minni munur hjálpar til við að vekja athygli á textanum eins og það hverfur í skoðun. Frábær leið til að ná athygli frá gestum að vafra með.
2. Twist
Önnur tækni sem ég sé oft er að miða á innihald síðunnar fyrir hreyfimynda á skjánum.
Til dæmis Snúðu app heimasíðunni felur í sér mismunandi síðuhluta og blokkir af texta sem hreyfa sig í og úr skjánum á skrúfu. Þetta hefur mjög mjúkan blekandi áhrif svo þau séu áberandi en ekki of sterk.
Sumir gestir kunna að vera pirruð af töfinni en ég held ekki að það sé of langt. Auk þess animates aðeins einu sinni svo ef þú smellir á botn síðunnar eru allar hreyfimyndir búnar.
3. Garn App
Fyrir miklu flóknari hreyfingar kíkja á Garn App lander. Þessi maður hefur margra hluta hreyfimyndir og jafnvel þætti sem koma til greina frá mismunandi sjónarhornum.
Sumir af skjámyndasýningarmyndirnar hreyfa sig upp á meðan meðfylgjandi texti / BG mynstur hreyfist niður í mynd. Þessi skiptisstíll er frekar einstakur og ekki eitthvað sem ég sé oft.
Hins vegar er áfangasíðan líka ótrúlega einföld og það er ekki mikið annað hér til að ná athygli. Í þessu tilfelli virka mismunandi hreyfimyndir vel.
4. DashFlow
Af öllum þessum dæmum held ég DashFlow notar algengustu fjöratækni.
Þessi lander hreyfimyndir og texta í heild sinni í einum setu. Það er raunverulegt einfalt og notar einfalda töflu þannig að allt efni rennur beint niður í línulegu braut.
Ekkert í eðli sínu sérstakt um þessa hönnun fyrirfram mjög skýra aðferð við hreyfimyndir á blaðinu. Frábær stíll ef þú ert með svipaða vefsíðu og vilt halda hreyfimyndirnar einfaldar.
5. Quuu Promote
Quuu Promote heldur hreyfimyndum að lágmarki og notar aðeins þau á CTA svæðum.
Ég get ekki sagt hvort þetta eykur viðskipti en það virðist vera markmiðið. Þegar þú byrjar fyrst á síðunni snýst mjög efst hausinn í sýn með halla fjör á CTA.
Þegar þú flettir niður sérðu að restin af síðunni er nokkuð truflanir. En neðst er ein endanleg CTA fyrir ofan fótinn sem einnig lífgar og keyrir sömu halla fjör.
Til að sýna að þú getur haft áhrif á hreyfimyndir sem ekki birtast á öllum síðunni.
6. Qonto
Heimasíða fyrir Qonto hefur áhugavert að taka þátt í hreyfimyndum. Það notar sömu tegund af hreyfimyndum yfir alla vefsíðuna og hreyfir einstök atriði í sýn frá hliðinni.
Fyrir meirihluta síðunnar er þetta táknmyndasnið sem er með litla mynd fyrir ofan efni sem útskýrir eiginleika tækisins. Ekki of lúmskur en samt ekki of augljóst.
Auk þess er hægt að finna nokkrar aðrar hreyfimyndir í hausnum ásamt nokkrum BG myndum sem hverfa í sýn. Þessi síða er bara glæsilegt dæmi um hvað vefur fjör getur gert.
7. Gönguferð
Fyrir dæmi um lúmskur hreyfingar skoðaðu Gönguferð .
Síðan skiptist á milli hreyfimynda og fastra þátta. En hreyfimyndin er hratt svo þú finnur ekki pirruð að bíða eftir sýnilegu efni.
Þetta er val mitt fyrir hvaða hreyfimyndir sem eru til hreyfingar. Það er alltaf falleg tækni en tímasetningin þarf að vera fljótleg og til marks. Enginn vill bíða eftir því að efni komi til skoðunar og Hike skilur greinilega þetta.
8. Project Fi
Ef það er einhver sem þekkir frábært UX er það Google. Og yfir allar vörur sínar eru tonn af löndunum, Project Fi vera eitt dæmi með nokkrum frábærum hreyfingum.
Þetta gildir aðeins um tákn og þau hverfa ekki í skoðun, heldur koma þær upp úr lægri á síðunni. Þegar þú flettir finnurðu tákn sem renna upp í skoðun fyrir hvern lítinn hluta.
Það er frekar lúmskur áhrif en það bætir lífinu inn í hönnunina. Og það er byggt eingöngu á stöðu áhorfandans á síðunni, þannig að ef þú flettir upp á toppinn og færir þig aftur niður verður þú að heilsa sömu hreyfimyndum.
9. Grunnur
The Base CRM heimasíðuna er frábært dæmi um einföld fjör í vinnunni. Þessi síða notar sérsniðnar hreyfimyndir til að færa myndir upp og í augnlínu áhorfandans.
Byggt á fjölda áfangasíðna sem ég sé daglega er þetta mjög dæmigerð fyrir það sem ég býst við. Það er ekki mjög flókið fjör að endurskapa og það hefur ekki áhrif á reynslu of mikið heldur.
Eitt sem ég óska er að hreyfimyndirnar yrðu að hlaða svolítið hraðar. En þaðan sem ég held að þetta sé gott dæmi um hreyfimyndir á blað með mjög hreinu skipulagi til að ræsa.
10. AllirListi
Öll bestu farsímaforrit hafa eigin vefsíður til kynningar. Og hinir bestu hafa venjulega nokkuð sléttar hreyfimyndir.
AnyList blandar nokkrar mismunandi aðferðir saman á einni síðu. Höfuðmyndin þeirra hreyfist upp undir neðanjarðarsvæðinu en það er eina hreyfimyndin á síðunni.
Allt annað lýkur bara í sýn og allt notar frekar fljótlegan hleðslutíma fyrir fjör. Þessar aðferðir eru notaðar annars staðar á vefsvæðinu sem gefur það meiri samheldni.
11. Ernest
Síðan stíll fyrir Ernest er svolítið öðruvísi en aðrar áfangasíður sem ég hef fjallað um.
Það notar Parallax hreyfimyndir til að búa til hreyfingu á einni síðuuppsetningu með mismunandi hlutum.
Þessir eru mismunandi eftir því hvaða átt þú ert að fletta að hvort þú ferð upp eða niður og á hvaða hraða. Þeir eru einnig mismunandi með styrkleika byggð á mismunandi hlutum síðunnar.
Þú getur vafrað með því að nota hliðarflettivísunarvalmyndina og þetta hoppar hratt um síðuna á mismunandi sviðum. Það er ein af fáum aðferðum sem þú munt sjá oft á hliðarsíðum og það hjálpar örugglega Ernest standa út úr hópnum.
12. TaxiNet
Til að ná innsýn í alla síðu hreyfimyndir í aðgerð skaltu líta á TaxiNet website.
Það er smorgasbord af hreyfimyndum sem tengjast flassum sem eru bundnar við tákn, texta, myndir og jafnvel bakgrunnsstíl. Bakgrunnslitir einstakra síður búa til skoðun við notandann, örugglega ekki dæmigerður tækni en vissulega áhugavert.
Ef þú vilt þessa stíl gætirðu algerlega beitt svipaðri nálgun á eigin áfangasíðu. Gakktu úr skugga um að þú geymir hreyfimyndirnar svolítið og fljótlega því enginn vill bíða eftir því að snyrtilegur hreyfimyndirnar þínar verði hlaðið.
En ef þú gerir það, þá eru þessi skýringarmyndir með góðri áhrif á hvaða áfangasíðu sem er.
