Сглобяване и анимиране

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Готови сме да преминем към привързването на тези html файлове.
Имам много файлове, няма ги отварям с notepad, т.
к.
няма да ги виждам добре и мога да се объркам.
Първо ще преименувам този на index, понеже в него ще сложа всичко.
Ще ги отворя в текстовият едитор.
Това тук е това, което направихме преди малко.
Искам всичките тези файлове, идващи от Photoshop, да ги вкарам в един.
Взимам този div.
Взимам даже и коментарите.
Ще препиша и тези коментари.
Този знак обозначава, че там свършва "ME".
Tук се виждат вече по-прегледно.
Menu.
Menu Open.
Накрая "work".
Слагам ID-та, за да мога да ги адресирам със скрипт.
ID me, ID Menu.
Всичко изписвам с малки букви, т.
к.
има значение дали е с големи или с малки.
ID Menu Open.
Не могат да се слагат и разстояния.
ID Work.
Да видим.
Какво се получи!?
Точно както трябва всичко е едно върху друго.
Искам да ги центрирам затова ще сложа още един div.
911 пиксела, което идва от тук.
В края на страницата ще го затворя този div.
Не се получи, както трябва.
Грешката идва от това, че съм объркал номера и съм сложил Width който е по-малък от реалния.
Всъщност съм взел height, вместо width.
Сега ще сложа истинският width.
и вече отиде в центъра.
Ще скрия всички неща, освен менюто, което се показва първо.
Това ще го направя с "display none".
Ще го копирам навсякъде.
"Menu", тук съм го сложил по погрешка.
Ще взема скрипта, който направихме предишния урок.
Копирам всичко.
Ще го сложа след Head.
Сега искам когато някой отиде върху този play елемент, първо да го намеря, Menu Ще го преместя това отгоре, защото логическо то е първо.
Menu 03, ID.
Не може да е със същото име като горното затова ще го кръстя, "menu play".
Тези ще ги премахна.
Сега ще задам едно правило "menu play".
Click.
Или по-скоро, Over.
Това може да го видите към файл, който е прикачен към урока.
Ако искате да го използвате, не е нужно да знаете какво правят всички тези неща.
Бях написал само "over", коeто беше грешка.
"Hover" e правилното.
Сега го записвам да видим какво се получава.
Клик отново.
Всъщност точно това искахме да получим.
Искам да разбера какво е името на елемента "about.
me".
Menu open 07.
Мога да го намеря тук.
Логически това също ще е отгоре.
Ще го наименовам, "mebutton".
на ".
mebutton".
Когато някой го натисне, ще изпълни следното: Това което нарекохме ".
me",
ще влезне в екрана.
Стана перфектно.
Сега ще намерим и "work".
"menuopen 03" Слагам му ID, за да мога да го адресирам от тук.
Пиша абсолютно същия скрипт.
".
workbutton"
"Hover", което означава да се изпълни, когато мишката отиде върху него, да изпълни тази функция.
work fade in Да видим на този етап какво се получи.
Показва се това.
Тук не се показва нищо.
Първо понеже "about me.
" е на слоя отгоре.
В момента мишката, която е преместена, не достига до долния слой за да покажа на скрипта че е върху него.
Затова това меню тук трябва да е най-отгоре.
menu open.
z-index 100.
Да видим какво ще стане.
"about" me и "work".
Оправи се.
Сега менюто е над всичко.
Другият проблем е, че двете неща се застъпват и about me не се скрива.
Затова трябва да отида, отново в скрипта.
и тук където се показва work да изчезва me, т.
e.
ако слагаме fade out.
А където се показва "me" да изчезва "work", ако има такъв.
Нека да видим какво ще се получи.
Начало, mouse over.
Страницата е готова.
За 40 минути успяхме да си направим.
Кретивна страница с интересен дизайн.
Без абсолютно никаква информация, но поне е интересна.
Надявам се този урок да ви е харесал.
Файловете може да ги свалите отляво на видеото.

Въпроси и отговори