Креативная страница "скоро открытие" для сайта на CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Пример 1.

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

Шаг 1. HTML:

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

<div class="sp-container">
 <div class="sp-content">
 <div class="sp-row">
 <span><img src="images/example1/1.png" /></span>
 <span><img src="images/example1/2.png" /></span>
 <span><img src="images/example1/3.png" /></span>
 <span><img src="images/example1/4.png" /></span>
 <span><img src="images/example1/5.png" /></span>
 </div>
 <div class="sp-row sp-side-row">
 <span><img src="images/example1/11.png" /></span>
 <span><img src="images/example1/12.png" /></span>
 </div>
 <div class="sp-row sp-content-row">
 <h1>Coming Soon</h1>
 <h2>Desinger Shoes that you dream of for incredible prices</h2>
 <h1 class="sp-title"><em>Little</em> Blue Shoe</h1>
 </div>
 <div class="sp-row sp-side-row">
 <span><img src="images/example1/13.png" /></span>
 <span><img src="images/example1/14.png" /></span>
 </div>
 <div class="sp-row">
 <span><img src="images/example1/6.png" /></span>
 <span><img src="images/example1/7.png" /></span>
 <span><img src="images/example1/8.png" /></span>
 <span><img src="images/example1/9.png" /></span>
 <span><img src="images/example1/10.png" /></span>
 </div>
 <div class="sp-arrow"></div>
 </div>
 <div class="sp-side">
 <h2>Be the first to know:</h2>
 <div class="sp-input">
 <input type="text" value="Your email"/>
 <a href="index.html">Go</a>
 </div>
 </div>
</div>

</div>

</div>

<h1>Coming Soon</h1>

<h2>Desinger Shoes that you dream of for incredible prices</h2>

<h1 class="sp-title"><em>Little</em> Blue Shoe</h1>

</div>

</div>

</div>

</div>

<h2>Be the first to know:</h2>

</div>

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

Шаг 2. CSS

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

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

Теперь давайте центрируем основной контейнер и зададим контенту абсолютное позиционирование:

.sp-container {
 position: relative;
 width: 1000px;
 height: 600px;
 margin: -40px auto 0 auto;
}
.sp-content {
 position: absolute;
 z-index: 100;
 width: 800px;
 height: 600px;
 left: 0px;
 top: 0px;
 animation: sizeDownMove 0.9s ease-in-out 6s backwards;
 transform: scale(0.6);
 transform-origin: 0% 50%;
}

.sp-container {

position: relative;

width: 1000px;

height: 600px;

margin: -40px auto 0 auto;

}

.sp-content {

position: absolute;

z-index: 100;

width: 800px;

height: 600px;

left: 0px;

top: 0px;

animation: sizeDownMove 0.9s ease-in-out 6s backwards;

transform: scale(0.6);

transform-origin: 0% 50%;

}

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

.sp-arrow {
 background: transparent url(../images/arrow.png) no-repeat top left;
 position: absolute;
 top: 50%;
 margin-top: -77px;
 left: 82%;
 width: 198px;
 height: 155px;
 animation: slideIn 0.6s ease-in-out 6s backwards;
 z-index: 100;
}

.sp-arrow {

background: transparent url(../images/arrow.png) no-repeat top left;

position: absolute;

top: 50%;

margin-top: -77px;

left: 82%;

width: 198px;

height: 155px;

animation: slideIn 0.6s ease-in-out 6s backwards;

z-index: 100;

}

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

.sp-side {
 width: 460px;
 height: 300px;
 position: absolute;
 right: 10px;
 top: 25%;
 animation: slideIn 0.6s ease-in-out 6s backwards;
}

.sp-side {

width: 460px;

height: 300px;

position: absolute;

right: 10px;

top: 25%;

animation: slideIn 0.6s ease-in-out 6s backwards;

}

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

.sp-side h2 {
 font-size: 70px;
 padding: 20px 0px;
 text-align: center;
 color: #fff;
 text-transform: uppercase;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 font-family: 'Unlock', Arial, sans-serif;
}

.sp-side h2 {

font-size: 70px;

padding: 20px 0px;

text-align: center;

color: #fff;

text-transform: uppercase;

text-shadow: 1px 1px 2px rgba(0,0,0,0.2);

font-family: 'Unlock', Arial, sans-serif;

}

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

.sp-input {
 background-color: rgba(255,255,255,0.3);
 height: 30px;
 padding: 20px;
 border-radius: 10px;
 margin: 0 auto;
 width: 260px;
}
.sp-input input[type="text"] {
 width: 210px;
 padding: 6px;
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 4px;
 float: left;
 font-family: 'Cookie', serif;
 font-size: 18px;
}
.sp-input input[type="text"]:focus {
 outline-color: #acdacf;
}
.sp-input a {
 float: left;
 background-color: #418e7b;
 color: #fff;
 width: 30px;
 height: 30px;
 border: none;
 border-radius: 50%;
 margin-left: 5px;
 text-align: center;
 line-height: 30px;
 cursor: pointer;
 font-family: 'Unlock', Arial, sans-serif;
}
.sp-input a:hover {
 background-color: #fff;
 color: #418e7b;
}

.sp-input {

background-color: rgba(255,255,255,0.3);

height: 30px;

padding: 20px;

border-radius: 10px;

margin: 0 auto;

width: 260px;

}

.sp-input input[type="text"] {

width: 210px;

padding: 6px;

background-color: #fff;

border: 1px solid #ddd;

border-radius: 4px;

float: left;

font-family: 'Cookie', serif;

font-size: 18px;

}

.sp-input input[type="text"]:focus {

outline-color: #acdacf;

}

.sp-input a {

float: left;

background-color: #418e7b;

color: #fff;

width: 30px;

height: 30px;

border: none;

border-radius: 50%;

margin-left: 5px;

text-align: center;

line-height: 30px;

cursor: pointer;

font-family: 'Unlock', Arial, sans-serif;

}

.sp-input a:hover {

background-color: #fff;

color: #418e7b;

}

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

.sp-content h1:first-child {
 font-size: 100px;
 text-align: center;
 color: #fff;
 text-transform: uppercase;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 line-height: 80px;
 padding: 30px 0px 20px 0px;
 font-family: 'Unlock', Arial, sans-serif;
 animation:
 fromBack 1.2s ease-in-out 1.5s backwards,
 fadeOut 0.5s linear 4.5s forwards;
}

.sp-content h1:first-child {

font-size: 100px;

text-align: center;

color: #fff;

text-transform: uppercase;

text-shadow: 1px 1px 2px rgba(0,0,0,0.2);

line-height: 80px;

padding: 30px 0px 20px 0px;

font-family: 'Unlock', Arial, sans-serif;

animation:

fromBack 1.2s ease-in-out 1.5s backwards,

fadeOut 0.5s linear 4.5s forwards;

}

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

.sp-content h1.sp-title {
 font-size: 90px;
 line-height: 80px;
 position: absolute;
 top: 50px;
 left: 160px;
 width: 470px;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.3);
 padding-top: 155px;
 height: 305px;
 text-transform: uppercase;
 text-align: center;
 color: #518f7e;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
 font-family: 'Unlock', Arial, sans-serif;
 animation: fadeInColor 1.2s linear 5.2s backwards;
}
.sp-content h1:last-child em {
 font-family: 'Cookie', serif;
 text-transform: none;
}

.sp-content h1.sp-title {

font-size: 90px;

line-height: 80px;

position: absolute;

top: 50px;

left: 160px;

width: 470px;

border-radius: 50%;

background-color: rgba(255, 255, 255, 0.3);

padding-top: 155px;

height: 305px;

text-transform: uppercase;

text-align: center;

color: #518f7e;

text-shadow: 1px 1px 1px rgba(255,255,255,0.9);

font-family: 'Unlock', Arial, sans-serif;

animation: fadeInColor 1.2s linear 5.2s backwards;

}

.sp-content h1:last-child em {

font-family: 'Cookie', serif;

text-transform: none;

}

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

.sp-content h2 {
 font-size: 36px;
 text-align: center;
 color: #518f7e;
 font-family: 'Cookie', serif;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
 opacity: 0;
 animation:
 fromBack 0.6s ease-in-out 2.6s backwards,
 fadeOut 0.5s linear 4.5s backwards;
}

.sp-content h2 {

font-size: 36px;

text-align: center;

color: #518f7e;

font-family: 'Cookie', serif;

text-shadow: 1px 1px 1px rgba(255,255,255,0.9);

opacity: 0;

animation:

fromBack 0.6s ease-in-out 2.6s backwards,

fadeOut 0.5s linear 4.5s backwards;

}

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

.sp-content-row {
 width: 466px;
 height: 300px;
 float: left;
}
.sp-side-row {
 width: 150px;
 float: left;
}
.sp-row img {
 display: block;
 z-index: 1000;
 position: relative;
}

.sp-content-row {

width: 466px;

height: 300px;

float: left;

}

.sp-side-row {

width: 150px;

float: left;

}

.sp-row img {

display: block;

z-index: 1000;

position: relative;

}

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

.sp-row span {
 position: relative;
 float: left;
 margin: 2px;
 z-index: 100;
 transform: scale(1);
 opacity: 0;
 animation:
 fromBack 0.4s linear backwards,
 fadeOut 0.3s linear backwards;
}

.sp-row span {

position: relative;

float: left;

margin: 2px;

z-index: 100;

transform: scale(1);

opacity: 0;

animation:

fromBack 0.4s linear backwards,

fadeOut 0.3s linear backwards;

}

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

.sp-row:nth-child(1) span:nth-child(1) {
 animation-delay: 0s, 5s;
}
.sp-row:nth-child(1) span:nth-child(2) {
 animation-delay: 0.1s, 5.1s;
}
.sp-row:nth-child(1) span:nth-child(3) {
 animation-delay: 0.2s, 5.2s;
}
.sp-row:nth-child(1) span:nth-child(4) {
 animation-delay: 0.3s, 5.3s;
}
.sp-row:nth-child(1) span:nth-child(5) {
 animation-delay: 0.4s, 5.4s;
}
.sp-row:nth-child(4) span:nth-child(1) {
 animation-delay: 0.5s, 5.5s;
}
.sp-row:nth-child(4) span:nth-child(2) {
 animation-delay: 0.6s, 5.6s;
}
.sp-row:nth-child(5) span:nth-child(5) {
 animation-delay: 0.7s, 5.7s;
}
.sp-row:nth-child(5) span:nth-child(4) {
 animation-delay: 0.8s, 5.8s;
}
.sp-row:nth-child(5) span:nth-child(3) {
 animation-delay: 0.9s, 5.9s;
}
.sp-row:nth-child(5) span:nth-child(2) {
 animation-delay: 1s, 6s;
}
.sp-row:nth-child(5) span:nth-child(1) {
 animation-delay: 1.1s, 6.1s;
}
.sp-row:nth-child(2) span:nth-child(2) {
 animation-delay: 1.2s, 6.2s;
}
.sp-row:nth-child(2) span:nth-child(1) {
 animation-delay: 1.3s, 6.3s;
}

.sp-row:nth-child(1) span:nth-child(1) {

animation-delay: 0s, 5s;

}

.sp-row:nth-child(1) span:nth-child(2) {

animation-delay: 0.1s, 5.1s;

}

.sp-row:nth-child(1) span:nth-child(3) {

animation-delay: 0.2s, 5.2s;

}

.sp-row:nth-child(1) span:nth-child(4) {

animation-delay: 0.3s, 5.3s;

}

.sp-row:nth-child(1) span:nth-child(5) {

animation-delay: 0.4s, 5.4s;

}

.sp-row:nth-child(4) span:nth-child(1) {

animation-delay: 0.5s, 5.5s;

}

.sp-row:nth-child(4) span:nth-child(2) {

animation-delay: 0.6s, 5.6s;

}

.sp-row:nth-child(5) span:nth-child(5) {

animation-delay: 0.7s, 5.7s;

}

.sp-row:nth-child(5) span:nth-child(4) {

animation-delay: 0.8s, 5.8s;

}

.sp-row:nth-child(5) span:nth-child(3) {

animation-delay: 0.9s, 5.9s;

}

.sp-row:nth-child(5) span:nth-child(2) {

animation-delay: 1s, 6s;

}

.sp-row:nth-child(5) span:nth-child(1) {

animation-delay: 1.1s, 6.1s;

}

.sp-row:nth-child(2) span:nth-child(2) {

animation-delay: 1.2s, 6.2s;

}

.sp-row:nth-child(2) span:nth-child(1) {

animation-delay: 1.3s, 6.3s;

}

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

.sp-row span:before {
 content: '';
 position: absolute;
 background-color: rgba(255,255,255,0.3);
 width: 100px;
 height: 100px;
 top: 50%;
 left: 50%;
 margin: -50px 0 0 -50px;
 border-radius: 50%;
}

.sp-row span:before {

content: '';

position: absolute;

background-color: rgba(255,255,255,0.3);

width: 100px;

height: 100px;

top: 50%;

left: 50%;

margin: -50px 0 0 -50px;

border-radius: 50%;

}

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

@keyframes fadeOut{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 }
}

@keyframes fadeOut{

0%{

opacity: 1;

}

100%{

opacity: 0;

}

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

@keyframes fadeInColor{
 0%{
 opacity: 0;
 background-color: rgba(255,255,255,0);
 }
 50%{
 opacity: 0.5;
 background-color: rgba(255,255,255,0);
 }
 100%{
 opacity: 1;
 background-color: rgba(255,255,255,0.3);
 }
}

@keyframes fadeInColor{

0%{

opacity: 0;

background-color: rgba(255,255,255,0);

}

50%{

opacity: 0.5;

background-color: rgba(255,255,255,0);

}

100%{

opacity: 1;

background-color: rgba(255,255,255,0.3);

}

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

@keyframes slideIn{
 0%{
 opacity: 0;
 transform: translateX(-200px);
 }
 100%{
 opacity: 1;
 transform: translateX(0px);
 }
}

@keyframes slideIn{

0%{

opacity: 0;

transform: translateX(-200px);

}

100%{

opacity: 1;

transform: translateX(0px);

}

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

@keyframes sizeDownMove{
 0%{
 transform: scale(1);
 left: 100px;
 }
 100%{
 transform: scale(0.6);
 left: 0px;
 }
}

@keyframes sizeDownMove{

0%{

transform: scale(1);

left: 100px;

}

100%{

transform: scale(0.6);

left: 0px;

}

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

@keyframes fromBack{
 0%{
 transform: scale(0);
 opacity: 0;
 }
 100%{
 transform: scale(1);
 opacity: 1;
 }
}

@keyframes fromBack{

0%{

transform: scale(0);

opacity: 0;

}

100%{

transform: scale(1);

opacity: 1;

}

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

Пример 2.

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

Шаг 1. HTML:

<div class="sp-container">
 <div class="sp-content">
 <div class="sp-globe"></div>
 <h2 class="frame-1">It's destroying the planet</h2>
 <h2 class="frame-2">It's mass, mechanized murder</h2>
 <h2 class="frame-3">You can stop it</h2>
 <h2 class="frame-4">Now!</h2>
 <h2 class="frame-5">
 <span>Save the planet.</span>
 <span>Love life.</span>
 <span>Go vegan.</span>
 </h2>
 <a class="sp-circle-link" href="index2.html">Join us!</a>
 </div>
</div>

<h2 class="frame-1">It's destroying the planet</h2>

<h2 class="frame-2">It's mass, mechanized murder</h2>

<span>Save the planet.</span>

<span>Go vegan.</span>

</h2>

</div>

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

Шаг 2. CSS

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

.sp-container h2 {
 position: absolute;
 top: 50%;
 line-height: 100px;
 height: 100px;
 margin-top: -50px;
 font-size: 100px;
 width: 100%;
 text-align: center;
 color: transparent;
 animation: blurFadeInOut 3s ease-in backwards;
}

.sp-container h2 {

position: absolute;

top: 50%;

line-height: 100px;

height: 100px;

margin-top: -50px;

font-size: 100px;

width: 100%;

text-align: center;

color: transparent;

animation: blurFadeInOut 3s ease-in backwards;

}

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

.sp-container h2.frame-1 {
 animation-delay: 0s;
}
.sp-container h2.frame-2 {
 animation-delay: 3s;
}
.sp-container h2.frame-3 {
 animation-delay: 6s;
}
.sp-container h2.frame-4 {
 font-size: 200px;
 animation-delay: 9s;
}

.sp-container h2.frame-1 {

animation-delay: 0s;

}

.sp-container h2.frame-2 {

animation-delay: 3s;

}

.sp-container h2.frame-3 {

animation-delay: 6s;

}

.sp-container h2.frame-4 {

font-size: 200px;

animation-delay: 9s;

}

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

.sp-container h2.frame-5 {
 animation: none;
 color: transparent;
 text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
 animation: blurFadeIn 3s ease-in 12s backwards;
 color: transparent;
 text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {
 animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
 animation-delay: 14s;
}

.sp-container h2.frame-5 {

animation: none;

color: transparent;

text-shadow: 0px 0px 1px #fff;

}

.sp-container h2.frame-5 span {

animation: blurFadeIn 3s ease-in 12s backwards;

color: transparent;

text-shadow: 0px 0px 1px #fff;

}

.sp-container h2.frame-5 span:nth-child(2) {

animation-delay: 13s;

}

.sp-container h2.frame-5 span:nth-child(3) {

animation-delay: 14s;

}

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

.sp-globe {
 position: absolute;
 width: 282px;
 height: 273px;
 left: 50%;
 top: 50%;
 margin: -137px 0 0 -141px;
 background: transparent url(../images/globe.png) no-repeat top left;
 animation: fadeInBack 3.6s linear 14s backwards;
 opacity: 0.3;
 transform: scale(5);
}

.sp-globe {

position: absolute;

width: 282px;

height: 273px;

left: 50%;

top: 50%;

margin: -137px 0 0 -141px;

background: transparent url(../images/globe.png) no-repeat top left;

animation: fadeInBack 3.6s linear 14s backwards;

opacity: 0.3;

transform: scale(5);

}

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

.sp-circle-link {
 position: absolute;
 left: 50%;
 bottom: 100px;
 margin-left: -50px;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height: 100px;
 background: #fff;
 color: #3f1616;
 font-size: 25px;
 border-radius: 50%;
 animation: fadeInRotate 1s linear 16s backwards;
 transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
 background: #85373b;
 color: #fff;
}

.sp-circle-link {

position: absolute;

left: 50%;

bottom: 100px;

margin-left: -50px;

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background: #fff;

color: #3f1616;

font-size: 25px;

border-radius: 50%;

animation: fadeInRotate 1s linear 16s backwards;

transform: scale(1) rotate(0deg);

}

.sp-circle-link:hover {

background: #85373b;

color: #fff;

}

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

@keyframes blurFadeInOut{
 0%{
 opacity: 0;
 text-shadow: 0px 0px 40px #fff;
 transform: scale(1.3);
 }
 20%,75%{
 opacity: 1;
 text-shadow: 0px 0px 1px #fff;
 transform: scale(1);
 }
 100%{
 opacity: 0;
 text-shadow: 0px 0px 50px #fff;
 transform: scale(0);
 }
}

@keyframes blurFadeInOut{

0%{

opacity: 0;

text-shadow: 0px 0px 40px #fff;

transform: scale(1.3);

}

20%,75%{

opacity: 1;

text-shadow: 0px 0px 1px #fff;

transform: scale(1);

}

100%{

opacity: 0;

text-shadow: 0px 0px 50px #fff;

transform: scale(0);

}

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

@keyframes blurFadeIn{
 0%{
 opacity: 0;
 text-shadow: 0px 0px 40px #fff;
 transform: scale(1.3);
 }
 50%{
 opacity: 0.5;
 text-shadow: 0px 0px 10px #fff;
 transform: scale(1.1);
 }
 100%{
 opacity: 1;
 text-shadow: 0px 0px 1px #fff;
 transform: scale(1);
 }
}

@keyframes blurFadeIn{

0%{

opacity: 0;

text-shadow: 0px 0px 40px #fff;

transform: scale(1.3);

}

50%{

opacity: 0.5;

text-shadow: 0px 0px 10px #fff;

transform: scale(1.1);

}

100%{

opacity: 1;

text-shadow: 0px 0px 1px #fff;

transform: scale(1);

}

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

@keyframes fadeInBack{
 0%{
 opacity: 0;
 transform: scale(0);
 }
 50%{
 opacity: 0.4;
 transform: scale(2);
 }
 100%{
 opacity: 0.2;
 transform: scale(5);
 }
}

@keyframes fadeInBack{

0%{

opacity: 0;

transform: scale(0);

}

50%{

opacity: 0.4;

transform: scale(2);

}

100%{

opacity: 0.2;

transform: scale(5);

}

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

@keyframes fadeInRotate{
 0%{
 opacity: 0;
 transform: scale(0) rotate(360deg);
 }
 100%{
 opacity: 1;
 transform: scale(1) rotate(0deg);
 }
}

@keyframes fadeInRotate{

0%{

opacity: 0;

transform: scale(0) rotate(360deg);

}

100%{

opacity: 1;

transform: scale(1) rotate(0deg);

}

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

Пример 3.

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

Шаг 1. HTML:

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

<div class="sp-container">
 <div class="sp-content">
 <div class="sp-wrap sp-left">
 <h2>
 <span class="sp-top">What if you wouldn't get</span>
 <span class="sp-mid">spam</span>
 <span class="sp-bottom">anymore?</span>
 </h2>
 </div>
 <div class="sp-wrap sp-right">
 <h2>
 <span class="sp-top">Wouldn't that be absolutely</span>
 <span class="sp-mid">great<i>!</i><i>?</i></span>
 <span class="sp-bottom">Yeah, it would!</span>
 </h2>
 </div>
 </div>
 <div class="sp-full">
 <h2>A great way to get rid of spam!</h2>
 <a href="index3.html">Sign up now!</a>
 </div>
</div>

<h2>

<span class="sp-top">What if you wouldn't get</span>

<span class="sp-bottom">anymore?</span>

</h2>

</div>

<h2>

<span class="sp-top">Wouldn't that be absolutely</span>

<span class="sp-mid">great<i>!</i><i>?</i></span>

<span class="sp-bottom">Yeah, it would!</span>

</h2>

</div>

<h2>A great way to get rid of spam!</h2>

</div>

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

Шаг 2. CSS

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

.sp-container {
 width: 900px;
 height: 400px;
 position: relative;
 margin: 80px auto 0px auto;
}
.sp-content {
 width: 100%;
 height: 400px;
 position: relative;
 animation:
 open 0.4s linear forwards,
 squeeze 0.6s linear 5.5s forwards;
}

.sp-container {

width: 900px;

height: 400px;

position: relative;

margin: 80px auto 0px auto;

}

.sp-content {

width: 100%;

height: 400px;

position: relative;

animation:

open 0.4s linear forwards,

squeeze 0.6s linear 5.5s forwards;

}

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

.sp-content:after {
 content: '';
 width: 4px;
 background: #000;
 height: 100%;
 position: absolute;
 left: 50%;
}

.sp-content:after {

content: '';

width: 4px;

background: #000;

height: 100%;

position: absolute;

left: 50%;

}

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

.sp-wrap {
 width: 400px;
 padding: 0px 25px;
 height: 100%;
 text-align: right;
 font-size: 70px;
 line-height: 80px;
 float: left;
 position: relative;
 background: #ffdd00;
 overflow: hidden;
}

.sp-wrap {

width: 400px;

padding: 0px 25px;

height: 100%;

text-align: right;

font-size: 70px;

line-height: 80px;

float: left;

position: relative;

background: #ffdd00;

overflow: hidden;

}

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

.sp-container h2 {
 color: #000;
 text-shadow: 0px 0px 1px rgba(0,0,0,0.9);
}
.sp-wrap span {
 display: block;
 background: #ffdd00;
 opacity: 0;
}
.sp-wrap span.sp-mid {
 opacity: 1;
}
.sp-container .sp-right h2 {
 color: #fff;
 text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
}
.sp-wrap span.sp-mid {
 font-family: 'MisoBold';
 text-transform: uppercase;
 font-size: 160px;
 line-height: 130px;
 position: relative;
}

.sp-container h2 {

color: #000;

text-shadow: 0px 0px 1px rgba(0,0,0,0.9);

}

.sp-wrap span {

display: block;

background: #ffdd00;

opacity: 0;

}

.sp-wrap span.sp-mid {

opacity: 1;

}

.sp-container .sp-right h2 {

color: #fff;

text-shadow: 0px 0px 1px rgba(255,255,255,0.9);

}

.sp-wrap span.sp-mid {

font-family: 'MisoBold';

text-transform: uppercase;

font-size: 160px;

line-height: 130px;

position: relative;

}

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

.sp-left span.sp-top {
 animation:
 slideLeft 0.5s ease-in 0.6s backwards,
 fadeOut 1s linear 4s backwards;
}
.sp-left span.sp-mid {
 animation:
 slideLeft 0.5s ease-in 1s backwards,
 moveUp 0.6s linear 5s forwards;
}
.sp-left span.sp-bottom {
 animation:
 slideLeft 0.5s ease-in 1.4s backwards,
 fadeOut 1s linear 4.2s backwards;
}

.sp-left span.sp-top {

animation:

slideLeft 0.5s ease-in 0.6s backwards,

fadeOut 1s linear 4s backwards;

}

.sp-left span.sp-mid {

animation:

slideLeft 0.5s ease-in 1s backwards,

moveUp 0.6s linear 5s forwards;

}

.sp-left span.sp-bottom {

animation:

slideLeft 0.5s ease-in 1.4s backwards,

fadeOut 1s linear 4.2s backwards;

}

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

.sp-right span {
 text-align: left;
}
.sp-right span.sp-top {
 animation:
 slideRight 0.5s ease-in 2s backwards,
 fadeOut 1s linear 4.4s backwards;
}
.sp-right span.sp-mid {
 animation:
 slideRight 0.5s ease-in 2.4s backwards,
 moveUp 0.6s linear 5s forwards;
}
.sp-right span.sp-bottom {
 animation:
 slideRight 0.5s ease-in 3.2s backwards,
 fadeOut 1s linear 4.6s backwards;
}

.sp-right span {

text-align: left;

}

.sp-right span.sp-top {

animation:

slideRight 0.5s ease-in 2s backwards,

fadeOut 1s linear 4.4s backwards;

}

.sp-right span.sp-mid {

animation:

slideRight 0.5s ease-in 2.4s backwards,

moveUp 0.6s linear 5s forwards;

}

.sp-right span.sp-bottom {

animation:

slideRight 0.5s ease-in 3.2s backwards,

fadeOut 1s linear 4.6s backwards;

}

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

.sp-wrap i {
 position: absolute;
 background: #ffdd00;
 width: 60px;
}
.sp-wrap i:first-child {
 color: #000;
}
.sp-wrap i:last-child {
 opacity: 0;
 animation: fadeOut 1s linear 6s backwards;
}

.sp-wrap i {

position: absolute;

background: #ffdd00;

width: 60px;

}

.sp-wrap i:first-child {

color: #000;

}

.sp-wrap i:last-child {

opacity: 0;

animation: fadeOut 1s linear 6s backwards;

}

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

.sp-full {
 position: absolute;
 font-size: 67px;
 top: 142px;
 width: 700px;
 left: 145px;
 animation: fadeIn 1s linear 6.6s backwards;
}
.sp-full a {
 background: #000;
 color: #fff;
 border-radius: 4px;
 padding: 10px 40px;
 display: inline-block;
 font-size: 40px;
 margin-top: 40px;
 animation: zoomIn 0.7s ease-in-out 7s backwards;
}
.sp-full h2 {
 width: 400px;
 padding: 0px 50px 0px 0px;
 float: left;
 text-align: right;
}
.sp-full a:hover {
 opacity: 0.8;
}

.sp-full {

position: absolute;

font-size: 67px;

top: 142px;

width: 700px;

left: 145px;

animation: fadeIn 1s linear 6.6s backwards;

}

.sp-full a {

background: #000;

color: #fff;

border-radius: 4px;

padding: 10px 40px;

display: inline-block;

font-size: 40px;

margin-top: 40px;

animation: zoomIn 0.7s ease-in-out 7s backwards;

}

.sp-full h2 {

width: 400px;

padding: 0px 50px 0px 0px;

float: left;

text-align: right;

}

.sp-full a:hover {

opacity: 0.8;

}

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

@keyframes open{
 0%{
 transform: scale(1,0);
 }
 100%{
 transform: scale(1,1);
 }
}

@keyframes open{

0%{

transform: scale(1,0);

}

100%{

transform: scale(1,1);

}

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

@keyframes squeeze{
 0%{
 height: 400px;
 }
 100%{
 height: 120px;
 }
}

@keyframes squeeze{

0%{

height: 400px;

}

100%{

height: 120px;

}

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

@keyframes fadeOut{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 }
}
@keyframes fadeIn{
 0%{
 opacity: 0;
 }
 100%{
 opacity: 1;
 }
}

@keyframes fadeOut{

0%{

opacity: 1;

}

100%{

opacity: 0;

}

@keyframes fadeIn{

0%{

opacity: 0;

}

100%{

opacity: 1;

}

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

@keyframes slideLeft{
 0%{
 transform: translateX(120%);
 }
 100%{
 transform: translateX(0%);
 }
}
@keyframes slideRight{
 0%{
 transform: translateX(-120%);
 }
 100%{
 transform: translateX(0%);
 }
}

@keyframes slideLeft{

0%{

transform: translateX(120%);

}

100%{

transform: translateX(0%);

}

@keyframes slideRight{

0%{

transform: translateX(-120%);

}

100%{

transform: translateX(0%);

}

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

@keyframes moveUp{
 0%{
 transform: translateY(0px);
 }
 100%{
 transform: translateY(-170px);
 }
}

@keyframes moveUp{

0%{

transform: translateY(0px);

}

100%{

transform: translateY(-170px);

}

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

@keyframes zoomIn{
 0%{
 transform: scale(0);
 }
 100%{
 transform: scale(1);
 }
}

@keyframes zoomIn{

0%{

transform: scale(0);

}

100%{

transform: scale(1);

}

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

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

Креативная страница «скоро открытие» на CSS3

Пример 1.

Шаг 1. HTML:

Шаг 2. CSS

Пример 2.

Шаг 1. HTML:

Шаг 2. CSS

Пример 3.

Шаг 1. HTML:

Шаг 2. CSS

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

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

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Креативная страница «скоро открытие» на CSS3

Пример 1.

Шаг 1. HTML:

Шаг 2. CSS

Пример 2.

Шаг 1. HTML:

Шаг 2. CSS

Пример 3.

Шаг 1. HTML:

Шаг 2. CSS

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

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

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи