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


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

475
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    404
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 4
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: