Изменение цвета в javascript - PullRequest
Новая
       17

Изменение цвета в javascript

0 голосов
/ 08 января 2020

Я использую некоторые javascript, которые я нашел в сети, и они меняют цвет веб-страницы при изменении положения горизонтальной прокрутки. Код ниже: 

$(document).ready(function($) {
    checkScroll = setInterval(function(){scrollHorizontal()},10);
  });

function scrollHorizontal() {
  maxScroll = $('.meh').width() - $('body').width();
  scrolledHor = $(window).scrollLeft();
  backgroundOpacity = 'rgba(0,0,0,'+(scrolledHor / maxScroll)+')';
  $('body').css('background',backgroundOpacity);
  $('.pixels').html('Scrolled: '+scrolledHor+' pixels');

}

Поскольку страница медленно становится черной, черный текст становится невидимым, поэтому у меня возникла идея изменить цвет текста с черного на то время, пока страница прокручивается также. Для этого я изменил код, добавив две дополнительные строки кода и соответствующий css. См. Ниже: 

$(document).ready(function($) {
    checkScroll = setInterval(function(){scrollHorizontal()},10);
  });

function scrollHorizontal() {
  maxScroll = $('.meh').width() - $('body').width();
  scrolledHor = $(window).scrollLeft();

  backgroundOpacity = 'rgba(0,0,0,'+(scrolledHor / maxScroll)+')';
  $('body').css('background',backgroundOpacity);

  textOpacity = 'rgba((255/maxScroll)*scrolledHor,(255/maxScroll)*scrolledHor,(255/maxScroll)*scrolledHor),1';
  $('table').css('color',textOpacity);

  $('.pixels').html('Scrolled: '+scrolledHor+' pixels');

}

Похоже, это не работает. Я предполагаю, что это как-то связано с синтаксисом, который я использую, но я никогда не использовал Javascript, поэтому не уверен, что я делаю неправильно. Есть предложения?

1 Ответ

0 голосов
/ 08 января 2020

Я понял это! 

  co255 = (255/maxScroll)*scrolledHor;
  textOpacity = 'rgba('+co255+','+co255+','+co255+',1)';
...