Շարժման մեջ պարալաքսը նշանակում է օբյեկտի դիրքի փոփոխություն ինչ-որ ֆոնի վրա՝ համեմատած տեղում գտնվող դիտորդի հետ: Այս տերմինը ժողովրդականություն է ձեռք բերել ինտերնետում: Մասնավորապես, կայքը հետաքրքիր տեսք ունի, որի դիզայնում կան դինամիկ տարրեր։ Parallax-ը վեբ էջի ձևավորման տեխնիկա է, որն օգտագործվում է վեբ վարպետների կողմից՝ մեծ թվով այցելուներ գրավելու համար:
Ինչպիսի՞ն է պարալաքսը
Parallax ոլորումը կարող է օգտագործվել ինչպես ուղղահայաց, այնպես էլ ուղիղ գծով: Nintendo-ն լավագույն օրինակն է: Մեզանից շատերը նոստալգիայով են հիշում համակարգչային խաղերը, որոնք ներկայացված են գլխավոր հերոսների՝ էկրանի ձախից աջ շարժմամբ։ Հնարավոր է նաև շարժվել դեպի ներքև, որն իրականացվում է ուղղահայաց տեղակայված ուղիղ գծի երկայնքով: Համացանցում պարալաքսի էֆեկտը հաճախ օգտագործվում է: Դուք կարող եք օգտագործել JavaScript կամ CSS ուղղահայաց սլայդ ստեղծելու համար 3.
Նկարագրված եռաչափ տարածական էֆեկտը պարզապես նրանց բնորոշ է։ Խաղերի ստեղծողները օգտագործել են մի քանի ֆոնային շերտեր։ Նրանք տարբերվում են հյուսվածքով, մինչդեռ շարժումն իրականացվում է տարբերարագություն։
Մի կարծեք, որ պարալաքսը պարզապես 3D էֆեկտ է: Էջում կարող եք տեղափոխել առկա պատկերակները: Ավելին, այն բավականին գրավիչ տեսք ունի։ Հատկապես լավ տարբերակ է նրանցից յուրաքանչյուրի համար օգտագործել անհատական հետագիծ: Այս դեպքում օգտագործվում են տարբեր պատկերակներ, որոնք շարժվում են տարբեր հետագծերով: Այս դիզայնը ուշադրություն է գրավում։
Նկարը կենդանանում է
Դժվար է գտնել կայք առանց պատկերների: Բարձրորակ և ցուցադրական նկարները գրավում են այցելուներին: Բայց ամենամեծ ուշադրությունը գրավում են տարբեր տեսակի դինամիկ պատկերները: Իսկապես, եթե կայք այցելելիս կա շարժում, ապա դա ուշադրություն է գրավում: Զգալիորեն մեծացնում է այցելուի դինամիկ պատկերի ռեսուրս վերադառնալու հավանականությունը: Թվում էր, թե շարժվեց, թե ոչ։ Հետևաբար, կայք այցելուներին գրավելու համար արժե ուսումնասիրել պարալաքսի էֆեկտը։
Շարժվող պատկերի կայքի օրինակներ.
- hvorostovsky.com;
- www.kagisointeractive.com.
Ինչպես ցույց է տրված օրինակներում, փորձը բարելավվում է ենթակետերի բացվող ընտրացանկերի միջոցով: Նման տարրը խնայում է ժամանակ այցելուների համար, հետևաբար գրավիչ է նրանց համար։
jQuery գրադարան
JQueryParallax տերմինը սահմանում է նույնանուն գրադարանը: Դրա շնորհիվ հեշտ է հասնել շարժման էֆեկտին 3D ձևաչափով։ jQuery գրադարանում 3D ընկալումը ստեղծվում է տարբեր ձևերով: Դրանցից մեկը բաղկացած է ֆոնային օբյեկտների հորիզոնական միաժամանակյա շարժումիցտարբեր արագություն: Այս գրադարանը բնութագրվում է մեծ թվով տարբեր տեսակի հատկությունների առկայությամբ: Եվ այստեղ նկարագրված տեղաշարժը նրա հնարավորությունների միայն մի փոքր մասն է։
Կայքը բավականին գրավիչ տեսք ունի, որի ստեղծման համար օգտագործվել են տարբեր ժամանակակից տարրեր։ Դրանցից մեկը պարալաքսն է: Կայքերի օրինակները կարող են այսպիսի տեսք ունենալ.
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
jParallax-ը ներկայացված է մկնիկի հետ շարժվող շերտերով: Դինամիկ տարրերին բնորոշ է բացարձակ դիրքավորումը (դիրք:բացարձակ;): Նրանցից յուրաքանչյուրը բնութագրվում է իր չափսերով և շարժման անհատական արագությամբ: Այն կարող է լինել տեքստ կամ պատկեր (ռեսուրս ստեղծողների խնդրանքով):
Կայքի այցելուի ընկալում
Դրանից հետո մարդը սովորաբար ուշադրություն է դարձնում, որ էջը նախագծված է բարձր որակով, հարմար և բանիմաց։ Այս փաստը սովորաբար հարգվում է: Պատահում է, որ հետաքրքրասիրություն է առաջանում՝ փորձել այլ տարրեր։ Ինտերնետում հսկայական թվով միանման կայքեր կան։ Ինչպե՞ս դարձնել ձեր ռեսուրսը հատուկ:
Եթե ձեզ դուր է գալիս դիզայնը, այցելուն կմնա ավելի երկար: Այսպիսով, մեծանում է հավանականությունը, որ նրան գրավելու է տեղադրված տեղեկատվությունը, նա հետաքրքրություն կցուցաբերի։ Արդյունքում անձը կօգտվի առաջարկվող ծառայությունից, ապրանքից կամ գովազդային առաջարկից։
Սիրելի հին խաղեր
«պարալաքս» հասկացությունը պետք է ծանոթ լինի բոլորին80-ականների և 90-ականների կոնսոլային երկրպագուներ: Սա վերաբերում է խաղերին՝
- Mario Bros.
- Mortal Kombat.
- Զայրույթի փողոցներ.
- Լուսնի պարեկ.
- Tturtles in Time.
Այսինքն, parallax-ը տեխնիկա է, որը կիրառվում է բավականին երկար ժամանակ: Այս խաղերը իսկապես հիշվում են որոշ կարոտով: Ի վերջո, նրանք կարծես տոգորված են այդ ժամանակաշրջանի բնավորությամբ։
Պատկերները էկրանին ստեղծվում են այնպիսի տեխնիկայի միջոցով, ինչպիսին է parallax scrolling-ը: Զարմանալի ոչինչ չկա նրանում, որ այս տեխնիկան արժանի ժողովրդականություն է ձեռք բերել: Դիզայնի այս հայեցակարգը ջերմորեն ընդունվում է նրանց կողմից, ովքեր խաղում էին 80-90-ականներին կամ դիտում էին ընկերների ժամանցը։
Պարալաքսի ոլորում
Աշխարհի առաջատար ապրանքանիշերի շուկայավարները վաղուց օգտագործում են բոլոր տեսակի տեխնիկական առաջընթացները: Այսպիսով, հնարավոր է դառնում հետաքրքրել կայքի նույնիսկ պատահական այցելուին։
Parallax scrolling-ը բավականին հաջող է օգտագործվել Nike-ի կողմից: Ընկերության սկզբնական կայքը նախագծվել է Վեյդեն և Քենեդիի կողմից: Բայց այս դիզայնը չի գոյատևել: Ռեսուրսը աստիճանաբար թարմացվեց՝ մեր ժամանակի միտումներին համապատասխան։ Activatedrinks.com-ը կայքի օրինակ է, որի դիզայնը հիշեցնում է Nike-ի ժամանակաշրջանի շուկայավարների կողմից օգտագործվածը:
Խոսողները չպետք է շատ լինեն
Մի մոռացեք, որ կայքի դիզայնը հաճախ այցելուին առաջնորդող հիմնական չափանիշն է: Վատ է կատարվածռեսուրսը սովորաբար օգտվողին թողնում է սեփականատեր ընկերության անլուրջության տպավորություն: Սակայն դիզայնի բոլոր տեսակի գրավիչ տարրերով կայքը ցույց է տալիս կազմակերպության սեփականատերերի ցանկությունը հետաքրքրել այցելուներին:
Այստեղ արժե հիշել պարալաքսի մասին։ Սա հրաշալի գործիք է։ Բայց նույնիսկ նրանք չպետք է շատ տարվեն։ Քանի որ այն էջը, որի վրա կան մեծ թվով տարբեր տեսակի շարժվող տարրեր, բավականին դժվար է ընկալել։ Ավելի լավ է դիզայնը չափավոր ոճային և հասկանալի դարձնել:
Dynamic-ը պետք է լինի առանձին տարրեր, որոնք պահանջում են ընտրություն: Կարող է լինել նաև նկար, որը ստեղծվել է շերտերի միջոցով, որոնք մեկը մյուսի համեմատ տեղափոխում են: Մի մոռացեք, որ օգտատերերի կայքը նախատեսված է հիմնականում այցելուների համար: Պարտադիր չէ, որ դա լինի վեբ-վարպետի գլուխգործոց, ով իր ողջ գիտելիքներն է ներդրել դրա մեջ: Ի վերջո, նման մոտեցումը միայն կբարդացնի ընկալումը։
Ինչպես ստեղծել կայքի նավիգացիա
Ինչպե՞ս կատարել պարալաքս: Այս հարցը հետաքրքրում է կայքերի ստեղծողներից շատերին: Պարտադիր չէ իմանալ թեգեր գրելու բարդությունները։ Շատ հարմար է ինտերնետում օգտագործել հատուկ ռեսուրսներ։ Առկա առաջարկների մեծ քանակից կարելի է առանձնացնել հետևյալ օգնականները՝
- Plax-ը բավականին հեշտ օգտագործման ծրագիր է: Այն հակված է էջը դարձնել հեղուկ՝ շարժելով մկնիկը։
- jQuery Parallax Image Slider - jQuery փլագին, որն օգտագործվում է պատկերների սլայդեր ստեղծելու համար:
- Jquery Image Parallax - հարմար է թափանցիկ գծագրերի նախագծման համար: Նրա PNG-ների օգտագործման շնորհիվ GIF-ները խորանում են՝ շարժման միջոցով:
- Curtain.js-ն օգտագործվում է ֆիքսված վահանակներով էջ ստեղծելու համար: Այս դեպքում նկատվում է վարագույրների բացման էֆեկտ։
- Scrolling Parallax. jQuery Plugin-ը մկնիկի անիվը պտտելիս պարալաքսի էֆեկտ է ստեղծում:
Եվս մի քանի օգտակար հավելումներ
Ինչպես գիտեք, տեղեկատվությունը ամենամեծ արժեքն է։ Եվ որքան շատ է հայտնի ցանկալիին հասնելու ուղիները, այնքան ավելի մեծ է ճիշտ արդյունքի հասնելու հավանականությունը։ Օգտակար պլագիններ, որոնք օգտագործվում են դինամիկա ստեղծելու համար.
- jQuery Scroll Path - օգտագործվում է օբյեկտները նշված ուղու վրա տեղադրելու համար:
- Scrollorama-ն jQuery հավելված է: Այն օգտագործվում է որպես գրավիչ նյութի դիզայնի գործիք։ Թույլ է տալիս «վերակենդանացնել» էջի տեքստը հարմար ոլորման շնորհիվ:
- Scrolldeck-ը jQuery հավելված է: Այն հիանալի ներկայացման լուծում է մեկ էջի կայքերի համար:
- jParallax-ը ներկայացնում է շերտերի շարժումը՝ կախված մկնիկի ցուցիչի շարժումից:
- Stellar.js-ը փլագին է, որի հետ ցանկացած տարր նախագծված է պարալաքսի ոլորման էֆեկտի ավելացումով:
Պարալաքսը խարսխված է կուրսորին
Այս պարալաքսը բավականին տպավորիչ տեսք ունի: Առաջին հայացքից անշարժկայքի էջի օբյեկտները շարժվում են, երբ մկնիկի կուրսորը մոտենում է: Թվում է, թե այն կենդանանում է և հետևում է շարժվող տարրին։
Նախ, դուք պետք է կանգ առեք նկարի վրա: Պահանջվող պատկերը տեղադրվում է շրջանակի մեջ, մինչդեռ դրա եզրերը պետք է թաքնվեն: Մեթոդը շատ պարզ է, և ստացված նկարը բավականին գրավիչ է թվում։
Պարալաքսի էֆեկտը կայքի համար դիզայնի հիանալի միջոց է։ Դրա օգտագործումը վկայում է այն մասին, որ պատշաճ ուշադրություն է դարձվել ռեսուրսի ստեղծմանը։ Ուստի արժե ուշադրություն դարձնել առաջարկվող ծառայությունների կամ կարդալու տեղեկատվության վրա։ Նման կայքերն ավելի շահավետ են թվում նույնական, բայց պարզապես նախագծված ռեսուրսների ֆոնին։
