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

@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 с данным классом.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

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

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