Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 28.12.2015
Сообщений: 215

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

19.09.2025, 13:31. Показов 1368. Ответов 12
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
добрый день. есть такой сайт - https://backstagetalks.com/#issue8
как сделать чтобы фон менял цвет как там под картинки и как сделать такой скролл чтобы он скроллил также как там?
прикладываю мою страницу
я пытаюсь учиться читать код через dev tools, думал пойму как там сделано, но мне показалось что там это через джава скрипт сделано, если можно объясните как все это в сss сделать, а то с джава скриптом у меня пока не очень
Вложения
Тип файла: zip backstage.zip (2.06 Мб, 10 просмотров)
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
19.09.2025, 13:31
Ответы с готовыми решениями:

Есть ли способ плавно вывести бордер при наведении, ну и плавно скрыть
Необходимо плавно вывести границу при наведении, и плавно чтобы скрывалась если убрать курсор. Что...

Фон с узором, плавно переходящий в цвет
Всем привет! дайте совет плз или ткните носом =) Получил на верстку фон шапки такого вида(клац),...

Как разместить две плавно появляющиеся картинки рядом?
Доброе время суток! Скажите пожалуйста, есть сайт, нашел в инете как сделать, чтоб при наведении на...

12
 Аватар для sad67man
2598 / 1502 / 689
Регистрация: 23.08.2015
Сообщений: 3,804
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/
1
0 / 0 / 0
Регистрация: 28.12.2015
Сообщений: 215
19.09.2025, 14:17  [ТС]
Цитата Сообщение от sad67man Посмотреть сообщение
Для такого скроллинга там используется библиотека jQeury.fullPage.js
не охота себя сейчас еще библиотеками загружать. на css такое нельзя сделать?
0
 Аватар для sad67man
2598 / 1502 / 689
Регистрация: 23.08.2015
Сообщений: 3,804
19.09.2025, 14:28
Цитата Сообщение от trofey2 Посмотреть сообщение
не охота себя сейчас еще библиотеками загружать. на css такое нельзя сделать?
Нет.
1
 Аватар для NTHing
1818 / 962 / 388
Регистрация: 26.11.2014
Сообщений: 1,958
Записей в блоге: 1
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>
2
0 / 0 / 0
Регистрация: 28.12.2015
Сообщений: 215
24.09.2025, 13:30  [ТС]
решил попробовать разобраться с этими библиотеками
Цитата Сообщение от sad67man Посмотреть сообщение
Для такого скроллинга там используется библиотека jQeury.fullPage.js
я загуглил эту библиотеку, но там на их сайте написано что она платная, я все правильно понял? а по-другому ей никак нельзя воспользоваться?
или как еще тогда этот скролл можно сделать?
0
 Аватар для sad67man
2598 / 1502 / 689
Регистрация: 23.08.2015
Сообщений: 3,804
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
1
3012 / 1446 / 262
Регистрация: 16.03.2008
Сообщений: 6,445
Записей в блоге: 2
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>
1
0 / 0 / 0
Регистрация: 28.12.2015
Сообщений: 215
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
не совсем понял, можете подробнее написать как задать цвет нужный
0
 Аватар для sad67man
2598 / 1502 / 689
Регистрация: 23.08.2015
Сообщений: 3,804
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;
}
1
0 / 0 / 0
Регистрация: 28.12.2015
Сообщений: 215
25.09.2025, 16:37  [ТС]
sad67man, спасибо большое все получилось

еще у меня тут вопрос возник а есть какой-то сайт где расписано по всяким библиотекам что каждая умеет, чтобы если что можно было найти то что нужно под конкретную задачу?
0
0 / 0 / 0
Регистрация: 28.12.2015
Сообщений: 215
29.09.2025, 13:19  [ТС]
еще хотел спросить что за написание такое когда после боди идет сразу слитно .fp-viewing-slide1 без пробела? это в каких случаях используется?
0
 Аватар для sad67man
2598 / 1502 / 689
Регистрация: 23.08.2015
Сообщений: 3,804
29.09.2025, 13:31
Цитата Сообщение от trofey2 Посмотреть сообщение
боди идет сразу слитно .fp-viewing-slide1 без пробела? это в каких случаях используется?
body.fp-viewing-slide1 - селектор по тегу и по классу одновременно. Т.е. выбираем элемент body с данным классом.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
29.09.2025, 13:31
Помогаю со студенческими работами здесь

Ребята, помогите, как сделать DIV (меняющая картинка при наведении) ссылкой!?
Ребята, помогите, как сделать DIV (меняющая картинка при наведении) ссылкой!? вот код: &lt;style...

Сделать фон (картинку) на всю страницу без повторений, не меняющийся при прокрутке
имеется высокий сайт. Задача: сделать фон(картинка) на всю страницу без повторений и что бы при...

Плавное изменение цвета рамки для картинки
Здравствуйте,помогите,пожалуйста! Нужно сделать для изображений рамку,которая при наводке мыши...

HTML - Надо: вставить картинку в картинку, в эту картинку, ссылку в картинку
Вот схема моего сайта. http://s020.***********/i716/1404/8c/254516feacb3.jpg У меня пока что на...

Как сделать плавную анимацию картинки?
Доброго времени суток, господа. Есть картинка. Нам нужно чтобы она бегала по диагонали плавно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Новые блоги и статьи
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 . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru