Бесконечная анимированная фоновая картинка для сайта
Шаг 1. HTML
Что бы реализовать данную анимацию, нам понадобится небольшой контейнер, с вызовом классов, нам понадобится три класса. Для реализации данного фона вам понадобится установить данный вызов анимированной стены в основном документе сайта, после тега body.
Разметка достаточно простая, и детальней на ней останавливаться не будем, давайте перейдем к следующему шагу.
Шаг 2. CSS
У нас есть одно изображение, мы установим угол наклона изображений по оси X и Y, для анимации мы установим параметр анимации infinity(который будет означать бесконечную анимацию) с циклом в 20s:
Готово!
Есть мелкие недочеты в работе этого эффекта, если присмотреться, то видно как начинается постоянный повтор анимации(Слегка дергается). Но я думаю, если поиграться с параметрами, то можно избежать подобного казуса.
Все очень и очень просто, но как всегда эти трюки для IE не понятны!
Что бы реализовать данную анимацию, нам понадобится небольшой контейнер, с вызовом классов, нам понадобится три класса. Для реализации данного фона вам понадобится установить данный вызов анимированной стены в основном документе сайта, после тега body.
Код
<section class="container">
<div class="wrap">
<div class="pattern"></div>
</div>
</section>
<div class="wrap">
<div class="pattern"></div>
</div>
</section>
Разметка достаточно простая, и детальней на ней останавливаться не будем, давайте перейдем к следующему шагу.
Шаг 2. CSS
У нас есть одно изображение, мы установим угол наклона изображений по оси X и Y, для анимации мы установим параметр анимации infinity(который будет означать бесконечную анимацию) с циклом в 20s:
Код
.container {
background: #222;
height: 100%;
margin: 0 auto;
overflow: hidden;
perspective: 1200px;
}
.container:after {
box-shadow: inset 5px 5px 80px rgba(0,0,0,.8);
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.wrap {
position: absolute;
top: -60%;
left: -10%;
height: 300%;
width: 200%;
transform: rotateX(20deg) rotateY(40deg) rotateZ(-20deg);
z-index: 5;
}
.pattern {
background-size: 500px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400%;
animation: scroll linear 20s infinite;
}
.pattern {
background-image: url('img/g.gif');
}
@keyframes scroll {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-4000px, 0, 0);
}
}
.credit {
color: #fff;
font: 12px/12px sans-serif;
position: absolute;
text-align: center;
bottom: 10px;
width: 100%;
text-shadow: 1px 1px 2px rgba(0,0,0,.3);
a {
color: #eee;
text-decoration: none;
}
}
background: #222;
height: 100%;
margin: 0 auto;
overflow: hidden;
perspective: 1200px;
}
.container:after {
box-shadow: inset 5px 5px 80px rgba(0,0,0,.8);
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.wrap {
position: absolute;
top: -60%;
left: -10%;
height: 300%;
width: 200%;
transform: rotateX(20deg) rotateY(40deg) rotateZ(-20deg);
z-index: 5;
}
.pattern {
background-size: 500px;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400%;
animation: scroll linear 20s infinite;
}
.pattern {
background-image: url('img/g.gif');
}
@keyframes scroll {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-4000px, 0, 0);
}
}
.credit {
color: #fff;
font: 12px/12px sans-serif;
position: absolute;
text-align: center;
bottom: 10px;
width: 100%;
text-shadow: 1px 1px 2px rgba(0,0,0,.3);
a {
color: #eee;
text-decoration: none;
}
}
Готово!
Есть мелкие недочеты в работе этого эффекта, если присмотреться, то видно как начинается постоянный повтор анимации(Слегка дергается). Но я думаю, если поиграться с параметрами, то можно избежать подобного казуса.
Все очень и очень просто, но как всегда эти трюки для IE не понятны!
-
FalleN -
2211 -
1 -
254
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...