Скролл изображения + разбор кода

Демо

Уважаемый гость! Для скачивания файлов с нашего портала необходимо авторизоваться:

Красивый скролл панорамы на твоем сайте! Идеально впишется в сайт со строительной, туристической и бизнес- тематикой.

Установка:

1. Создаем в хидере див с классом "panorama". Если хотите, чтобы он отображался в футере, то вставляем в футер.

Код

2. В самый низ "Таблицы стилей CSS" вставляем этот код:

Код

.panorama{
  width: 100%;
  height: 500px;
  background: url(http://icupertino.ru/wp-content/uploads/bP10Ce6-Imgur.jpg) no-repeat;
  background-position: 0 30%;
  background-size: auto auto;
  filter: blur(2px);
  -webkit-filter: blur(2px);

  -webkit-animation: 90s linear infinite panorama;
  -moz-animation: 90s linear infinite panorama;
  animation: 90s linear infinite panorama;
}

@-webkit-keyframes panorama{
  0%{ background-position: 0 30%; }
  50%{ background-position: 100% 30%; }
  100%{ background-position: 0 30%; }
}

@-moz-keyframes panorama{
  0%{ background-position: 0 30%; }
  50%{ background-position: 100% 30%; }
  100%{ background-position: 0 30%; }
}

@keyframes panorama{
  0%{ background-position: 0 30%; }
  50%{ background-position: 100% 30%; }
  100%{ background-position: 0 30%; }
}

3. Сохраняем и радуемся!

Разбор кода

Код

.panorama{
  width: 100%; /* Ширина (100%- по всей ширине) */
  height: 500px; /* Высота (500 пикселей) */
  background: url(http://icupertino.ru/wp-content/uploads/bP10Ce6-Imgur.jpg) no-repeat; /* Ссылка на панораму*/
  background-position: 0 30%; /* Позиция панорамы (изменять не рекомендуется) */
  background-size: auto auto; /* Размер панорамы (изменять не рекомендуется) */
  filter: blur(2px); /* Размытие панорамы. */
  -webkit-filter: blur(2px); /* Размытие панорамы для webkit-браузеров */

  -webkit-animation: 90s linear infinite panorama; /* Время на скролл по панораме для webkit-браузеров */
  -moz-animation: 90s linear infinite panorama; /* Время на скролл по панораме для Мозилы */
  animation: 90s linear infinite panorama; /* Время на скролл по панораме*/
}

/* Кадры анимации (изменять не рекомендуется). Для webkit-браузеров*/
@-webkit-keyframes panorama{
  0%{ background-position: 0 30%; }
  50%{ background-position: 100% 30%; }
  100%{ background-position: 0 30%; }
}

/* Кадры анимации (изменять не рекомендуется). Для Мозилы*/
@-moz-keyframes panorama{
  0%{ background-position: 0 30%; }
  50%{ background-position: 100% 30%; }
  100%{ background-position: 0 30%; }
}

/* Кадры анимации (изменять не рекомендуется).*/
@keyframes panorama{
  0%{ background-position: 0 30%; }
  50%{ background-position: 100% 30%; }
  100%{ background-position: 0 30%; }
}