@myaso_26

Менять цветовую гамму сайта с помощью случайной картинки?

Здравствуйте. Хотел задать вопрос. Ситуация такая, у меня есть стандартный скрипт на рандом картинки. При обновлении страницы, выбирается случайная и ставится на шапку.
<script language="JavaScript">
<!--
var a=Math.round(Math.random()*3)
image = new Array();
image[0]="img/green.png"
image[1]="img/black.png"
image[2]="img/blue.png"
document.write ("<img src="+image[a]+">");
//-->
</script>


Я бы хотел, присвоить к этим параметрам определенные переменные, чтобы при случайной выбранной картинке, менялась цветовая гамма сайта. Например цвет шрифта, элементы hr и h1, и так далее.
Чтобы примерно было так:
- Обновил страницу, случайно выбралось green.png, и сайт приобрел зеленые элементы.
- Снова обновил страницу, случайно выбралась blue.png, и сайт стал с синими элементами.

Может, такие скрипты уже есть, но я не смог составить правильный гугл запрос и ничего не нашел. Понимаю, что нужно объеденить два скрипта (случайная картинка, и смена цветовой гаммы и темы сайта) Может у кого из личного опыта было такое, в общем, помогите, чем сможете.
  • Вопрос задан
  • 158 просмотров
Пригласить эксперта
Ответы на вопрос 2
Eridani
@Eridani
Мимо проходил
Идея гумно, извините за прямоту, было весело и забавно в середине нулевых такое делать.
Ну а по делу, раз создаете массив, создайте ассоциатив, помимо картинки, засуньте класс, который будет вешаться на body и наследовать от него соответствующие цвета.
Не помню, как там в JS в массиве ключи присваиваются
image = new Array();
image[0]=array(
 'path' => 'адрес до картинки',
'class' => 'green',
)

И делать это лучше не на JS, а на PHP в вашем случае, + дописывать к подключению стиля
GET параметр, который не будет давать css'ке закешироваться
<link rel="stylesheet" href="style.css?v=<?= time()?>">
Ответ написан
vadimkot
@vadimkot Куратор тега CSS
С помощью javascript можно вычислить средний цвет изображения и затем уже его применять как необходимо
Вот статья на хабре по этому поводу https://habr.com/ru/post/419309/
Там используется библиотека https://github.com/fast-average-color/fast-average... - в статье есть примеры использования. Ну и в readme репозитория (https://github.com/fast-average-color/fast-average... документация с примерами.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы