Страницы

Поиск по вопросам

воскресенье, 10 марта 2019 г.

Изменения цвета заднего фона при скролле

Написал скрипт, который при скролле меняет задний цвет страницы, но вот проблема в том, что туда невозможно добавить код из хекса или имя оттенка цвета.
Чтобы скрипт сработал нужно написать имя (в атрибут data-color) цвета типа: yellow, red, violet и т.д. Притом, если в атрибут data-color написать имя цвета типа french rose (из википедии ), то это не будет работать.
Мне надо задавать цвет хексом. Подскажите, как это можно реализовать, чтобы можно было туда написать цвет хексом или хотя бы имена цветов из ссылки которую я предоставил работали?
$(window).scroll(function() { // селекторы var $window = $(window), $body = $('body'), $panel = $('.panel'); // var scroll = $window.scrollTop() + ($window.height() / 3); $panel.each(function() { var $this = $(this); if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) { // Удаляет все классы с body которые с классом color- $body.removeClass(function(index, css) { return (css.match(/(^|\s)color-\S+/g) || []).join(' '); }); // добавить класс активному диву $body.addClass('color-' + $(this).data('color')); } }); }).scroll(); /* Setting fade transition and default settings */ body { color: #000; transition: background-color 1s ease; } /* panel styles */ .panel { /* min height incase content is higher than window height */ min-height: 100vh; display: flex; justify-content: space-around; align-items: center; font-family: sans-serif; /* outline: 10px solid hotpink; */ /* turn above on to see the edge of panels */ } /* colours */ .color-violet { background-color: #7A4EAB !important; } .color-indigo { background-color: #4332CF !important; } .color-blue { background-color: #2F8FED !important; } .color-green { background-color: #4DCF42 !important; } .color-yellow { background-color: #FFEA00 !important; } .color-orange { background-color: #F19031 !important; } .color-red { background-color: #F2293A !important; } /* styling for demo, can ignore */ body { text-align: center; font-size: 120%; line-height: 1.618; } h1, h2 { font-size: 3em; letter-spacing: -0.05em; line-height: 1.1; } p { max-width: 30em; margin-bottom: 1.618em; } a { color: #4332CF; } #header { height: 100px; position: fixed; background-color: yellow; width: 100%; z-index: 99; transition: ease-in-out background-color .6s; } #header .logo img { padding: 10px 0; } #header .nav .nav-panel { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } #header .nav .nav-panel .top-panel { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; color: #3116f8 !important; } #header .nav .nav-panel .top-panel span { line-height: 1.8; } #header .nav .nav-panel .top-panel a { font-size: 16px; text-decoration: none; font-weight: 900; padding: 0 10px; } #header .nav .nav-panel .top-panel a:hover { color: #3116f8 !important; } #header .nav .nav-panel .top-panel .langs ul { list-style-type: none; } #header .nav .nav-panel .top-panel .langs ul li a span { line-height: 1; }

Magic scrolling colours

Scroll to animate the background colour of the body as a full height panel becomes visible.

I have tried to comment the code, particurly the JavaScript, as much as possible. I hope it's clear to understand.

Violet panel

Indigo panel

Blue panel

Green panel

Yellow panel

Orange panel

Red panel



Ответ

Записывай цвет в data-color без #, а потом в JS добавляй при установке цвета обратно. Вроде проблем с этим никаких нет.
$(window).scroll(function() { // селекторы var $window = $(window), $body = $('body'), $panel = $('.panel'); // var scroll = $window.scrollTop() + ($window.height() / 3); $panel.each(function() { var $this = $(this); if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) { // устанавливаем цвет $body.css('background-color', `#${$(this).data('color')}`); } }); }).scroll(); /* Setting fade transition and default settings */ body { color: #000; transition: background-color 1s ease; } /* panel styles */ .panel { /* min height incase content is higher than window height */ min-height: 100vh; display: flex; justify-content: space-around; align-items: center; font-family: sans-serif; /* outline: 10px solid hotpink; */ /* turn above on to see the edge of panels */ } /* styling for demo, can ignore */ body { text-align: center; font-size: 120%; line-height: 1.618; } h1, h2 { font-size: 3em; letter-spacing: -0.05em; line-height: 1.1; } p { max-width: 30em; margin-bottom: 1.618em; } a { color: #4332CF; } #header { height: 100px; position: fixed; background-color: yellow; width: 100%; z-index: 99; transition: ease-in-out background-color .6s; } #header .logo img { padding: 10px 0; } #header .nav .nav-panel { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } #header .nav .nav-panel .top-panel { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; color: #3116f8 !important; } #header .nav .nav-panel .top-panel span { line-height: 1.8; } #header .nav .nav-panel .top-panel a { font-size: 16px; text-decoration: none; font-weight: 900; padding: 0 10px; } #header .nav .nav-panel .top-panel a:hover { color: #3116f8 !important; } #header .nav .nav-panel .top-panel .langs ul { list-style-type: none; } #header .nav .nav-panel .top-panel .langs ul li a span { line-height: 1; }

Magic scrolling colours

Scroll to animate the background colour of the body as a full height panel becomes visible.

I have tried to comment the code, particurly the JavaScript, as much as possible. I hope it's clear to understand.

Violet panel

Indigo panel

Blue panel

Green panel

Yellow panel

Orange panel

Red panel


Комментариев нет:

Отправить комментарий