Сіздің сайтыңыздағы динамикалық интерфейс пайдаланушылардың назарын аударады және трафикті арттырады. Веб-сайтқа анимациялық тақырып жасау, бір қарағанда, онша қиын емес.
Нұсқаулық
1-қадам
Тышқан курсоры айналған кезде оның конфигурациясын өзгертетін анимациялық тақырып жасауға тырысайық. Мысалы, тақырыптағы ақ-қара сурет өзара әрекеттесу кезінде түске айналды немесе басқасына өзгертілді.
2-қадам
JQuery кітапханасын ресми веб-сайттан (jquery.com) жүктегеннен кейін компьютерге орнатыңыз.
3-қадам
Сценарий тегімен кітапхананы html файлына бас тегтер арасында байланыстырыңыз:
4-қадам
Пайдаланушы тақырыппен өзара әрекеттесу кезінде бірін-бірі алмастыратын екі суретті таңдаңыз. Егер сіз ақ пен қара түстерге ауысқыңыз келсе, суреттің көшірмесін жасаңыз және фотошопта қанықтырыңыз.
5-қадам
HTML-құжатта екі элементтің тізімін жасаңыз және сурет тегін қолданып әрқайсысына суреттер қосыңыз. Мысалы, тізімге стиль класын қолданыңыз
6-қадам
Мұны сіздің сайтыңыздың тақырыбына жауап беретін бөлімде жасаңыз. Алдымен кескіннің мекен-жайын көрсетіңіз, ол статикалық күйде көрінуі керек, содан кейін пайда болғанда.
7-қадам
Бірінші суретке class = «pervaya», ал екінші суретке class: «vtoraya» қосыңыз.
8-қадам
Тіркелген css файлында элементтердің абсолютті орналасуын (позиция: абсолютті;), бекітілген биіктік пен енді (биіктігі мен ені) осы кластар үшін көрсетіңіз.
9-қадам
Суреттерді бірінің үстіне бірін қабаттастыру. Ол үшін z-индекс стилін қолданыңыз. Ол элементтерді z-осі бойымен туралауға мүмкіндік береді, бұл бізден экранның тереңдігінде кетеді.
10-қадам
Тізімнің өзі үшін шегіністі, туралауды көрсетіп, тізім элементтерін алып тастаңыз (тізім стилінің типі: жоқ;).
11-қадам
. Js файлын жасаңыз және оған келесі кодты қойыңыз:
$ (document).ready (function () {
$ («img.grey»). hover (функция () {
$ (this).stop (). animate ({«бұлыңғырлық»: «0»}, «баяу»);
}, функция () {
$ (this).stop (). animate ({«бұлыңғырлық»: «1»}, «баяу»);
});
});
12-қадам
Бұл код сіздің тақырыбыңызды іс-әрекетке келтіреді.. Js файлын html құжатына қосуды ұмытпаңыз.
