Бесконечная анимированная фоновая картинка для сайта

595
7.8 из 10
Проголосовало: 7






Красивая Бесконечная анимированная фоновая картинка для сайта на CSS3 animation.

Шаг 1. HTML
Что бы реализовать данную анимацию, нам понадобится небольшой контейнер, с вызовом классов, нам понадобится три класса. Для реализации данного фона вам понадобится установить данный вызов анимированной стены в основном документе сайта, после тега <body>

Код

<section class="container">  
  <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;  
  }  
}


само изображение


Готово!

Есть мелкие недочеты в работе этого эффекта, если присмотреться, то видно как начинается постоянный повтор анимации(Слегка дергается). Но я думаю, если поиграться с параметрами, то можно избежать подобного казуса.
Все очень и очень просто, но как всегда эти трюки для IE не понятны!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 5

Вовчик
0
Вовчик написал: Написано 08 Февраля 2016 в 08:30
Комментарий №5
зачем тут демо? Вон видите вверху картинка, так вот она будет растянута на весь экран в окне браузера и будет двигаться постоянно справа налево...

ДабстэпшникZVT
0
ДабстэпшникZVT написал: Написано 06 Февраля 2016 в 14:56
Комментарий №1
Demo бы((((

Вовчик
0
Вовчик написал: Написано 06 Февраля 2016 в 16:08
Комментарий №2
зачем wacko

BLAzER
0
BLAzER написал: Написано 08 Февраля 2016 в 08:01
Комментарий №3
Я тоже за демо

Вовчик
0
Вовчик написал: Написано 08 Февраля 2016 в 08:03
Комментарий №4
а я нет tongue

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2116
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
Вы сами себе пишите?
  • CbIPoK2513 написал:
  • Скрипт хорош, уже подстроил свой сайт под него :3
  • gefest35 написал:
  • Супер)))!пасиб за работу!!!
  • sasha2016tv написал:
  • Хороший скрипт
    Последние темы
    Опрос
    240
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: