Анимирано превъртане на страницата

Здравейте. В този урок ще създадем малък сайт, който превърта надолу до всеки раздел, когато се щракне върху съответния навигационен елемент в менюто.

превъртане
страницата

Изрязване на изображения от подготвения PSD файл.

Преди да започнете, създайте нова папка, наречена "template". В папката "template" създайте още две папки, наречени "img" и "files".

След това разопаковайте подготвения PSD файл от архива и го отворете във Photoshop. PSD трябва да изглежда така:

страницата

Подготвен PSD файл

Трябва да изрежем 3 изображения от PSD файла, които ще бъдат използвани за подготовка на демонстрацията. Всички други операции ще се извършват с CSS. 3-те изображения са фон, заглавка и разделител на графични секции.

Използвайки инструмента за правоъгълна селекция, изберете всеки елемент и го запазете в папката "img". Всяко изображение трябва да има прозрачен фон и съответно име "bg.gif", "title.png" и "top.png".

анимирано

Създаване на HTML маркиране

В HTML файла започнете да правите маркиране, което изглежда така:

Нека разгледаме подробно маркировката.

DIV Top е контейнер, който съдържа всички елементи на шаблона. Когато се щракне върху етикета „Връщане към началната страница“, който се намира под всяка секция, анимацията превърта страницата до началото на този контейнер.

DIV Title е просто div таг, който съдържа изображението на заглавието на страницата.

DIV навигация – Този div етикет съдържа цялата навигация на страницата.

DIV Начална страница, Относно, Галерия, Портфолио и Контакт - Тези div тагове представляват всички секции, до които анимацията превърта страницата, когато се щракне върху съответния елемент за навигация.

Клас Топ - класлогически разделя разделите един от друг и съдържа графичен разделител и връзка „Връщане към началната страница“.

превъртане

Добавяне на нашите елементи.

Поставете изображението си title.png в div тага „Title“.

Във всяка секция „Начална страница, Информация, Галерия, Портфолио и Контакти“ вмъкнете етикет H1, който съдържа заглавието на секцията. Освен това във всеки H1 таг добавете описание на секцията, която се поставя в класа span.

В класовете „Топ“ добавете P тагове, които съдържат фразата „Назад към основната секция“ и добавете връзка към горната част на страницата. Не забравяйте да добавите класа "Scroll" към връзката, jQuery няма да работи без него.

Добавете CSS

CSS файлът style.css за всички наши елементи изглежда така:

Добавяне на jQuery

Изтеглете най-новата версия на библиотеката jQuery от уебсайта на jQuery, запазете я в папката "files".

След това трябва да създадете текстов файл в папката "files" и да го кръстите "Scroll.JS". Във файла "Scroll.JS" трябва да напишете следния код:

След това отворете вашия HTML файл в браузър и проверете как работи всичко.

Надявам се, че урокът ви е харесал.

Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: www.hv-designs.co.uk Превод: Сергей Фастунов Урокът е създаден: 12 юни 2010 г. Преглеждания: 45779 Правила за препечатване

5 последни урока от категорията "CSS"

Забавни ефекти за букви

Малък ефект с интерактивна анимация на букви.

Изпълнение на забавни съвети

Малка концепция от забавни съвети, които са внедрени в SVG и anime.js. В допълнение към специален стил, примерът реализира анимация и трансформация на графични обекти.

Анимирани букви

Експеримент: анимирани SVG букви, базирани на библиотекатаanime.js

POV слънчеви очила

Страхотен експеримент на уеб страница, която се показва „от първо лице“ през слънчеви очила.

Навигация в падащо меню

Експериментален навигационен скрипт за падащо меню.