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

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

Понравилась статья?

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

Установка:

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


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%; }  
}
Добавил: Admin Просмотров: 1097 Категория: Интересные решения Комментарии
avatar
1
Интересно, вот только стартовую подгрузит...
avatar
0
2
Вряд ли, ведь это чистый CSS. Никаких скриптов, поэтому нагрузки на страницу быть не должно.
avatar