Анимированное изображение (свойство background-position) на фоне посредством только CSS

Несмотря на то, что я очень давно занимаюсь разработкой сайтов, не раз бывают моменты, когда натыкаешьcя на какой-то интересный эффект или возможность, которой казалось бы совсем недавно еще не было.

Как раз такой пример перед вами. Давно-давно передо мной стояла задача сделать анимированный фон, но сколько с ним было трудностей, приходилось колдовать с JavaScript, искать какие-то дополнительные функции для него. И даже после всех проделанных усилий анимация то ли притормаживала, то ли ещё что-то.

А сейчас это в два счета делается через CSS.

О том, как сделать такой передвигающийся фон, читайте ниже

Для начала создайте какой-нибудь блок, например <div id="fon"></div>. И просто копируете следующий код, можете даже не менять в нём ничего.

@keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        background-position: -600px 600px /* анимируем свойство background-position */
    }
}
/* Mozilla Firefox 5.0+ */
@-moz-keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        background-position: -600px 600px
    }
}
/* Safari 4.0+, Chrome 4.0+ */
@-webkit-keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        background-position: -600px 600px
    }
}
/* Opera 12.0+ */
@-o-keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        background-position: -600px 600px
    }
}
/* не нужно использовать префикс -ms, так как свойства keyframes и animation поддерживаются с версии IE10 без префикса */
#fon{
	height: 340px; /* задаем произвольную высоту и ширину блока */
	width:100%;
	background-image: url('URL вашего фонового изображения');
	animation: animatedBackground 60s linear infinite;
	-moz-animation: animatedBackground 60s linear infinite;
	-webkit-animation: animatedBackground 60s linear infinite;
 	-o-animation: animatedBackground 60s linear infinite;
	/* так же, как и с @keyframes, префикс -ms тут ни к чему */
}

Что касается поддержки браузерами:

Свойство CSS
@keyframes 43.0
4.0 -webkit-
9.0
4.0 -webkit-
16.0
5.0 -moz-
30.0
15.0 -webkit-
12.0 -o-
10.0
animation 43.0
4.0 -webkit-
9.0
4.0 -webkit-
16.0
5.0 -moz-
30.0
15.0 -webkit-
12.0 -o-
10.0

Также тестировал на iOS6 (да, у меня оно стоит:) — фон оставался неподвижным (как на стандартном Safari, так и в приложении Chrome).

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Миша: Да, точно)

  • Владимир: и на третьей строке не хватает скобки ) закрывающей if :)

  • Миша: Добрый вечер! Рекомендую получить ID пользователя через функцию get_current_user_id().

  • Дмитрий: Миша, подскажите пожалуйста, я использую такой редирект, но он не срабатывает: add_action( 'template_redirect', funct...

  • Миша: Ну как не определена - это аргумент функции. Или я просто вас не до конца понимаю.