В этом уроке мы рассмотрим создание красивого сайта с анимацией заголовка при скролле. Я покажу, как происходит создание таких крутых сайтов и на реальном прмере подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация анимации заголовка на сайте посредством CSS transition.
Материалы урока и готовый результат: Скачать
Рекомендуемые уроки и инструменты
- Редактор VS Code для верстки: Ознакомиться с уроком
- Документация Swiper: Изучить
- Пипетка Instant Eyedropper: Скачать
- Справочник EMMET (сокращения): Ознакомиться с уроком
Таблица начертаний (Шрифты)
100 - Thin (Hairline) 200 - Extra Light (Ultra Light) 300 - Light 400 - Regular (Normal) 500 - Medium 600 - Semi Bold (Demi Bold) 700 - Bold 800 - Extra Bold (Ultra Bold) 900 - Black (Heavy)
Стартовая HTML разметка
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Премиум уроки от WebDesign Master
Другие уроки по теме «Верстка»
- Создание сайта с красивой анимацией фона | Материалы урока
- Создание красивого сайта с 3D эффектом при скролле | Материалы урока
- Создание красивого сайта с 3D анимацией волны | Материалы урока
- Создание красивого сайта с 3D эффектом Parallax | Материалы урока
- Создание сайта с крутой анимацией скролла (GSAP) | Материалы урока