Анімована прокрутка сторінки

Вітаю. У цьому уроці ми створимо невеликий сайт, який прокручується до кожної секції, коли в меню натискають відповідний навігаційний елемент.

сторінки
прокрутка

Нарізка зображень із підготовленого PSD файлу.

Перш ніж розпочати, створіть нову папку під назвою "template". У папці "template" створіть ще дві папки під назвою "img" та "files".

Потім розпакуйте з архіву підготовлений файл PSD і відкрийте його у Photoshop. PSD повинен виглядати так:

прокрутка

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

Нам потрібно нарізати 3 зображення з файлу PSD, які будуть використовуватися для підготовки демонстрації. Всі інші операції будуть зроблені за допомогою CSS. З зображення – це фон, заголовок та графічний роздільник секцій.

За допомогою інструмента прямокутного виділення виділіть кожен елемент та збережіть його в папці "img". Кожному зображенню треба задати прозоре тло і назвати їх відповідно "bg.gif", "title.png" і "top.png".

прокрутка

Створення HTML розмітки

У HTML файлі почніть робити розмітку, яка виглядає так:

Розглянемо детальну розмітку.

DIV Top - контейнер, який містить усі елементи шаблону. Коли відбувається натискання на напис "Повернутися на головну", розташованого під кожною секцією, анімація прокручує сторінку вгору до початку цього контейнера.

DIV Title - це просто div тег, який містить зображення назви сторінки.

DIV Navigation - в цьому div тезі розміщена вся навігація по сторінці.

DIV Homepage, About, Gallery, Portfolio та Contact - ці теги div представляють усі секції, до яких анімація прокручує сторінку при натисканні відповідного елемента навігації.

Class Top - класлогічно відокремлює секції один від одного і містить графічний роздільник та посилання "Повернутися на головну".

прокрутка

Додаємо наші елементи.

Вставте ваше зображення title.png у тег div "Title".

У кожній секції Homepage, About, Gallery, Portfolio та Contact вставте тег Н1, який містить заголовок секції. Також до кожного тега Н1 додайте опис секції, який розміщений у класі span.

У класах "Top" додайте теги 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.

Сонцезахисні окуляри від першої особи

Прикольний експеримент веб-сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.

Навігація, що розкривається

Експериментальний скрипт навігації, що розкривається.