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

#javascript #css #hex

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

Чтобы скрипт сработал нужно написать имя (в атрибут 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
  





    

Ответы

Ответ 1

Записывай цвет в 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