Динамическая смена фона без перезагрузки и js

+39
5.84K
Как то озадачился найти простое решение для смены фона сайта без перезагрузки на чистом css. Может, кому пригодится:

  1.  
  2. body {
  3. margin:0;
  4. padding:0;
  5. background: red;
  6. /* Chrome, Safari, Opera */
  7. -webkit-animation-name: myfirst;
  8. -webkit-animation-duration: 15s;
  9. -webkit-animation-timing-function: linear;
  10. -webkit-animation-delay: 5s;
  11. -webkit-animation-iteration-count: infinite;
  12. -webkit-animation-direction: alternate;
  13. -webkit-animation-play-state: running;
  14. /* Standard syntax */
  15. animation-name: myfirst;
  16. animation-duration: 15s;
  17. animation-timing-function: linear;
  18. animation-delay: 5s;
  19. animation-iteration-count: infinite;
  20. animation-direction: alternate;
  21. animation-play-state: running;
  22. }
  23.  
  24. /* Chrome, Safari, Opera */
  25. @-webkit-keyframes myfirst {
  26. 0% {background:red;}
  27. 25% {background:yellow;}
  28. 50% {background:blue;}
  29. 75% {background:green;}
  30. 100% {background:red;}
  31. }
  32.  
  33. /* Standard syntax */
  34. @keyframes myfirst {
  35. 0% {background:red;}
  36. 25% {background:yellow;}
  37. 50% {background:blue;}
  38. 75% {background:green;}
  39. 100% {background:red;}
  40. }
  41.  

На демо для наглядности поставил:
duration: 15s
delay: 5s
и свои цвета, конечно.
На одном рабочем сайте стоит 60s и 20s и совсем не утомляет, эффект релаксирующий.
Мелочь, естественно, но может кому и понадобится.
Это просто пример, для привлечения внимания многоуважаемого сообщества, что сейчас с помощью css можно много чего натворить.
0
Def Def 10 лет назад #
опять де это если браузер поддерживает html 5? верно?
+6
Val Val 10 лет назад #
Если браузер не поддерживает html 5 - это не браузер!
Олег Васильевич я Олег Васильевич я 10 лет назад #
Комментарий удален
+1
Pasha Pasha 10 лет назад #
это если браузер поддерживает html 5? верно?
Нет не верно. html тут вообще ни при чем.
0
Def Def 10 лет назад #
да. точно, вернее CSS3
0
Капитан Капитан 10 лет назад #
Не хочется никого отвлекать, но не совсем понятно, что нужно сделать. Чуть-чуть подробней бы кто написал какие файлы править, а дальше уже сам докумекаю.
+4
Олег с клещами Олег с клещами 10 лет назад #
Для 2.1.1:
\templates\default\css\theme-layout.css со строки 8
Код PHP:
  1. body {
  2. background: url("../images/bg.png");
  3. margin:0;
  4. padding:0;
  5. }
заменить на то что приведено в посте.
Для 1.10.4:
\templates\_default_\css\styles.css со строки 24
Код PHP:
  1. body {
  2. background:url(../images/bg.jpg) no-repeat center top #1F3147;
  3. height: 100%;
  4. word-wrap: break-word;
  5. }
заменить на то что приведено в посте.
0
Azura Azura 10 лет назад #
Простите, я слегка не поняла... А как можно это использовать? Для чего? Я в ступоре.... Х)
0
Сергей Сергей 10 лет назад #
Смена фона слов нет + а квадратный логотип и ширину от демо шаблона в студию можно?
0
Александр Александр 10 лет назад #
ваше классно +++ прикольно получилось))) а на 1 ветку Инстанта я смогу такое забубенеть?))) 9надо попробовать спасибо еще Олегу с клещами
0
Александр Александр 10 лет назад #
а блин Олег это и есть кто Автор топика (извиняюсь не заметил) и про 1.10 тоже))) плюсики тогда сообщение выше))
0
Валентин Валентин 10 лет назад #
Почитайте css3 раздел анимации. Там даже 3д можно делать. Sorax в ютубе вылаживал. Сделал куб который можно вращать мышкой на css3
0
Александр Александр 10 лет назад #
а на демо, что за цвета или можете поделиться посмотреть еще где Вы сделали 60s 20s интересно посмотреть, а то красный немного утомляет и отвлекает и что то не то)))
+1
Lora Lora 10 лет назад #
Прикольно, спасибо.
0
Lora Lora 10 лет назад #
Заметил такой нюанс. У меня на некоторых страницах вместо фона стоят картинки, в зависимости от menuId() со свойствами center fixed. На страницах где просто фон использую ваш пример. так вот если я перехожу на стр. с фоном-картинкой, то при первой смене ключевых кадров( на стр. с фоном) на этой странице перестаёт работать center fixed и картинка смещается влево. Если разбирусь в чём дело отпишусь.
0
vell vell 9 лет назад #
Было бы хорошо, ещё добавить функцию, что бы при переходе на другую страницу, цвет фона продолжал воспроизводиться с того места где закончил, а не каждый раз с одного и то го же цвета.

Еще от автора

Добавление материалов гостями без регистраци
Много предлагалось способов как разрешить гостям добавлять материалы. Перепробовал все, на сегодня ни один не работает. Пришлось изобрести велосипед.
Фиктивный счетчик клиентов
Иногда требуется вывести на сайте фиктивный счетчик клиентов. Я люблю максимально простые решения.
Вставка из Word в CKEditor 1.хх
Не раз уже на форуме обсуждали проблемку в CKEditor когда нельзя вставить текст из Word (нет кнопки). Решения я не увидел, поэтому полез сам
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.