პარალაქსის მოგზაურობის ბლოგი ცის კარვის ეფექტები. მარტივი პარალაქსის ეფექტის ტექნიკა

| 29.09.2014

შუადღე მშვიდობისა, ძვირფასო მკითხველებო! ჩვენი დღევანდელი რეიტინგი, რომელიც შედგება 10 ადგილისგან, ეძღვნება არა ჩვეულებრივ საიტებს. ამ TOP 10 სიის საიტებს აქვთ ერთი საერთო მახასიათებელი - პარალაქსის ეფექტი.

განსაკუთრებით მათთვის, ვინც ჯერ კიდევ არ იცის რა არის ეს, მოკლედ ვისაუბრებთ ამ ეფექტზე, რომელმაც უკვე სწრაფად დაიწყო იმპულსის მატება და სულ უფრო პოპულარული ხდება ვებ დიზაინის სფეროში.

ასე რომ, პარალაქსის ეფექტი, ან პარალაქსის გადახვევა, არის სპეციალური ტექნიკა, რომლის დროსაც პერსპექტიულ ფონზე ობიექტები უფრო ნელა მოძრაობენ, ვიდრე წინა პლანზე მყოფი ობიექტები. ამის გამო იქმნება 3D ეფექტი, ჩნდება სამგანზომილებიანი სივრცის განცდა. პარალაქსის გადახვევა შესანიშნავი გზაა ერთგვერდიან ვებსაიტზე ელფერის დასამატებლად, ინფოგრაფიკის გასაცოცხლებლად, ისტორიის თქმის ან პორტფოლიოს წარმოჩენისთვის. თანამედროვე დიზაინერების ზოგიერთ ნამუშევარს კი სრული თავდაჯერებულობით შეიძლება ვუწოდოთ ხელოვნების ნიმუშები... თუმცა, ასჯერ მოსმენას სჯობს ერთხელ ნახოთ - გადახედეთ ჩვენს TOP 10 საიტს და თავად შეხედეთ!

გთხოვთ გაითვალისწინოთ: ზოგიერთი საიტი პარალაქსის გადახვევით შეიძლება იყოს რესურსზე ინტენსიური მრავალი ეფექტის გამო, ამიტომ ჭუჭყიანი შეიძლება მოხდეს გარკვეულ კომპიუტერებსა და პორტატულ მოწყობილობებზე.

Grab & Go

ჩვენს რეიტინგში მეათე ადგილს იკავებს Grab & Go ვებგვერდი, სადაც პარალაქსის ეფექტი გამოიყენება სურათის გასაფორმებლად და გასაცოცხლებლად. კურსორის გადაადგილებისას ხედავთ, როგორ მოძრაობენ ფონზე მდებარე სახლები და ხეები ერთდროულად. დამეთანხმებით, ამ ხალისის გამო, არის შანსი, რომ საიტი უკეთ დაიმახსოვროს ვიზიტორს.

ციფრული ხელები

DigitalHands, რომელიც მე-9 ადგილზეა, ასევე იყენებს პარალაქსის ეფექტს, რათა გამოირჩეოდეს ლამაზად და იყოს დასამახსოვრებელი ვიზიტორებისთვის. ამოძრავეთ მაუსის კურსორი და ისიამოვნეთ სპეციალური ეფექტით.

მადველი

ნიუ-იორკში დაფუძნებული კრეატიული სააგენტო Madwell აჩვენებს თავის პორტფელს ვებსაიტის მთავარ გვერდზე, ჭკვიანურად იყენებს პარალაქსის ეფექტს. 3D შეგრძნება არ ტოვებს მომხმარებელს მთელი გადახვევის დროს.

ოკლი

ნებისმიერ პროდუქტს სჭირდება სათანადო პრეზენტაცია. Oakley მაღაზიის ვებსაიტი იყენებს პარალაქსის გადახვევას Airbrake MX სათვალეების უპირატესობების დემონსტრირებისთვის. აღმოჩნდა საკმაოდ შთამბეჭდავი და ინფორმატიული, რადგან პროდუქტების ნახვა და შესწავლა შესაძლებელია ყველა მხრიდან, უბრალოდ გრაგნილის გამოყენებით.

გახადე შენი ფული მნიშვნელოვანი

რამდენიმე ადამიანს არ აწუხებს პირადი ფინანსების თემა. ვებგვერდი Make Your Money Matter, რომელმაც ჩვენს რეიტინგში მე-6 ადგილი დაიკავა, ხელმისაწვდომი სახით მაყურებელს უხსნის საკრედიტო კავშირის უპირატესობებს და საუბრობს ბანკების მინუსებზე. აქ შეგიძლიათ გამოიყენოთ კალკულატორი, რომელიც აჩვენებს, თუ რამდენ მოგებას იღებენ ბანკები კლიენტების ინვესტიციებიდან, ასევე იპოვით საკრედიტო კოოპერატივების ფილიალებს საფოსტო კოდით.

კოსმოსური ნემსი

გსურთ შეისწავლოთ სიეტლი მიწის 184 მეტრიდან? Space Needle-ის ვებსაიტი მიგიყვანთ ვირტუალურ გასეირნებაზე ქალაქის ყველაზე ცნობად ღირშესანიშნაობაზე - Space Needle, რაც ინგლისურად „კოსმოსურ ნემსს“ ნიშნავს. ეს კოშკი 184 მ სიმაღლისა, 42 მ სიგანისა და 9550 ტონას იწონის, უძლებს ქარიშხლებს 320 კმ/სთ-მდე ქარის სიჩქარით და 9.1 მაგნიტუდამდე მიწისძვრებს. გარდა ამისა, კოშკს აქვს 25 ელვა. Space Needle-ის გამორჩეული თვისებაა სადამკვირვებლო გემბანი 159 მეტრის სიმაღლეზე, SkyCity რესტორანი და საჩუქრების მაღაზია. მისი ზემოდან შეგიძლიათ იხილოთ სიეტლის ცენტრი, მთა რენიერი, კასკადის მთები, ელიოტის ყურე და მიმდებარე კუნძულები.

Peugeot Hybrid4 - გრაფიკული რომანი

უმსხვილესმა ფრანგულმა ავტომწარმოებელმა Peugeot-მა საკმაოდ უჩვეულო სახით წარმოადგინა Hybrid4 ჰიბრიდული წამყვანი სისტემა. ჩვენს თვალწინ იხსნება ამაღელვებელი კომიქსი (რომელიც, სხვათა შორის, შეიძლება დაყენდეს ავტომატურ დაკვრაზე), სადაც მთავარი გმირის ამოცანაა საიდუმლო მონაცემების მიღება და უსიამოვნების გარეშე წასვლა. ოპერაციის წარმატებით განსახორციელებლად, იგი იძულებულია გადართოს მართვის ოთხ სხვადასხვა რეჟიმს შორის, რომლებიც მიბაძავს Peugeot Hybrid4 ტექნოლოგიას - მაქსიმალური შესრულება და დინამიკა (სპორტი), ყველა წამყვანი და მაქსიმალური წევის რეჟიმი (4WD), ბალანსი შესრულებასა და ეკონომიურობას შორის (Auto. ), მშვიდი ოპერაცია (ZEV).

მოსიარულე მკვდრები

ასე რომ, ჩვენ მოვედით მესამე ადგილზე ჩვენს TOP საიტების სიაში, რომელიც მიდის The Walking Dead პროექტზე. საიტის შექმნისას, რომელმაც პირველ რიგში მიიპყრო Walking Dead სერიის მრავალი თაყვანისმცემლის ყურადღება, გამოყენებული იქნა HTML5, CSS3, JavaScript და, რა თქმა უნდა, პარალაქსის ეფექტი. დეველოპერებმა დიდი სამუშაო გააკეთეს, რათა ყველა ამ ტექნოლოგიამ ერთად და ყველა პლატფორმაზე იმუშაოს. საიტზე შესვლისას და გადახვევის დაწყებისას მომხმარებელი ხედავს კომიქსების ისტორიას იმის შესახებ, თუ როგორ აქცევენ მსახიობებს ზომბებად.

უნიკალური და განუმეორებელი პროექტი, Sony-ის კამპანიის "Be Moved" ნაწილი, ის შთამბეჭდავია თავისი მოცულობით, დინამიკით და გააზრებულობით უმცირეს დეტალებამდე. თქვენ ალბათ ვერ იპოვით უკეთესი პროდუქტის პრეზენტაციას, ვიდრე Sony-ს. სიტყვები არ არის საჭირო - უბრალოდ გადადით ქვემოთ და ისიამოვნეთ!

ბინა vs. რეალიზმი

და ბოლოს, ჩვენ მივაღწიეთ პირველ ადგილს ჩვენს რეიტინგში, რომელიც დაიკავა Flat vs. რეალიზმი ინტერაქტიული სააგენტოს inTacto-ს იდეაა. ეს საახალწლო პროექტი სანახაობრივი გრაფიკით (და მუსიკით!) არის საბრძოლო ჟანრის მინი თამაში საინტერესო ისტორიით, სადაც ხდება დაპირისპირება ორი ტიპის დიზაინის - რეალისტური და ბრტყელი - წარმომადგენლებს შორის. 2013 წლის ბოლოს - 2014 წლის დასაწყისის მთავარ ჰოლივარზე ფოკუსირებით, შემქმნელები მართლები იყვნენ: გამოსვლის შემდეგ, ამ შთამბეჭდავმა ნამუშევარმა მყისიერად გამოიწვია სენსაცია და გახდა პოპულარული განხილვის საგანი ბლოგებსა და სიახლეებში.

საიტის დეველოპერებმა მოახერხეს პარალაქსის გადახვევისა და HTML5 თამაშის გაერთიანება. „ჩვენ გვინდოდა დავრწმუნდეთ, რომ საიტის თავიდან ბოლომდე გადაადგილებისას ყველაფერი შეუფერხებლად და შეფერხების გარეშე მოხდეს. ამისათვის ჩვენ გამოვიყენეთ AJAX, რომელიც საშუალებას მოგვცემდა განახლებულიყო მონაცემები ფონზე“, - განმარტა სააგენტოს კრეატიულმა დირექტორმა ალეხანდრო ლაზოსმა. პროექტი მაყურებლის წინაშე წარსდგა 2013 წლის ბოლოს, ახალ წლამდე. მოემზადეთ გადახვევისთვის, ბევრი საინტერესო რამ გელოდებათ!

შენიშვნა: სამწუხაროდ, ზოგიერთმა საიტმა შეიძლება დროთა განმავლობაში შეიცვალოს დიზაინი.

პარალაქსი (ბერძნული) ცვლილება, მონაცვლეობა) არის ობიექტის აშკარა პოზიციის ცვლილება შორეულ ფონთან მიმართებაში დამკვირვებლის მდებარეობიდან გამომდინარე. ეს ტერმინი ძირითადად გამოიყენებოდა ბუნებრივ მოვლენებზე, ასტრონომიასა და გეოდეზიაში. მაგალითად, მზის ეს გადაადგილება სვეტთან მიმართებაში წყალში ასახვისას ბუნებით პარალაქსია.

ვებ დიზაინში, პარალაქსის ეფექტი ან პარალაქსის გადახვევა არის სპეციალური ტექნიკა, სადაც ფონის სურათი პერსპექტივაში მოძრაობს უფრო ნელა, ვიდრე წინა პლანზე. ეს ტექნოლოგია უფრო და უფრო ხშირად გამოიყენება, რადგან ის მართლაც შთამბეჭდავი და მაგარი გამოიყურება.

სამგანზომილებიანი სივრცის ეს ეფექტი მიიღწევა რამდენიმე ფენის გამოყენებით, რომლებიც ერთმანეთზეა გადაყრილი და გადახვევისას სხვადასხვა სიჩქარით მოძრაობენ. ამ ტექნოლოგიის გამოყენებით, თქვენ შეგიძლიათ არა მხოლოდ შექმნათ ხელოვნური სამგანზომილებიანი ეფექტი, შეგიძლიათ გამოიყენოთ იგი ხატულებზე, სურათებზე და გვერდის სხვა ელემენტებზე.

პარალაქსის ეფექტის ნაკლოვანებები

პარალაქსის მთავარი მინუსი არის საიტის მუშაობის პრობლემები. ყველაფერი გამოიყურება ლამაზად და ელეგანტურად, მაგრამ javascript / jQuery-ის გამოყენება, რომლის დახმარებითაც იქმნება პარალაქსის ეფექტი, მნიშვნელოვნად ამძიმებს გვერდს და მნიშვნელოვნად ამცირებს მის ჩატვირთვის სიჩქარეს. ეს იმიტომ ხდება, რომ იგი ეფუძნება რთულ გამოთვლებს: Javascript უნდა აკონტროლოს თითოეული პიქსელის პოზიცია ეკრანზე. ზოგიერთ შემთხვევაში, სიტუაცია კიდევ უფრო ართულებს ბრაუზერის და პლატფორმების თავსებადობის პრობლემებს. ბევრი დეველოპერი გირჩევთ გამოიყენოთ პარალაქსის ეფექტი მაქსიმუმ ორ გვერდის ელემენტზე.

ალტერნატიული გადაწყვეტა

CSS 3-ის მოსვლასთან ერთად, ამოცანა ცოტათი გამარტივდა. მისი დახმარებით თქვენ შეგიძლიათ შექმნათ ძალიან მსგავსი ეფექტი, რომელიც გაცილებით ეკონომიური იქნება რესურსების მოხმარების თვალსაზრისით. დასკვნა ის არის, რომ საიტის შინაარსი მოთავსებულია ერთ გვერდზე და გადაადგილება ქვეგვერდებზე ხდება CSS 3-გარდამავალი მეთოდის გამოყენებით. ეს არის იგივე პარალაქსი, მაგრამ გარკვეული განსხვავებით: ფაქტია, რომ შეუძლებელია მოძრაობის მიღწევა სხვადასხვა სიჩქარით მხოლოდ CSS 3-ის გამოყენებით. გარდა ამისა, ეს სტანდარტი არ არის მხარდაჭერილი ყველა თანამედროვე ბრაუზერის მიერ. ამიტომ, აქაც არის სირთულეები.

დასკვნა

მიუხედავად იმისა, რომ პარალაქსის ეფექტი პოპულარულია, ყველა არ ჩქარობს მის გამოყენებას ვებსაიტის შექმნისას ზემოთ აღნიშნული პრობლემების გამო. როგორც ჩანს, მხოლოდ დრო სჭირდება ტექნოლოგიას, რომ დაძლიოს წარმოშობილი სირთულეები. იმავდროულად, ეს ვარიანტი შეიძლება გამოყენებულ იქნას ერთგვერდიან საიტებზე: ამ გზით ის აუცილებლად დაიმახსოვრდება და შეძლებს მომხმარებლის შენარჩუნებას.

პარალაქსი ჯავასკრიპტში

• jQuery parallax scrolling effect - დანამატი, რომელიც აკავშირებს პარალაქსის ეფექტს მაუსის ბორბლის მოძრაობასთან
• Scrolldeck - პარალაქსის ეფექტის შესაქმნელად დანამატი
• jParallax - აქცევს გვერდის ელემენტებს აბსოლუტურად განლაგებულ ფენებად, რომლებიც მოძრაობენ მაუსის მიხედვით

გამარჯობა ყველას. დღეს მე გეტყვით მცირე სკრიპტის შესახებ მარტივი პარალაქსის ეფექტის შესაქმნელად.

სტატია იქნება მოკლე, მაგრამ ინფორმაციული, ასე რომ, დაახლოებით 15 წუთში თქვენ შეძლებთ პარალაქსის დამატებას თქვენს სადესანტო გვერდზე. თუ დიდი ხანია გსურთ ამ საინტერესო ეფექტის დამატება თქვენს ვებსაიტზე, წაიკითხეთ...

რა არის პარალაქსის ეფექტი საიტზე?

ჯერ გეტყვით რა არის. ასე რომ, პარალაქსის ეფექტი ვებ დიზაინში არის ტექნიკა, რომლის დროსაც ფონის სურათი უფრო ნელა მოძრაობს, ვიდრე მის ზემოთ მდებარე ელემენტები. მათთვის, ვინც უფრო გამოცდილია, მე გავაკეთებ დათქმას, რომ ჩვენ არ "დავაკავშირებთ" პარალაქსის ეფექტს მაუსის კურსორთან. მოდით შევქმნათ პარალაქსის ფონი. მოდი დავიწყოთ.

როგორ გავაკეთოთ პარალაქსის ეფექტი ვებსაიტზე

ასე რომ, პირველ რიგში, ჩვენ ვუკავშირდებით jquery ბიბლიოთეკას. ჩვეულებისამებრ, სათაურებს შორის:

ახლა თქვენ უნდა ჩამოტვირთოთ და დააკავშიროთ Simple Parallax Scrolling სკრიპტი. გირჩევთ დაუყოვნებლივ გამოიყენოთ შეკუმშული ვერსია, რადგან არ არის საჭირო დამატებითი პარამეტრების გაკეთება სკრიპტის შიგნით:

ახლა, მოდით გავარკვიოთ, რა უნდა დაიწეროს html გვერდზე, რომ ჩვენი პარალაქსის ეფექტი იმუშაოს.

Smartlanding Landing გვერდის შექმნა

Data-parallax="გადახვევა"

Data-image-src="გზა გამოსახულებისკენ/bg.png"

გთხოვთ გაითვალისწინოთ, რომ სურათი არ არის განთავსებული სათაურში img ტეგის გამოყენებით, არამედ დაყენებულია პირდაპირ ატრიბუტად იმ კონტეინერში, რომელშიც გვინდა პარალაქსის დანერგვა.

პრინციპში, აქ შეგვიძლია დავასრულოთ, მაგრამ კიდევ რამდენიმე სიტყვა:

• თუ ჩაყვინთვის სხვა ელემენტები არ არის, რომელშიც პარალაქსის ეფექტის განხორციელება გვინდა, მაშინ უნდა დააყენოთ მისი სიმაღლე, წინააღმდეგ შემთხვევაში ვერაფერს დაინახავთ.
• თუ იყენებთ არარეაქციონურ დიზაინს, შეგიძლიათ დააყენოთ სურათის სიგანე და სიმაღლე პირდაპირ html-ში naturalWidth და naturalHeight ატრიბუტების გამოყენებით.
• თქვენ შეგიძლიათ სურათების გადატანა მონაცემთა პოზიციის ატრიბუტის გამოყენებით. ეს არის ფონური პოზიციის ანალოგი css-ში.

თქვენ შეგიძლიათ იპოვოთ სხვა ვარიანტები პროექტის ოფიციალურ გვერდზე, რომელიც ზემოთ არის ჩამოთვლილი.

როგორც მოგეხსენებათ, პარალაქსი არის ვიზუალური ეფექტი, სადაც ობიექტების პოზიციები განსხვავებულად გამოიყურება, როდესაც მათ სხვადასხვა პოზიციიდან ვუყურებთ. პარალაქსის გადახვევა ქმნის ილუზიას, რომ ორი ობიექტი, რომლებიც პირდაპირ ხედშია, მაგრამ ერთმანეთისგან დაშორებით, სხვადასხვა სიჩქარით მოძრაობს. ჩვენ ვხედავთ ამ ეფექტს ყველგან, როცა მოძრაობაში ვართ: როცა ქუჩაში მივდივართ, ვხედავთ, რომ ყველა ახლომახლო მოძრაობს ბევრად უფრო სწრაფად, ვიდრე შორს, როცა მანქანით მივდივართ, ვხედავთ, რომ გზის მახლობლად ხეები და ბუჩქები ძალიან სწრაფად მიდიან სწრაფად, მაგრამ დეკორაციები ფონზე, როგორიცაა მთები, ძალიან ნელა მოძრაობს. ამ ეფექტს მოძრაობის პარალაქსს უწოდებენ.

ეს ეფექტი შეიძლება გამოყენებულ იქნას ვებ გვერდებზე: ჩვენ შეგვიძლია გამოვიყენოთ პარალაქსის ეფექტი ბლოკებზე, რომლებიც შეიცავს ფონის სურათებს და ზოგიერთ შიდა შინაარსს. გვერდის გადახვევისას შიგთავსი გადახვევს, მაგრამ ფონი ადგილზე უნდა დარჩეს. CSS დაგვეხმარება ამ ეფექტის შექმნაში.

ნაბიჯი 1 – HTML განყოფილება 1 მარტივი სათაური 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. დროა id nunc ut gravida. ვესტიბულუმი ac...

ნაწილი 2 მარტივი სათაური 2

Nam imperdiet posuere bibendum. Aliquam nec consectetur metus. Aliquam egestas a elit at malesuada...

ნაწილი 3 მარტივი სათაური 3

Proin tempor urna vitae tortor porttitor, ac malesuada elit lacinia. ნულა აქ ტელუს ნულა. არ დაგავიწყდეთ...

როგორც ხედავთ, HTML მარკირება არ არის რთული, ის მოიცავს 6 ალტერნატიულ განყოფილებას: სამი მათგანი შეიცავს ფონის სურათებს (სექციები პარალაქსის კლასით), სამი შეიცავს ტექსტს (სექციები შინაარსის კლასით).

ნაბიჯი 2 - სურათები

ფონის ყველა სურათს აქვს ფიქსირებული ზომა 1600 × 600 პიქსელი. ეს საშუალებას მოგვცემს გამოვიყენოთ სურათები ეკრანის უმეტეს რეზოლუციებზე (საპასუხო განლაგება). ყველა ჩვენს პარალაქსის ბლოკს აქვს იგივე ფიქსირებული სიმაღლე (600 პიქსელი).

ნაბიჯი 3 - CSS

ახლა ჩვენ უნდა გავაფართოვოთ სურათები ისე, რომ შეავსოთ ყველა არსებული სივრცე, ამისათვის ჩვენ დავაყენეთ მნიშვნელობა background-size: cover და შემდეგ დავაყენეთ background-attachment: fixed ფონის დასაფიქსირებლად.

კონტეინერი ( მაქსიმალური სიგანე: 960 პიქსელი; ზღვარი: 0 ავტომატური; ) განყოფილება. section:last-child ( margin-bottom: 0; ) section.section h2 ( margin-bottom: 40px; font-family: "Roboto Slab", serif font-size: 30px ) section.section p ( margin-bottom: 40px; font-weight: 300; ) section.section p:last-child (margin-bottom: 0; ) განყოფილება. section.content ( padding: 40px 0; ) section.section.parallax ( სიმაღლე: 600px; ფონის პოზიცია: 50% 50%; ფონის გამეორება: არ განმეორდება; ფონის დანართი: ფიქსირებული; ფონის ზომა: საფარი; ) section.section.parallax h1 ( ფერი: rgba(255, 255, 255, 0.8); შრიფტის ზომა: 48 პიქსელი; ხაზის სიმაღლე: 600 პიქსელი; შრიფტის წონა: 700; ტექსტის გასწორება: ცენტრში; ტექსტის ტრანსფორმაცია: დიდი; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2 ) section.section.parallax-1 (background-image: url("../imgages/1.jpg"); ) section.section. parallax-2 ( background-imgages: url("../imgages/2.jpg"); ) section.section.parallax-3 ( background-imgages: url("../imgages/3.jpg"); ) @media ყველა და (მინ-სიგანე: 600 პიქსელი) ( section.section h2 ( font-size: 42px;

) section.section p ( font-size: 20px; ) section.section.parallax h1 ( font-size: 96px; ) ) @media all and (min-width: 960px) (section.section.parallax h1 ( font-size : 160 პიქსელი ) )

პარალაქსის ეფექტი ძალიან საინტერესო ტექნიკაა. გადახვევისას, ფონის სურათი მოძრაობს უფრო ნელა, ვიდრე შინაარსი, რაც იწვევს 3D სივრცის ილუზიას. ამ გაკვეთილზე ჩვენ წარმოგიდგენთ მარტივ და ეფექტურ გზას შესანიშნავი ეფექტის მისაღებად.

მარკირება

ეს ტექნიკა ეფუძნება ფონის სურათის მოძრაობის სიჩქარის კონტროლს. მოდით შევქმნათ HTML მარკირება, რომელიც შეიცავს ორ განყოფილებას ატრიბუტებით "data-type" და "data-speed". ატრიბუტების დანიშნულება ცოტა მოგვიანებით გამოვლინდება:

ტეგები მონაცემთა ტიპისა და მონაცემთა სიჩქარის ატრიბუტებით საშუალებას გაძლევთ გახადოთ თქვენი მარკირება მარტივი და გასაგები.

სპეციფიკაციის მიხედვით, მონაცემებით დაწყებული ნებისმიერი ატრიბუტი განიხილება, როგორც პირადი მონაცემების შენახვა. გარდა ამისა, მათ არ აქვთ გავლენა შაბლონზე.

ვინაიდან ჩვენ გვჭირდება ფონური სურათების გადახვევის სიჩქარის კონტროლი, ძირითადი პარამეტრებისთვის გამოვიყენებთ data-type="background" და data-speed="10".

შემდეგ თითოეულ ტეგს დავამატებთ ტეგს.

აბსოლუტური პოზიციონირება მარტივი პარალაქსის ეფექტი

ჩვენ გადავხვევთ ტეგის ფონს უფრო ნელა, ვიდრე მისი შინაარსი, ე.ი. ეს ქმნის პარალაქსის ილუზიას.

CSS

#home ( ფონი: url(home.jpg) 50% 0 გამეორება დაფიქსირდა; მინ-სიმაღლე: 1000px; ) #about (ფონი: url(about.jpg) 50% 0 გამეორების გარეშე მინ-სიმაღლე: 1000px; )

და მოდით განვსაზღვროთ სტილები ჩვენი დემო გვერდის დარჩენილი ელემენტებისთვის.

#home ( ფონი: url(home-bg.jpg) 50% 0 გამეორება დაფიქსირებულია; მინ-სიმაღლე: 1000 პიქსელი; სიმაღლე: 1000 პიქსელი; ზღვარი: 0 ავტო; სიგანე: 100%; მაქსიმალური სიგანე: 1920 პიქსელი; პოზიცია: შედარებითი; ) #home article ( სიმაღლე: 458px; პოზიცია: აბსოლუტური; ტექსტის გასწორება: ცენტრში; ზედა: 150px; სიგანე: 100%; ) #about ( ფონი: url(about-bg.jpg) 50% 0 გამეორება დაფიქსირებულია; მინ-სიმაღლე : 1000px: 0 auto-width: 1920px -webkit-box-shadow: 0 0 50px rgba(0,0,0,0,8p); პოზიცია: აბსოლუტური: ზევით: 100%;

ჯადოსნური კოდი

ჩვენ ვიყენებთ jQuery-ს. დავიწყოთ სტანდარტული document.ready() მეთოდით, რათა დავრწმუნდეთ, რომ გვერდი დატვირთულია და მზად არის მანიპულირებისთვის.

$(დოკუმენტი).ready(function())( ));

ახლა ჩვენ გვჭირდება ყურადღება. პირველი, რაც აქ ხდება, არის ყველა ელემენტის გამეორება გვერდზე data-type="background" ატრიბუტით.

$(დოკუმენტი).ready(function())($("განყოფილება").each(function())( var $bgobj = $(this); // მივანიჭოთ ობიექტი ));

.each() ფუნქციას დავამატებთ კიდევ ერთ ფუნქციას.scroll() , რომელიც იძახება გადახვევის დაწყებისას.

$(window).scroll(function () (

თქვენ უნდა დაადგინოთ, რამდენ ხანს ატრიალებდა მომხმარებელი გვერდს და შემდეგ გაყავით მიღებული მნიშვნელობა მონაცემთა სიჩქარის ატრიბუტში განსაზღვრულ მნიშვნელობაზე.

Var yPos = -($window.scrollTop() / $bgobj.data("სიჩქარე"));

$window.scrollTop() - მიიღეთ მიმდინარე გადახვევის მნიშვნელობა ზემოდან. $bgobj.data("სიჩქარე") აღნიშნავს მონაცემთა სიჩქარის ატრიბუტს მარკირებაში. yPos არის საბოლოო მნიშვნელობა, რომელიც გამოიყენება გადახვევისთვის. თუმცა, უარყოფითი მნიშვნელობა გამოიყენება, რადგან ფონი მოძრაობს მომხმარებლის გადახვევის საპირისპირო მიმართულებით.

ჩვენს მაგალითში მონაცემთა სიჩქარის ატრიბუტს აქვს 10 მნიშვნელობა. დავუშვათ, რომ ბრაუზერის ფანჯარა გადახვევს 57 პიქსელს. ეს ნიშნავს, რომ 57px იყოფა 10 = 5.7px-ზე.

// შეაგროვეთ ფონის პოზიცია var coords = "50% "+ yPos + "px"; // ფონის გადატანა $bgobj.css(( backgroundPosition: coords ));

ახლა ჩვენ უნდა შევაგროვოთ ყველა მონაცემი ერთ მნიშვნელობაში. ფონის ჰორიზონტალური პოზიციის სტატიკური შესანარჩუნებლად, ჩვენ ვიყენებთ 50% მნიშვნელობას მისი xPosition თვისებისთვის. შემდეგ ვამატებთ yPos-ს, როგორც yPosition თვისების მნიშვნელობას, შემდეგ კი კოორდინატებს ვანიჭებთ ფონს: $bgobj.css(( backgroundPosition: coords )); .

საბოლოო კოდი ასე გამოიყურება:

$(დოკუმენტი).ready(function())( $("სექცია").each(function())( var $bgobj = $(this); // მიანიჭეთ ობიექტი $(window).scroll(function() ( var yPos = -($window.scrollTop() / $bgobj.data("speed")); // ფონის კოორდინატების შეკრება var coords = "50% "+ yPos + "px"; // ფონის გადაადგილება $bgobj.css (( backgroundPosition: coords ));

კლიპი IE-სთვის

ერთი რამ რჩება: IE-ს ძველ ვერსიებს არ შეუძლიათ ჩვენება და ტეგები. გამოსწორება მარტივია, ჩვენ გამოვიყენებთ ელემენტის შექმნის სტანდარტულ გადაწყვეტას, რომელიც ჯადოსნურად აიძულებს ბრაუზერს ამოიცნოს HTML5 ტეგები.

// ელემენტების შექმნა IE document.createElement("სტატია"); document.createElement("განყოფილება");

გარდა ამისა, ჩვენ ვიყენებთ CSS გადატვირთვის ფაილსისე, რომ ყველა ბრაუზერმა აჩვენოს გვერდი ერთნაირად.