Сиздин сайтыңыздагы динамикалык интерфейс колдонуучулардын көңүлүн буруп, трафикти көбөйтөт. Вебсайт үчүн анимациялык баш жасоо, бир караганда, анчалык деле кыйын эмес.
Нускамалар
1 кадам
Чычкан курсорунун үстүндө жылып турганда конфигурациясын өзгөртө турган анимацияланган баш жасоого аракет кылалы. Мисалы, баштагы ак-кара сүрөт өз ара аракеттенүү менен түстүү болуп өзгөрүлүп же башкага өзгөргөн.
2-кадам
JQuery китепканасын расмий сайттан (jquery.com) жүктөп алгандан кийин, компьютериңизге орнотуңуз.
3-кадам
Китепкананы HTML файлыңызга скрипт тегинин жардамы менен баш тегдеринин ортосунда байланыштырыңыз:
4-кадам
Колдонуучу баш менен иштешкенде бири-бирин алмаштыра турган эки сүрөттү тандаңыз. Эгер сиз ак менен кара түстөн өтүүнү кааласаңыз, анда сүрөттүн көчүрмөсүн түзүп, Photoshop программасында каныктырыңыз.
5-кадам
HTML документиндеги эки нерсенин тизмесин түзүп, ар бирине сүрөт тегин колдонуп сүрөттөрдү тиркеңиз. Мисалы, өзүңүзгө стилдик классты колдонуңуз
6-кадам
Муну сиздин сайттын аталышы үчүн жооптуу болгон дивде жасаңыз. Биринчиден, статикалык абалда чагылдырылышы керек болгон сүрөттүн дарегин, андан кийин абройго чыкканда көрсөтүңүз.
7-кадам
Биринчи сүрөттө класс = "первая", ал эми экинчи сүрөттө класс: "вторая" кошуңуз.
8-кадам
Тиркелген css файлында ушул класстар үчүн элементтердин абсолюттук жайгашуусун (позициясы: абсолюттук;), белгиленген бийиктиги жана туурасы (бийиктиги жана туурасы) көрсөтүлсүн.
9-кадам
Сүрөттөрдү бири-биринин үстүнө катмарлап коюңуз. Бул үчүн z индексинин стилин колдонуңуз. Бул элементтерди экрандын тереңдигинде бизден алыстаган z огу боюнча тегиздөөгө мүмкүндүк берет.
10-кадам
Тизменин өзү үчүн, сизге керек болгон чегинүүнү, тегиздөөнү көрсөтүп, тизме элементтерин алып салыңыз (list-style-type: none;).
11-кадам
. Js файлын түзүп, ага төмөнкү кодду чаптаңыз:
$ (document).ready (function () {
$ ("img.grey"). hover (function () {
$ (this).stop (). жандуу ({"тунуктук": "0"}, "жай");
}, function () {
$ (this).stop (). жандуу ({"тунуктук": "1"}, "жай");
});
});
12-кадам
Бул код сиздин башыңызды кыймылга келтирет.. Js файлын html документине туташтырууну унутпаңыз.
