თქვენს საიტზე დინამიური ინტერფეისი მიიპყრობს მომხმარებლების ყურადღებას და გაზრდის ტრაფიკს. ვებსაიტისთვის ანიმაციური სათაურის გაკეთება არც ისე რთულია, როგორც ერთი შეხედვით ჩანს.
ინსტრუქციები
Ნაბიჯი 1
შევეცადოთ გავაკეთოთ ანიმაციური სათაური, რომელიც შეიცვლის მის კონფიგურაციას, როდესაც მაუსის კურსორი გადაინაცვლებს მასზე. მაგალითად, სათაურის შავ-თეთრი სურათი ურთიერთქმედების შედეგად გადაიქცა ფერად ან შეიცვალა სხვაში.
ნაბიჯი 2
დააინსტალირეთ jQuery ბიბლიოთეკა თქვენს კომპიუტერში, ოფიციალური ვებსაიტიდან (jquery.com) გადმოტვირთვის შემდეგ.
ნაბიჯი 3
დააკავშირეთ ბიბლიოთეკა თქვენს html ფაილთან სათაურის ნიშნებს შორის სკრიპტის ტეგის გამოყენებით:
ნაბიჯი 4
აირჩიეთ ორი სურათი, რომელიც ჩაანაცვლებს ერთმანეთს, როდესაც მომხმარებელი ურთიერთქმედება სათაურთან. თუ გსურთ შავი და თეთრი ფერიდან გადავიდეთ, მაშინ შექმენით სურათის ასლი და გაასუფთავეთ იგი Photoshop- ში.
ნაბიჯი 5
Html- დოკუმენტში შექმენით ორი პუნქტის სია და თითოეულს დაურთეთ ნახატები სურათის ტეგის გამოყენებით. გამოიყენეთ სტილის კლასი სიაში, მაგალითად
ნაბიჯი 6
გააკეთეთ ეს div- ში, რომელიც პასუხისმგებელია თქვენი საიტის სათაურისთვის. პირველ რიგში, მიუთითეთ სურათის მისამართი, რომელიც უნდა აისახოს სტატიკურ მდგომარეობაში, შემდეგ კი ის, რაც გამოჩნდება მაუსის ადგილას.
ნაბიჯი 7
პირველ სურათს დაამატეთ class = "pervaya", ხოლო მეორე სურათს class: "vtoraya".
ნაბიჯი 8
თანდართულ css ფაილში მიუთითეთ ამ კლასების ელემენტების აბსოლუტური პოზიციონირება (პოზიცია: აბსოლუტური;), ფიქსირებული სიმაღლე და სიგანე (სიმაღლე და სიგანე).
ნაბიჯი 9
განათავსეთ სურათები ერთმანეთზე. ამისათვის გამოიყენეთ z-index სტილი. ეს საშუალებას გაძლევთ zX ღერძის გასწვრივ მოათავსოთ ელემენტები, რომლებიც ეკრანის სიღრმეში ჩვენგან შორდება.
ნაბიჯი 10
თავად სიისთვის მიუთითეთ ჩაღრმავება, საჭირო გასწორება და ამოიღეთ სიის ერთეულები (სიის სტილის ტიპი: არცერთი;).
ნაბიჯი 11
შექმენით.js ფაილი და ჩასვით მასში შემდეგი კოდი:
$ (დოკუმენტი). მზად (ფუნქცია () {
$ ("img.grey"). hover (ფუნქცია () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, ფუნქცია () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
ნაბიჯი 12
ეს კოდი თქვენს სათაურს ამოქმედდება. არ დაგავიწყდეთ.js ფაილის დაკავშირება html დოკუმენტთან.
