Хөдөлгөөний үед параллакс гэдэг нь тухайн объектын байрлалыг тухайн газар байгаа ажиглагчтай харьцуулахад ямар нэгэн дэвсгэр дээр өөрчлөхийг хэлнэ. Энэ нэр томъёо нь интернетэд алдартай болсон. Ялангуяа сайт нь сонирхолтой харагдаж байгаа бөгөөд дизайн нь динамик элементүүдтэй байдаг. Параллакс бол олон тооны зочдыг татахын тулд вэбмастеруудын ашигладаг вэб хуудасны дизайн арга юм.
Параллакс гэж юу вэ
Параллакс гүйлгэхийг босоо болон шулуун шугамд ашиглаж болно. Nintendo бол хамгийн сайн жишээ юм. Бидний ихэнх нь дэлгэцийн зүүн талаас баруун тийш гол дүрүүдийн хөдөлгөөнөөр дүрслэгдсэн компьютерийн тоглоомуудыг дурсаж санаж байна. Мөн босоо байрлалтай шулуун шугамын дагуу доошоо хөдөлж болно. Вэб дээрх параллакс эффектийг ихэвчлэн ашигладаг. Та босоо гулсагч 3 үүсгэхийн тулд JavaScript эсвэл CSS ашиглаж болно.
Тодорхойлсон гурван хэмжээст орон зайн эффект нь зөвхөн тэдний онцлог шинж юм. Тоглоомыг бүтээгчид хэд хэдэн дэвсгэр давхаргыг ашигласан. Тэд бүтэцээрээ ялгаатай байдаг бол хөдөлгөөн нь өөр өөр байдагхурд.
Параллаксыг зүгээр л 3D эффект гэж битгий бодоорой. Хуудас дээр та одоо байгаа дүрсүүдийг зөөж болно. Түүнээс гадна энэ нь нэлээд сэтгэл татам харагдаж байна. Ялангуяа сайн сонголт бол тус бүрийн хувьд тусдаа зам ашиглах явдал юм. Энэ тохиолдолд өөр өөр траекторын дагуу хөдөлдөг өөр өөр дүрсүүдийг ашигладаг. Энэ загвар олны анхаарлыг татаж байна.
Зураг амилдаг
Зураггүй сайт олоход хэцүү. Өндөр чанартай, үзүүлэнгийн зураг нь зочдыг татдаг. Гэхдээ хамгийн их анхаарал нь янз бүрийн төрлийн динамик зургуудад татагддаг. Үнэн хэрэгтээ, хэрэв сайтад зочлох үед хөдөлгөөн байвал энэ нь анхаарал татдаг. Энэ нь зочдод динамик дүрс рүү буцаж очих магадлалыг ихээхэн нэмэгдүүлдэг. Хөдлөөд байх шиг байна уу үгүй юу? Тиймээс сайтад зочдыг татахын тулд параллакс эффект гэх мэт зүйлийг судлах нь зүйтэй.
Зургийг зөөх сайтын жишээ:
- hvorostovsky.com;
- www.kagisointeractive.com.
Жишээнд харуулсанчлан унадаг цэсийг дэд зүйл болгон сайжруулснаар туршлага сайжирсан. Ийм элемент нь зочдын цагийг хэмнэдэг тул тэдний сонирхлыг татдаг.
jQuery номын сан
JQueryParallax гэдэг нэр томъёо нь ижил нэртэй номын санг тодорхойлдог. Үүний ачаар 3D форматаар хөдөлгөөний үр дүнд хүрэхэд хялбар байдаг. jQuery номын санд 3D ойлголтыг янз бүрийн аргаар бүтээдэг. Тэдний нэг нь дэвсгэр объектуудын хэвтээ нэгэн зэрэг хөдөлгөөнөөс бүрддэгөөр хурд. Энэхүү номын сан нь олон тооны өөр өөр өмчтэй байдгаараа онцлог юм. Энд тайлбарласан нүүлгэн шилжүүлэлт нь түүний чадавхийн багахан хэсэг юм.
Сайт нь орчин үеийн янз бүрийн элементүүдийг ашиглахад маш сонирхолтой харагдаж байна. Тэдний нэг нь параллакс юм. Жишээ сайтууд иймэрхүү харагдаж болно:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buyselwebsite.com.
jParallax нь хулганаар хөдөлдөг давхаргуудаар дүрслэгддэг. Динамик элементүүд нь үнэмлэхүй байрлалаар тодорхойлогддог (байрлал: үнэмлэхүй;). Тэд тус бүр нь өөрийн хэмжээ, хөдөлгөөнөөр тодорхойлогддог. Энэ нь текст эсвэл зураг байж болно (нөөцийг бүтээгчдийн хүсэлтээр).
Сайтын зочны талаарх ойлголт
Үүний дараа хуудсаа чанартай, эвтэйхэн, мэдлэгтэй болгоход хүн голдуу анхаардаг. Энэ баримтыг ихэвчлэн хүндэтгэдэг. Бусад элементүүдийг туршиж үзэх сонирхол төрдөг. Интернет дээр асар олон тооны ижил төстэй сайтууд байдаг. Өөрийн нөөцийг хэрхэн онцгой болгох вэ?
Хэрэв танд загвар таалагдсан бол зочин илүү удаан байх болно. Тиймээс түүнийг нийтэлсэн мэдээлэлд татах магадлал нэмэгдэж, тэр сонирхох болно. Үүний үр дүнд хүн санал болгож буй үйлчилгээ, бүтээгдэхүүн эсвэл сурталчилгааны саналыг ашиглах болно.
Хуучин дуртай тоглоомууд
"Параллакс" гэдэг ойлголт хүн бүрт танил байх ёстой80, 90-ээд оны консолын шүтэн бишрэгчид. Энэ нь тоглоомд хамаарна:
- Марио Bros.
- Мортал Комбат.
- Уур хилэнгийн гудамж.
- Сарны эргүүл.
- Яст мэлхий цаг хугацааны хувьд.
Өөрөөр хэлбэл, параллакс бол нэлээд удаан хугацаанд ашиглагдаж ирсэн техник юм. Эдгээр тоглоомуудыг үнэхээр дурсах сэтгэлээр санаж байна. Эцсийн эцэст тэд тухайн үеийн дүрд шингэсэн бололтой.
Дэлгэц дээрх зургуудыг параллакс гүйлгэх гэх мэт техник ашиглан бүтээдэг. Энэ техник нь зохих алдар нэрийг олж авсанд гайхах зүйл алга. Энэхүү дизайны үзэл баримтлалыг 80-90-ээд оны үед тоглож байсан эсвэл найз нөхдийнхөө чөлөөт цагийг үзэж байсан хүмүүс халуун дотноор хүлээж авдаг.
Параллакс гүйлгэх
Дэлхийн тэргүүлэгч брэндүүдийн маркетерууд техникийн бүх төрлийн дэвшлийг эртнээс ашиглаж ирсэн. Ингэснээр сайтад энгийн зочдыг хүртэл сонирхох боломжтой болсон.
Параллакс гүйлгэхийг Nike маш амжилттай ашигласан. Компанийн анхны вэбсайтыг Вейден, Кеннеди нар зохион бүтээжээ. Гэхдээ энэ загвар нь амьд үлдсэнгүй. Манай цаг үеийн чиг хандлагын дагуу нөөцийг аажмаар шинэчилж байв. Activatedrinks.com бол загвар нь тухайн үеийн Nike маркетеруудын ашиглаж байсан сайтыг санагдуулам сайтын жишээ юм.
Илтгэгчид хэт их байх ёсгүй
Сайтын дизайн нь ихэвчлэн зочдыг чиглүүлдэг гол шалгуур байдгийг битгий мартаарай. Муу гүйцэтгэлтэйЭнэ нөөц нь ихэвчлэн эзэмшигчийн компанийн хөнгөмсөг байдлын сэтгэгдэлийг хэрэглэгчдэд үлдээдэг. Гэхдээ бүх төрлийн сэтгэл татам дизайны элементүүдтэй сайт нь тухайн байгууллагын эзэд зочдын сонирхлыг татах хүсэлтэй байгааг илтгэнэ.
Энд параллаксын тухай санах нь зүйтэй. Энэ бол гайхалтай хэрэгсэл юм. Гэхдээ тэд ч гэсэн хэт автаж болохгүй. Учир нь олон тооны янз бүрийн хөдөлгөөнт элементүүд байдаг хуудсыг ойлгоход нэлээд хэцүү байдаг. Загварыг дунд зэрэг загварлаг, ойлгомжтой болгох нь хамгийн сайн арга юм.
Динамик нь сонголт шаарддаг бие даасан элементүүд байх ёстой. Мөн нэгийг нөгөөгөөсөө хөдөлгөж буй давхаргыг ашиглан бүтээсэн зураг байж болно. Хэрэглэгчийн сайт нь голчлон зочдод зориулагдсан гэдгийг бүү мартаарай. Энэ нь бүх мэдлэгээ зориулж чадсан вэбмастерын шилдэг бүтээл байх албагүй. Эцсийн эцэст ийм хандлага нь ойлголтыг улам хүндрүүлнэ.
Сайтын навигацыг хэрхэн үүсгэх вэ
Параллаксыг хэрхэн хийх вэ? Энэ асуулт нь олон вэбсайт бүтээгчдийн сонирхлыг татдаг. Таг бичих нарийн төвөгтэй байдлыг мэдэх шаардлагагүй. Интернет дэх тусгай нөөцийг ашиглах нь маш тохиромжтой. Боломжит олон тооны саналуудаас дараах туслахуудыг ялгаж болно:
- Plax бол хэрэглэхэд тун хялбар програм юм. Энэ нь хулганыг хөдөлгөж хуудсыг зөөлрүүлэх хандлагатай байдаг.
- jQuery Parallax Image Slider - Зургийн гулсагч үүсгэхэд ашигладаг jQuery залгаас.
- Jquery Image Parallax - ил тод зураг зурахад тохиромжтой. Түүний PNG-г ашигласнаар GIF-г хөдөлгөөнөөр дүрслэн гүнзгийрүүлдэг.
- Curtain.js нь тогтмол самбар бүхий хуудас үүсгэхэд ашиглагддаг. Энэ тохиолдолд хөшиг нээх нөлөө ажиглагдаж байна.
- Гүйлгэх Параллакс: jQuery Plugin нь хулганы дугуйг гүйлгэх үед параллакс эффект үүсгэх зорилготой.
Өөр хэдэн хэрэгтэй залгаасууд
Таны мэдэж байгаагаар мэдээлэл бол хамгийн үнэ цэнэтэй зүйл юм. Хүссэн зорилгодоо хүрэх арга замуудын тоо их байх тусам зөв үр дүнд хүрэх магадлал ойртох болно. Динамик үүсгэхэд ашигласан ашигтай залгаасууд:
- jQuery Scroll Path - заасан зам дээр объектуудыг байрлуулахад ашигладаг.
- Scrollorama нь jQuery залгаас юм. Энэ нь сэтгэл татам материалын дизайны хэрэгсэл болгон ашигладаг. Тохиромжтой гүйлгэхийн ачаар хуудас дээрх текстийг "сэргээх" боломжийг танд олгоно.
- Scrolldeck нь jQuery залгаас юм. Энэ нь нэг хуудастай сайтуудад зориулсан үзүүлэнгийн гайхалтай шийдэл юм.
- jParallax нь хулганы заагчийн хөдөлгөөнөөс хамааран давхаргын хөдөлгөөнийг илэрхийлнэ.
- Stellar.js нь ямар ч элементийг параллакс гүйлгэх эффект нэмсэн нэмэлт өргөтгөл юм.
Параллакс курсорт бэхлэгдсэн
Энэ паралакс үнэхээр гайхалтай харагдаж байна. Эхлээд харахад хөдөлгөөнгүйхулганын курсор ойртох үед сайтын хуудасны объектууд хөдөлдөг. Энэ нь хөдөлж буй элементийг дагаж, амилсан бололтой.
Эхлээд зураг дээр зогсох хэрэгтэй. Шаардлагатай зургийг хүрээ дотор байрлуулсан бөгөөд ирмэгийг нь нуусан байх ёстой. Арга нь маш энгийн бөгөөд зурсан зураг нэлээд сэтгэл татам харагдаж байна.
Сайтын Параллакс эффект нь дизайн хийх гайхалтай арга юм. Түүний хэрэглээ нь нөөцийг бий болгоход зохих ёсоор анхаарал хандуулсан болохыг харуулж байна. Тиймээс санал болгож буй үйлчилгээ эсвэл унших мэдээлэлд анхаарлаа хандуулах нь зүйтэй. Ийм сайтууд нь ижилхэн боловч энгийн зохион бүтээгдсэн нөөцийн дэвсгэр дээр илүү ашигтай харагдаж байна.
