Технология CSS3 открыла нам бесчисленные возможности, и сегодня мы хотим представить вам руководство по разработке привлекательных страниц, предназначенных для оповещения посетителей о скором открытии веб-сайта, а также о создании заставок на сайт, реализованных посредством анимации в CSS3. Разрабатывая сайт необходимо создать красивую заглушку, чтобы пользователи могли подписаться на новости когда откроется сайт. В данном уроке мы рассмотрим как это креативно осуществить, не затрачивая при этом особых усилий.

Дабы сократить объемы руководства, мы опустили использование CSS-префиксов производителей браузеров, но они прописаны в файле, который вы можете скачать с этой страницы. Итак, приступим!

Пример 1.

В первом примере у нас есть несколько элементов. Шаблон данного примера будет выполнять задачу страницы-оповещения о скором открытии ресурса.

Шаг 1. HTML:

Здесь у нас есть основной контейнер с областью контента. Внутри него мы расположим несколько ячеек для миниатюр.

У нас также есть ячейка контента, предназначенная для основных заголовков. После того, как будет отображена основная область с контентом, на страницу «подъедет» сторонний элемент, содержащий форму ввода адреса электронной почты.

Шаг 2. CSS

Основная идея данного примера заключается в следующем цикле анимации:

  • Миниатюры появляются при помощи fromBack.
  • Первый H1 появляется при помощи fromBack.
  • Подзаголовок H2 появляется при помощи fromBack.
  • Первый H1 и подзаголовок H2 исчезают при помощи fadeOut.
  • Миниатюры начинают последовательно исчезать посредством fadeOut и второй H1 появляется при помощи fadeInColor. Также, контент двигается в левую сторону и немного уменьшается посредством sizeDownMove.
  • Стрелка и сторонний контент выезжают с левой стороны посредством slideIn.
Теперь давайте центрируем основной контейнер и зададим контенту абсолютное позиционирование:

Как видно, мы применяем ту анимацию к контенту, которая сдвигает его и уменьшает, но лишь по истечении 6 секунд. Мы вернемся к данной анимации позже. Стрелка также будет позиционирована абсолютно, и к ней будет задано фоновое изображение:

Сторонний элемент будет содержать поле ввода e-mail, и мы разместим его в правой части экрана:

Стрелка и сторонний элемент будет выезжать, но мы вернемся к этому позже. Теперь давайте оформим заголовок:

…а также оболочку для формы ввода и кнопки:

Теперь давайте обратимся к наполнению основной области контента. Для начала мы оформим заголовок, которому будет задана анимация, за счет которой он будет появляться сзади, а затем исчезать:

Второй заголовок будет появляться чуть позже, после того как первый исчезнет:

Подзаголовок, как и первый H1, будет появляться, а затем исчезать:

Теперь давайте оформим ячейки для миниатюр:

Каждый из span’ов для миниатюр буде также появляться за счет увеличения в размере от значения 0 до 1, что создаст впечатление, будто они «приезжают» изнутри экрана. Далее нам нужно, чтобы они исчезли:

Нам нужно создать цикл, где каждая последующая миниатюра появляется и исчезает с задержкой. Мы берем каждую ячейку, и указываем задержку для каждого дочернего span-элемента. Учтите, что 4-я ячейка находится в правой части страницы, так что мы можем следовать ходу часовой стрелки:

Давайте сделаем небольшой псевдо элемент с окружностью на фоне для украшения миниатюр:

Теперь давайте перейдем к анимации. Первая анимация просто отвечает за исчезновение элемента, и регулируется за счет значений уровня плотности отображения от 1 до 0:

fadeInColor будет отвечать за появление элемента, и позволит нам задавать параметр цвета и прозрачности RGBa. Но уровень плотности отображения RGBa будет достигать лишь 0, когда уровень плотности отображения самого элемента будет достигать отметки в 0,5. Это позволит нам отобразить сначала контент, а затем «явить» фон. Перейдем ко второму заголовку:

Следующая анимация отвечает за скольжение элемента из левой части экрана:

sizeDownMove уменьшит элемент и сместит его с позиции left 100px к left 0px. Здесь мы также можем применить translate, но, так как наш элемент позиционирован абсолютно, мы можем «играть» лишь по левой стороне:

Следующая анимация отвечает за появление элемента из внутренней части видимой области за счет изменения значения с 0 до 1. Уровень плотности отображения также меняется с 0 на 1:

И на этом мы завершили всю анимацию в первом примере! Теперь давайте перейдем к следующим интересным примерам. Они будут полегче!

Пример 2.

В данном примере мы просто отобразим предложения одно за другим, которые будут оформлены красивым эффектом размытия. Здесь у нас снова будет контейнер и div с контентом, в котором будет размещено несколько кадров – каждый для отдельного предложения. Вдобавок у нас будет глобус и ссылка, которые появятся лишь в самом конце:

Шаг 1. HTML:

Давайте перейдем к стилизации.

Шаг 2. CSS

Каждый заголовок будет центрирован, и все они будут сменяться один за другим посредством анимации blurFadeInOut:

Давайте укажем задержку для каждого заголовка:

У последнего кадра не будет анимации, но вместо этого мы анимируем span-элементы:

Элемент с глобусом будет позиционирован абсолютно, и ему будет задано фоновое изображение. Он появится после по истечении 14 секунд с момента завершения остальной анимации. Размеры его будут такими, чтобы она занял всю область контента:

Ссылка «join us» («присоединяйтесь») будет реализована в виде окружности, которая, вращаясь, появится:

Первая анимация предназначена для всех заголовков, которые должны появиться и исчезнуть. Мы имитируем эффект размытия за счет параметров text-shadow и scale:

Следующая анимация почти такая же, только нам не нужно, чтобы текст исчезал (это нужно для последнего заголовка, который остается):

Глобусу будет задана та же анимация, которая масштабирует элемент, и сначала повышает, а затем понижает уровень плотности отображения:

Следующая анимация нужна для ссылки. Она сделает так, что ссылка появится, при этом вращаясь:

Теперь перейдем к последнему эффекту, но не менее интересному.

Пример 3.

В третьем примере мы поэкспериментируем с передвижением текста для предложения продукции или приложения. В конце анимации посетители будут наблюдать элемент, призывающий к действию.

Шаг 1. HTML:

Здесь у нас снова имеется 2 контейнера, и 2 оболочки. Наша цель – разделить область и обыграть тексты обеих сторон:

Давайте перейдем к стилизации.

Шаг 2. CSS

Сначала нам нужно анимировать область контента, в которой есть псевдо элемент, представляющий собой линию в середине. Затем то же самое происходит и с правой стороны, только текст должен выдвигаться от левой стороны. Span’ы с классом «sp-mid» будут иметь увеличенный размер шрифта, и это именно те элементы, которые должны остаться, когда остальные элементы исчезнут.
У контейнера будет фиксированная ширина и высота, а оболочка контента сначала появится в сопровождении заданной анимации, а затем уменьшится в размере за счет применения сжатия. Последнее действие будет реализовано только после того, как исчезнут остальные тексты – отсюда и получается длительная задержка анимации:

Линия в середине будет создана за счет псевдо элемента:

Оболочки заголовков не будут отображать то, что окажется лишним, поэтому мы можем быть уверенными в том, что при скольжении не случится какого-либо наложения:

Элементы H2 со span’ами внутри будут оформлены следующими стилями:

«sp-top» и «sp-bottom» будут скользить из правой части, а затем исчезать, а «sp-mid» будет скользить вверх вместо того чтобы исчезнуть:

В правой части будет происходить то же самое, только в зеркальном порядке:

Знак вопроса будет расположен поверх восклицательного знака, и когда мы сдвинем два центральных span’а вверх, вопросительный знак исчезнет, оставив после себя восклицательный:

Появляющийся в самом конце текст будет обрамлен в оболочку sp-full, и мы сделаем так, чтобы он постепенно появлялся и «увеличивал» ссылку на подписку:

Первая анимация отвечает за «открытие» области контента. Это можно реализовать за счет увеличения её высоты:

Анимация сжатия (squeeze) на самом деле ничего не сжимает, так как здесь мы не используем параметр масштабирования. Нам это не нужно, так как в момент применения данного эффекта у нас все еще есть немного текста внутри области контента. Так что, мы просто уменьшим его высоту:

Следующие две анимации отвечают за появление и исчезновение элементов:

slideLeft и slideRight перемещают элементы с одного места на другое:

И moveUP перемещает элемент вверх:

Последняя анимация просто «увеличивает» элемент за счет масштабирования от 0 до 1:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: