Пушистые белые облака летящие по голубому небу. Эффект параллакс (изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя) достигается с помощью разной скорости движения и непрозрачности облака.
У нас будет анимированный фон с 5 облаками, движущимися по экрану.
Шаги:
1. Создать облака.
2. Анимировать их перемещения по экрану.
3. Стилизация облаков.
CSS:
Само собой, ни облака, ни анимация в виде движения облаков не будут работать в IE, будет вот такая ерунда:
У нас будет анимированный фон с 5 облаками, движущимися по экрану.
Шаги:
1. Создать облака.
2. Анимировать их перемещения по экрану.
3. Стилизация облаков.
Код: Выделить всё
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
Код: Выделить всё
/* Начнём с формирования облаков */
/* Контейнером будет служить небо */
*{ margin: 0; padding: 0;}
body {
/* Чтобы скрыть появление горизонтальной прокрутки во время анимации */
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/* Облака */
.cloud {
width: 200px;
height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
/* Время для анимации */
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/* Скорость, прозрачность и положение облаков для придания реалистичного эффекта */
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /* непрозрачность пропорциональна размеру */
/* Скорость также будет пропорциональна размеру и прозрачности */
/*Увеличение скорости. Уменьшение времени в 's' = секундах */
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /* непрозрачность пропорциональна размеру */
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /* непрозрачность пропорциональна размеру */
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /* непрозрачность пропорциональна размеру */
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
@-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
Комментарии: 3
- Bukovka_
- Сообщения: 165
- Зарегистрирован: 05 мар 2009, 13:01
- Пол: Жен
- Откуда: Киев
Я когда-то прикручивала похожий скрипт на один из стилей форума. Правда мне так и не удалось побороть облака, чтобы они летели куда мне надо. Так и продолжают бегать как им вздумается. http://trindelka.in.ua/index.php?style=30
Надо будет попробовать ваш вариант.
Надо будет попробовать ваш вариант.