Создание отзывчивого дизайна одностраничного сайта
Lynda.com на русском
Оригинальное название: Building a Responsive Single-Page Design
Автор: Ray Villalobos
Продолжительность: 4ч 58м
Дата релиза: 23 сентября, 2014 год
Перевод: голос + субтитры
Научитесь создавать динамический, отзывчивый дизайн одностраничного сайта с помощью HTML, JavaScript и CSS. Продемонстрированный в этом курсе веб-сайт сочетает в себе плавающую навигацию, столбцы, которые подгоняются, не захламляя при этом макет сайта или HTML-разметку, и анимированные эффекты прокрутки, реагирующие на указания пользователя. Автор Рей Виллалобос показывает, как все это реализовать. Он начинает со скудного, легко-читаемого шаблона, а затем объясняет, как с помощью четырех перечисленных ниже фреймворков добавлять функции, которые сделают дизайн одностраничных сайтов настолько искусными:
- Compass, чьи Sass-примеси способствуют запуску таких CSS3 функций, как Flexbox
- Susy 2 – фреймворк, отделяющий математику от отзывчивого сеточного дизайна
- ScrollMagic, используемый для добавления волшебных эффектов прокрутки
- Breakpoint, который позволяет моментально писать медиа-запросы в Sass
Темы курса:
- Предварительный анализ проекта
- Создание базовых стилей
- Создание собственных Sass-примесей
- Кодирование навигации
- Как с помощью сеток сделать навигацию отзывчивой
- Использование разделенного макета
- Создание промежуточной анимации
- Управление сценами с помощью прокрутки
Демо:
Скрытое содержимое.
Складчины по теме