Как сделать фон плавно меняющий цвет под картинки

@trofey2 · Регистрация: 28.12.2015

Студворк — интернет-сервис помощи студентам

добрый день. есть такой сайт - https://backstagetalks.com/#issue8
как сделать чтобы фон менял цвет как там под картинки и как сделать такой скролл чтобы он скроллил также как там?
прикладываю мою страницу
я пытаюсь учиться читать код через dev tools, думал пойму как там сделано, но мне показалось что там это через джава скрипт сделано, если можно объясните как все это в сss сделать, а то с джава скриптом у меня пока не очень

@sad67man · 19.09.2025, 13:49

Сообщение от trofey2

как сделать такой скролл чтобы он скроллил также как там?

Для такого скроллинга там используется библиотека jQeury.fullPage.js

Добавлено через 4 минуты

Сообщение от trofey2

как сделать чтобы фон менял цвет как там под картинки

У библиотеки есть набор событий, к которым можно подвязаться. На данном сайте при смене слайдов меняется класс у body
.fp-viewing-issue1 , .fp-viewing-issue2 и т.д. которые задают css background

А плавность изменения достигается за счет специального css свойства

CSS
1
2
3
body {
  transition: background-color 500ms ease-out 200ms;
}

https://doka.guide/css/transition/

@trofey2 · 19.09.2025, 14:17 **[ТС]**

Сообщение от sad67man

Для такого скроллинга там используется библиотека jQeury.fullPage.js

не охота себя сейчас еще библиотеками загружать. на css такое нельзя сделать?

@sad67man · 19.09.2025, 14:28

Сообщение от trofey2

не охота себя сейчас еще библиотеками загружать. на css такое нельзя сделать?

Нет.

@NTHing · 19.09.2025, 21:36

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
        <style>
            body {
                animation: bg;
                animation-timeline: scroll();
            }
            @keyframes bg {
                from {
                    background-color: #ffbe00;
                }
                40% {
                    background-color: #ffbe00;
                }
                60% {
                    background-color: #fb671e;
                }
                to {
                    background-color: #fb671e;
                }
            }
        </style>
        <section class="issue_3">
            <img
                src="./img/backstagetalks_cover_issue_3.png"
                alt="issue_3"
            />
        </section>
        <section class="issue_4">
            <img
                src="./img/backstagetalks_cover_issue_4.png"
                alt="issue_4"
            />
        </section>
    </body>

@trofey2 · 24.09.2025, 13:30 **[ТС]**

решил попробовать разобраться с этими библиотеками

Сообщение от sad67man

Для такого скроллинга там используется библиотека jQeury.fullPage.js

я загуглил эту библиотеку, но там на их сайте написано что она платная, я все правильно понял? а по-другому ей никак нельзя воспользоваться?
или как еще тогда этот скролл можно сделать?

@sad67man · 24.09.2025, 14:36

Сообщение от trofey2

я загуглил эту библиотеку, но там на их сайте написано что она платная, я все правильно понял? а по-другому ей никак нельзя воспользоваться?
или как еще тогда этот скролл можно сделать?

Платная 3-я версия, можно использовать версию 2.9.7
https://github.com/alvarotrigo... tree/2.9.7
Она бесплантная.

На этом сайте https://backstagetalks.com/ кстати используется версия 2.9.4
Это написано в js-файлике https://backstagetalks.com/js/... age.min.js

@voral · 25.09.2025, 07:55

-del

Добавлено через 8 минут
стало самому интересно. Вот как получилось. только здесь цвет фона заранее известен и храниться в data-color

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <style>
        html, body {height: 100%}
        body{
            transition: background-color 500ms ease-out 200ms;
        }
        .listItem {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .listItem img{
            max-width: 100%;
            max-height: 400px;
        }
    </style>
</head>
<body>
    <div class="listItem" data-color="#f00"><img src="https://zastavok.net/main/priroda/156676661371.jpg"></div>
    <div class="listItem" data-color="#880"><img src="https://zastavok.net/main/priroda/1446110947.jpg"></div>
    <div class="listItem" data-color="#0f0"><img src="https://zastavok.net/main/priroda/1440894421.jpg"></div>
    <div class="listItem" data-color="#088"><img src="https://zastavok.net/main/priroda/1470780270.jpg"></div>
    <div class="listItem" data-color="#00f"><img src="https://zastavok.net/main/priroda/162365685425.jpg"></div>
<script>
 
    var currentColor = '#fff';
    var options = {
        root: null,
        rootMargin: "0px",
        threshold:  [0, 0.1,0.4, 0.6, 0.9, 1],
    };
    var callback = function (entries, observer) {
        entries.forEach(function(entry){
            const color = entry.target.dataset.color;
            if (color !== currentColor && color !== undefined && entry.intersectionRatio > 0.51) {
                document.body.style.backgroundColor = color;
            }
        });
    };
    var observer = new IntersectionObserver(callback, options);
    var targets = document.querySelectorAll(".listItem");
    targets.forEach(function(entry){
        observer.observe(entry);
    })
</script>
</body>
</html>

Добавлено через 24 минуты
А вот вариант с анализом картинки. Но тут есть нюанс:
1. Потенциально картинка может анализироваться долго, по этому есть некий предустановленный цвет (вообще лучше это делать на беке и просто как и в предыдущем сообщении сразу в data-color записывать)
2. Картинки с других доменов может не получиться обработать из за CORS

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <style>
        html, body {height: 100%}
        body{
            transition: background-color 500ms ease-out 200ms;
        }
        .listItem {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .listItem img{
            max-width: 100%;
            max-height: 400px;
        }
    </style>
</head>
<body>
    <div class="listItem" data-color="#f00"><img src="1.jpg"></div>
    <div class="listItem" data-color="#880"><img src="2.jpg"></div>
    <div class="listItem" data-color="#0f0"><img src="3.jpg"></div>
    <div class="listItem" data-color="#088"><img src="4.jpg"></div>
    <div class="listItem" data-color="#00f"><img src="5.jpg"></div>
<script>
    const onLoad = function () {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext('2d');
        canvas.width = this.width;
        canvas.height = this.height;
 
        // Рисуем изображение на canvas
        ctx.drawImage(this, 0, 0, this.width, this.height);
 
        // Получаем данные пикселей
        const imageData = ctx.getImageData(0, 0, this.width, this.height);
        const data = imageData.data;
 
        const colorCount = {};
 
        // Проходим по всем пикселям с шагом (например, каждый 10-й для ускорения)
        const step = 10;
        for (let i = 0; i < data.length; i += 4 * step) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];
            const a = data[i + 3];
 
            // Пропускаем прозрачные пиксели
            if (a < 128) continue;
 
            // Округляем цвета для уменьшения разнообразия (например, до 10-ти оттенков на канал)
            const rBucket = Math.floor(r / 32) * 32; // 8 бакетов по 32
            const gBucket = Math.floor(g / 32) * 32;
            const bBucket = Math.floor(b / 32) * 32;
 
            const color = `${rBucket},${gBucket},${bBucket}`;
 
            colorCount[color] = (colorCount[color] || 0) + 1;
        }
 
        // Находим цвет с максимальным количеством
        let dominantColor = '';
        let maxCount = 0;
        for (const color in colorCount) {
            if (colorCount[color] > maxCount) {
                maxCount = colorCount[color];
                dominantColor = color;
            }
        }
 
        if (dominantColor) {
            const [r, g, b] = dominantColor.split(',').map(Number);
            this.parentElement.dataset.color = `rgb(${r}, ${g}, ${b})`;
        }
    }
 
    const images = document.getElementsByTagName("img");
    for (let i = 0; i < images.length; i++) {
        console.log(images[i].src);
        images[i].onload = onLoad;
    }
 
    var currentColor = '#fff';
    var options = {
        root: null,
        rootMargin: "0px",
        threshold:  [0,0.52, 0.9, 1],
    };
    var callback = function (entries, observer) {
        entries.forEach(function(entry){
            const color = entry.target.dataset.color;
            if (color !== currentColor && color !== undefined && entry.intersectionRatio > 0.51) {
                document.body.style.backgroundColor = color;
            }
        });
    };
    var observer = new IntersectionObserver(callback, options);
    var targets = document.querySelectorAll(".listItem");
    targets.forEach(function(entry){
        observer.observe(entry);
    })
</script>
</body>
</html>

Добавлено через 2 минуты
Для картинок, как на сайте, который приведен в качестве примера, там вообще гарантировано "попадание". Я брал рандомные с рандомного сайта обоев - фотки, там конечно такой анализ слишком упрощенный

Добавлено через 9 минут
Ну и третий вариант: контрастный текст автоматический

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <style>
        html, body {height: 100%}
        body{
            transition: background-color 500ms ease-out 200ms;
        }
        .listItem {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .listItem img{
            max-width: 100%;
            max-height: 400px;
        }
    </style>
</head>
<body>
    <div class="listItem" data-color="#f00"><img src="1.jpg">Картинка 1</div>
    <div class="listItem" data-color="#880"><img src="2.jpg">Картинка 2</div>
    <div class="listItem" data-color="#0f0"><img src="3.jpg">Картинка 3</div>
    <div class="listItem" data-color="#088"><img src="4.jpg">Картинка 4</div>
    <div class="listItem" data-color="#00f"><img src="5.jpg">Картинка 5</div>
    <div class="listItem" data-color="#00f"><img src="6.jpg">Картинка 6</div>
    <div class="listItem" data-color="#00f"><img src="7.jpg">Картинка 7</div>
<script>
    const onLoad = function () {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext('2d');
        canvas.width = this.width;
        canvas.height = this.height;
 
        // Рисуем изображение на canvas
        ctx.drawImage(this, 0, 0, this.width, this.height);
 
        // Получаем данные пикселей
        const imageData = ctx.getImageData(0, 0, this.width, this.height);
        const data = imageData.data;
 
        const colorCount = {};
 
        // Проходим по всем пикселям с шагом (например, каждый 10-й для ускорения)
        const step = 10;
        for (let i = 0; i < data.length; i += 4 * step) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];
            const a = data[i + 3];
 
            // Пропускаем прозрачные пиксели
            if (a < 128) continue;
 
            // Округляем цвета для уменьшения разнообразия (например, до 10-ти оттенков на канал)
            const rBucket = Math.floor(r / 32) * 32; // 8 бакетов по 32
            const gBucket = Math.floor(g / 32) * 32;
            const bBucket = Math.floor(b / 32) * 32;
 
            const color = `${rBucket},${gBucket},${bBucket}`;
 
            colorCount[color] = (colorCount[color] || 0) + 1;
        }
 
        // Находим цвет с максимальным количеством
        let dominantColor = '';
        let maxCount = 0;
        for (const color in colorCount) {
            if (colorCount[color] > maxCount) {
                maxCount = colorCount[color];
                dominantColor = color;
            }
        }
 
        if (dominantColor) {
            const [r, g, b] = dominantColor.split(',').map(Number);
            this.parentElement.dataset.color = `rgb(${r}, ${g}, ${b})`;
            // подбираем контрастный цвет текста за счет числа с которым сравниваем
            this.parentElement.dataset.text = (r * 0.299 + g * 0.587 + b * 0.114) > 166 ? 'black' : 'white';
        }
    }
 
    const images = document.getElementsByTagName("img");
    for (let i = 0; i < images.length; i++) {
        console.log(images[i].src);
        images[i].onload = onLoad;
    }
 
    var currentColor = '#fff';
    var options = {
        root: null,
        rootMargin: "0px",
        threshold:  [0,0.52, 0.9, 1],
    };
    var callback = function (entries, observer) {
        entries.forEach(function(entry){
            const color = entry.target.dataset.color;
            const colorText = entry.target.dataset.text;
            if (color !== currentColor && color !== undefined && entry.intersectionRatio > 0.51) {
                document.body.style.backgroundColor = color;
                document.body.style.color = colorText;
            }
        });
    };
    var observer = new IntersectionObserver(callback, options);
    var targets = document.querySelectorAll(".listItem");
    targets.forEach(function(entry){
        observer.observe(entry);
    })
</script>
</body>
</html>

@trofey2 · 25.09.2025, 15:54 **[ТС]**

voral, спасибо. это интересно но жалко что картинки перелистываются не так как на образце. решил попробовать сам с этой библиотекой разобраться, естественно ничего не понял.
я вроде как на гитхабе написано включил в head страницы все эти сслыки. потом назвал как там написано секции но потом там написано

All you need to do is call fullPage.js inside a $(document).ready function:

JavaScript
1
2
3
$(document).ready(function() {
    $('#fullpage').fullpage();
});

вот тут уже не понятно что с этим делать то чтобы скролл этот волшебный заработал?

Добавлено через 2 часа 28 минут
вопрос снимается сам разобрался как это сделать, теперь буду со сменой цвета смотреть

Добавлено через 36 минут

Сообщение от sad67man

У библиотеки есть набор событий, к которым можно подвязаться. На данном сайте при смене слайдов меняется класс у body
.fp-viewing-issue1 , .fp-viewing-issue2 и т.д. которые задают css background

не совсем понял, можете подробнее написать как задать цвет нужный

@sad67man · 25.09.2025, 16:22

Сообщение от trofey2

не совсем понял, можете подробнее написать как задать цвет нужный

Сейчас еще раз глянул, эта библиотека при смене слайда сама добавляет класс на body типа .fp-viewing-* (.fp-viewing-0, .fp-viewing-1 и т.д. )
Вот смотрите через инспектор какие у вас классы навешиваются на body и задавайте любые css-свойсва

Еще тут можно использовать data-anchor

К примеру из документации

HTML5
1
2
3
4
5
6
<div class="section">
    <div class="slide" data-anchor="slide1"> Слайд 1 </div>
    <div class="slide" data-anchor="slide2"> Слайд 2 </div>
    <div class="slide" data-anchor="slide3"> Слайд 3 </div>
    <div class="slide" data-anchor="slide4"> Слайд 4 </div>
</div>

Тогда будут классы ставиться соответствующе (.fp-viewing-slide1, .fp-viewing-slide2 и т.д. ).

Добавлено через 1 минуту

CSS
1
2
3
body.fp-viewing-slide1 {
    background: #ff608c;
}

@trofey2 · 25.09.2025, 16:37 **[ТС]**

sad67man, спасибо большое все получилось

еще у меня тут вопрос возник а есть какой-то сайт где расписано по всяким библиотекам что каждая умеет, чтобы если что можно было найти то что нужно под конкретную задачу?

@trofey2 · 29.09.2025, 13:19 **[ТС]**

еще хотел спросить что за написание такое когда после боди идет сразу слитно .fp-viewing-slide1 без пробела? это в каких случаях используется?

@sad67man · 29.09.2025, 13:31

Сообщение от trofey2

боди идет сразу слитно .fp-viewing-slide1 без пробела? это в каких случаях используется?

body.fp-viewing-slide1 - селектор по тегу и по классу одновременно. Т.е. выбираем элемент body с данным классом.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 215
	25.09.2025, 16:37 [ТС]
	sad67man, спасибо большое все получилось еще у меня тут вопрос возник а есть какой-то сайт где расписано по всяким библиотекам что каждая умеет, чтобы если что можно было найти то что нужно под конкретную задачу? 0

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 215
	29.09.2025, 13:19 [ТС]
	еще хотел спросить что за написание такое когда после боди идет сразу слитно .fp-viewing-slide1 без пробела? это в каких случаях используется? 0