Попалась мне на глаза очень интересная модификация, позволяющая создать плывущие по небу облака.
Реализация довольно простая, структура представляет собой четыре блока:
К каждому блоку с помощью стилей присвоено своё изображение, часть облаков:
и с помощью css анимации приведены в движение:
Итоговый результат для простой страницы выглядит так
Чтобы прикрутить данную модификацию к форуму нужно отредактировать хедер, находим в нём:
добавляем к нему новый класс и новые элементы:
Добавляем приведённые выше стили, плюс добавляем к ним:
Файлы
Реализация довольно простая, структура представляет собой четыре блока:
Код: Выделить всё
<div class="sky">
<div class="moon"></div>
<div class="clouds_one"></div>
<div class="clouds_two"></div>
<div class="clouds_three"></div>
</div>
Код: Выделить всё
.sky {
height: 480px;
background: #007fd5;
position: relative;
overflow-x: hidden;
-webkit-animation: sky_background 50s ease-out infinite;
-moz-animation: sky_background 50s ease-out infinite;
-o-animation: sky_background 50s ease-out infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.moon {
background: url("images/moon.png");
position: absolute;
left: 0;
height: 100%;
width: 300%;
-webkit-animation: moon 50s linear infinite;
-moz-animation: moon 50s linear infinite;
-o-animation: moon 50s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_one {
background: url("images/cloud_one.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_one 50s linear infinite;
-moz-animation: cloud_one 50s linear infinite;
-o-animation: cloud_one 50s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_two {
background: url("images/cloud_two.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_two 75s linear infinite;
-moz-animation: cloud_two 75s linear infinite;
-o-animation: cloud_two 75s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_three {
background: url("images/cloud_three.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_three 100s linear infinite;
-moz-animation: cloud_three 100s linear infinite;
-o-animation: cloud_three 100s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
Код: Выделить всё
@-webkit-keyframes sky_background {
0% {
background: #007fd5;
color: #007fd5;
}
50% {
background: #000;
color: #a3d9ff;
}
100% {
background: #007fd5;
color: #007fd5;
}
}
@-webkit-keyframes moon {
0% {
opacity: 0;
left: -200% -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left: 0% bottom: 250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom: 500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes cloud_one {
0% {
left: 0;
}
100% {
left: -200%;
}
}
@-webkit-keyframes cloud_two {
0% {
left: 0;
}
100% {
left: -200%;
}
}
@-webkit-keyframes cloud_three {
0% {
left: 0;
}
100% {
left: -200%;
}
}
@-moz-keyframes sky_background {
0% {
background: #007fd5;
color: #007fd5;
}
50% {
background: #000;
color: #a3d9ff;
}
100% {
background: #007fd5;
color: #007fd5;
}
}
@-moz-keyframes moon {
0% {
opacity: 0;
left: -200% -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left: 0% bottom: 250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom: 500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-moz-keyframes cloud_one {
0% {
left: 0;
}
100% {
left: -200%;
}
}
@-moz-keyframes cloud_two {
0% {
left: 0;
}
100% {
left: -200%;
}
}
@-moz-keyframes cloud_three {
0% {
left: 0;
}
100% {
left: -200%;
}
}
Чтобы прикрутить данную модификацию к форуму нужно отредактировать хедер, находим в нём:
Код: Выделить всё
<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">
Код: Выделить всё
<body id="phpbb" class="sky nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">
<div class="moon"></div>
<div class="clouds_one"></div>
<div class="clouds_two"></div>
<div class="clouds_three"></div>
Код: Выделить всё
html {
background-color: transparent;
}
body {
background: #007fd5;
}
#wrap {
position: relative;
}
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.