მოძრაობაში, პარალაქსი ნიშნავს ობიექტის მდებარეობის ცვლილებას გარკვეულ ფონზე დამკვირვებლის მიმართ, რომელიც იმყოფება ადგილზე. ამ ტერმინმა პოპულარობა მოიპოვა ინტერნეტში. კერძოდ, საინტერესო გამოიყურება საიტი, რომლის დიზაინში არის დინამიური ელემენტები. 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.
- გაბრაზების ქუჩები.
- მთვარის პატრული.
- კუს დროში.
ანუ პარალაქსი არის ტექნიკა, რომელიც გამოიყენება საკმაოდ დიდი ხნის განმავლობაში. ამ თამაშებს მართლაც გარკვეული ნოსტალგიით ახსოვს. ბოლოს და ბოლოს, ისინი თითქოს იმ პერიოდის ხასიათით არიან გამსჭვალული.
გამოსახულებები ეკრანზე იქმნება ისეთი ტექნიკის გამოყენებით, როგორიცაა პარალაქსის გადახვევა. არაფერია გასაკვირი იმაში, რომ ამ ტექნიკამ დამსახურებული პოპულარობა მოიპოვა. ამ დიზაინის კონცეფციას თბილად ხვდებიან ისინი, ვინც თამაშობდა 80-90-იან წლებში ან უყურებდა მეგობრების თავისუფალ დროს.
პარალაქსის გადახვევა
მსოფლიო წამყვანი ბრენდების მარკეტოლოგები დიდი ხანია იყენებენ ყველა სახის ტექნიკურ მიღწევას. ამგვარად, შესაძლებელი ხდება საიტის შემთხვევითი სტუმრის დაინტერესებაც კი.
პარალაქსის გადახვევა საკმაოდ წარმატებით გამოიყენა 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 არის დანამატი, რომლითაც ნებისმიერი ელემენტი შექმნილია პარალაქსის გადახვევის ეფექტის დამატებით.
პარალაქსი მიმაგრებულია კურსორზე
ეს პარალაქსი საკმაოდ შთამბეჭდავად გამოიყურება. ერთი შეხედვით უმოძრაოსაიტის გვერდის ობიექტები მოძრაობენ, როდესაც მაუსის კურსორი უახლოვდება. ის თითქოს ცოცხლდება და მიჰყვება გადაადგილებულ ელემენტს.
პირველ რიგში, თქვენ უნდა გაჩერდეთ სურათზე. საჭირო სურათი მოთავსებულია ჩარჩოში, ხოლო მისი კიდეები უნდა იყოს დამალული. მეთოდი ძალიან მარტივია და შედეგად მიღებული ნახატი საკმაოდ მიმზიდველად გამოიყურება.
პარალაქსის ეფექტი საიტისთვის დიზაინის შესანიშნავი საშუალებაა. მისი გამოყენება მიუთითებს, რომ სათანადო ყურადღება დაეთმო რესურსის შექმნას. ამიტომ, ღირს ყურადღება მიაქციოთ შეთავაზებულ სერვისებს ან წასაკითხ ინფორმაციას. ასეთი საიტები უფრო მომგებიანი გამოიყურება იდენტური, მაგრამ უბრალოდ შექმნილი რესურსების ფონზე.
