Harakatda, parallaks ob'ekt joylashuvining o'z joyida bo'lgan kuzatuvchiga nisbatan qandaydir fonda o'zgarishini bildiradi. Bu atama Internetda mashhurlikka erishdi. Xususan, sayt qiziqarli ko'rinadi, uning dizaynida dinamik elementlar mavjud. Parallax - bu veb-ustalar tomonidan ko'plab tashrif buyuruvchilarni jalb qilish uchun foydalaniladigan veb-sahifalarni loyihalash usuli.
Parallaks nimaga o'xshaydi
Parallaks aylantirish vertikal va tekis chiziqda ishlatilishi mumkin. Nintendo eng yaxshi namunadir. Ko'pchiligimiz nostalji bilan eslaymiz kompyuter o'yinlari, ekranning chap tomonidan o'ngga asosiy belgilar harakati bilan ifodalanadi. Vertikal joylashgan to'g'ri chiziq bo'ylab amalga oshirilgan pastga siljish ham mumkin. Internetdagi parallaks effekti tez-tez ishlatiladi. Vertikal slayder 3 yaratish uchun JavaScript yoki CSS dan foydalanishingiz mumkin.
Ta'riflangan uch o'lchovli fazoviy effekt faqat ularga xosdir. O'yinlarni yaratuvchilar bir nechta fon qatlamlaridan foydalanganlar. Ular to'qimalarda farqlanadi, harakat esa turlicha amalga oshiriladitezlik.
Parallaks shunchaki 3D effekti deb oʻylamang. Sahifada siz mavjud piktogrammalarni ko'chirishingiz mumkin. Bundan tashqari, u juda jozibali ko'rinadi. Ayniqsa, yaxshi variant - ularning har biri uchun individual traektoriyadan foydalanish. Bunday holda, turli xil traektoriyalar bo'ylab harakatlanadigan turli xil piktogrammalardan foydalaniladi. Bu dizayn diqqatni tortadi.
Rasm jonlanadi
Rasmsiz sayt topish qiyin. Yuqori sifatli va ko'rgazmali chizmalar tashrif buyuruvchilarni o'ziga jalb qiladi. Ammo eng ko'p e'tibor har xil turdagi dinamik tasvirlarga qaratiladi. Haqiqatan ham, agar saytga tashrif buyurishda harakat bo'lsa, bu e'tiborni tortadi. Dinamik tasvirga tashrif buyuruvchining resursga qaytishi ehtimolini sezilarli darajada oshiradi. U harakat qilganday tuyuldimi yoki yo'qmi? Shuning uchun, saytga tashrif buyuruvchilarni jalb qilish uchun parallaks effekti kabi narsalarni o'rganishga arziydi.
Tasvirni koʻchirishga misollar:
- hvorostovsky.com;
- www.kagisointeractive.com.
Misollarda koʻrsatilganidek, ochiladigan menyular orqali tajriba yaxshilanadi. Bunday element tashrif buyuruvchilar uchun vaqtni tejaydi, shuning uchun ular uchun jozibador.
jQuery kutubxonasi
JQueryParallax atamasi xuddi shu nomdagi kutubxonani belgilaydi. Uning yordamida 3D formatida harakat effektiga erishish oson. JQuery kutubxonasida 3D idrok etish turli usullarda yaratilgan. Ulardan biri fon ob'ektlarining gorizontal bir vaqtning o'zida harakatlanishidan iboratturli tezlik. Ushbu kutubxona ko'p sonli turli xil xususiyatlarning mavjudligi bilan tavsiflanadi. Bu yerda tasvirlangan siljish uning imkoniyatlarining faqat kichik bir qismidir.
Sayt juda jozibali ko'rinadi, uni yaratishda turli xil zamonaviy elementlardan foydalanilgan. Ulardan biri parallaks. Misol saytlar quyidagicha ko'rinishi mumkin:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buyselwebsite.com.
jParallax sichqoncha bilan harakatlanadigan qatlamlar bilan ifodalanadi. Dinamik elementlar mutlaq joylashish bilan tavsiflanadi (pozitsiya: mutlaq;). Ularning har biri o'z hajmi va individual tezlikda harakati bilan ajralib turadi. Bu matn yoki rasm bo'lishi mumkin (resurs yaratuvchilarning iltimosiga binoan).
Saytga tashrif buyuruvchini idrok etish
Bundan keyin odam odatda sahifani yuqori sifatli, qulay va bilimdon tarzda ishlab chiqilganligiga e'tibor beradi. Bu haqiqat odatda hurmat qilinadi. Boshqa elementlarni sinab ko'rishga qiziqish paydo bo'ladi. Internetda juda ko'p bir xil saytlar mavjud. Resursingizni qanday maxsus qilish kerak?
Agar sizga dizayn yoqsa, tashrif buyuruvchi uzoqroq vaqt qoladi. Shunday qilib, uni e'lon qilingan ma'lumotlarga jalb qilish ehtimoli ortadi, u qiziqish bildiradi. Natijada, odam taklif qilingan xizmat, mahsulot yoki reklama taklifidan foydalanadi.
Sevimli eski oʻyinlar
"Parallaks" tushunchasi hammaga tanish bo'lishi kerak80-90-yillarning konsol muxlislari. Bu oʻyinlarga tegishli:
- Mario Bros.
- Mortal Kombat.
- G'azab ko'chalari.
- Oy patruli.
- Toshbaqalar vaqtida.
Ya'ni, parallaks anchadan beri qo'llanilgan texnikadir. Bu o'yinlar haqiqatan ham nostalji bilan esda qoladi. Axir, ular o'sha davr xarakteriga singib ketganga o'xshaydi.
Ekrandagi tasvirlar parallaks aylantirish kabi texnika yordamida yaratilgan. Ushbu texnikaning munosib mashhurlikka erishganligi ajablanarli emas. Ushbu dizayn kontseptsiyasi 80-90-yillarda o'ynagan yoki do'stlarining bo'sh vaqtini tomosha qilganlar tomonidan iliq kutib olinadi.
Parallaks aylantirish
Dunyoning yetakchi brendlari sotuvchilari uzoq vaqtdan beri barcha turdagi texnik yutuqlardan foydalanganlar. Shunday qilib, hatto oddiy mehmonni ham qiziqtirish mumkin bo'ladi.
Parallaks aylantirish Nike tomonidan juda muvaffaqiyatli ishlatilgan. Kompaniyaning asl veb-sayti Weiden va Kennedi tomonidan ishlab chiqilgan. Ammo bu dizayn saqlanib qolmadi. Resurs bizning davrimiz tendentsiyalariga mos ravishda asta-sekin yangilandi. Activatedrinks.com dizayni o'sha davrdagi Nike sotuvchilari ishlatgan saytni eslatuvchi sayt namunasidir.
Karnaylar juda koʻp boʻlmasligi kerak
Shuni unutmangki, sayt dizayni ko'pincha tashrif buyuruvchini boshqaradigan asosiy mezondir. Yomon ijro etilganresurs odatda foydalanuvchini kompaniya egasining beparvoligi haqidagi taassurot qoldiradi. Ammo har xil jozibali dizayn elementlariga ega sayt tashkilot egalarining tashrif buyuruvchilarni qiziqtirish istagini bildiradi.
Bu erda parallaks haqida eslash kerak. Bu ajoyib vosita. Lekin hatto ular ham haddan tashqari ko'tarilmasligi kerak. Chunki ko'p sonli turli xil harakatlanuvchi elementlar joylashgan sahifani sezish juda qiyin. Dizaynni o'rtacha darajada zamonaviy va tushunarli qilish yaxshidir.
Dinamik tanlashni talab qiluvchi alohida elementlar boʻlishi kerak. Bundan tashqari, bir-biriga nisbatan harakatlanuvchi qatlamlar yordamida yaratilgan rasm ham bo'lishi mumkin. Shuni unutmangki, foydalanuvchi sayti birinchi navbatda tashrif buyuruvchilar uchun mo'ljallangan. Bu o'zining barcha bilimlarini ishga solgan veb-ustaning eng yaxshi asari bo'lishi shart emas. Axir, bunday yondashuv faqat idrokni murakkablashtiradi.
Sayt navigatsiyasini qanday yaratish kerak
Parallaksni qanday qilish mumkin? Bu savol ko'plab veb-sayt quruvchilarni qiziqtiradi. Teglarni yozishning nozik tomonlarini bilish shart emas. Internetda maxsus resurslardan foydalanish juda qulay. Ko'p sonli takliflar orasidan quyidagi yordamchilarni ajratib ko'rsatish mumkin:
- Plax - bu foydalanish uchun juda oson dastur. U sichqonchani siljitish orqali sahifani silliq qiladi.
- jQuery Parallax Image Slider - tasvir slayderlarini yaratish uchun foydalaniladigan jQuery plagini.
- Jquery Image Parallax - shaffof chizmalarni loyihalash uchun mos. Uning PNG-lardan foydalanishi tufayli GIF-lar harakat bilan jonlantirilgan chuqurlik kasb etadi.
- Curtain.js qattiq panelli sahifa yaratish uchun ishlatiladi. Bunday holda, pardalarni ochish effekti kuzatiladi.
- Scrolling Parallax: jQuery plagini sichqoncha g'ildiragini aylantirganda paralaks effektini yaratish uchun mo'ljallangan.
Yana bir qancha foydali plaginlar
Ma'lumki, ma'lumot eng katta ahamiyatga ega. Va istalgan narsaga erishish yo'llari qanchalik ko'p bo'lsa, to'g'ri natijaga erishish ehtimoli shunchalik yaqin bo'ladi. Dinamik yaratish uchun foydali plaginlar:
- jQuery Scroll Path - belgilangan yo'lda obyektlarni joylashtirish uchun ishlatiladi.
- Scrollorama jQuery plaginidir. U jozibali material dizayni uchun vosita sifatida ishlatiladi. Qulay aylantirish tufayli sahifadagi matnni "jonlantirish" imkonini beradi.
- Scrolldeck jQuery plaginidir. Bu bitta sahifali saytlar uchun ajoyib taqdimot yechimi.
- jParallaks sichqoncha koʻrsatgichining harakatiga qarab qatlamlar harakatini ifodalaydi.
- Stellar.js plagin boʻlib, uning yordamida har qanday element parallaks aylantirish effekti qoʻshilgan holda yaratilgan.
Parallaks kursorga biriktirilgan
Bu parallaks juda ta'sirli ko'rinadi. Bir qarashda harakatsizsichqoncha kursori yaqinlashganda sayt sahifasi ob'ektlari harakatlanadi. U jonlanganga o‘xshaydi va ko‘chirilayotgan elementni kuzatib boradi.
Avval rasmda toʻxtash kerak. Kerakli rasm ramkaga joylashtiriladi, uning qirralari yashirin bo'lishi kerak. Usul juda oddiy va natijada olingan chizma juda jozibali ko'rinadi.
Sayt uchun paralaks effekti dizaynning ajoyib usuli hisoblanadi. Uning ishlatilishi resursni yaratishga tegishli e'tibor berilganligini ko'rsatadi. Shuning uchun, taklif qilinadigan xizmatlar yoki o'qish uchun ma'lumotlarga e'tibor qaratish lozim. Bunday saytlar bir xil, ammo sodda tarzda yaratilgan resurslar fonida foydaliroq ko'rinadi.
