Написал скрипт, который при скролле меняет задний цвет страницы, но вот проблема в том, что туда невозможно добавить код из хекса или имя оттенка цвета.
Чтобы скрипт сработал нужно написать имя (в атрибут 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.
Комментариев нет:
Отправить комментарий