Динамически менять цвет фона при прокрутке - PullRequest
Новая
       7

Динамически менять цвет фона при прокрутке

0 голосов
/ 04 октября 2018

Есть ли способ динамического изменения цвета фона при прокрутке?

Например, обратитесь к этому сайту (https://www.samsung.com/sec/smartphones/galaxy-note9/)

При первом доступе к этому сайту, цвет фона синий.

При прокрутке вниз цвет меняется плавно на черный.

Также смотрите этот сайт (codepen.io/Funsella/pen/yLfAG/)

Второй сайт такой же, как и первый. Но его цвет сразу изменился.

Но цвет первого сайта не меняется сразу.

Он постепенно меняется в зависимости от положения прокрутки. 

body {
  height: 100vh;
}
.section1 {
  background-color: white;
  height: 100%;
}
.section2 {
  background: linear-gradient(#f05fa6, #ed1654);
  height: 100%;
}
<html>
<body>
  <section class="section1">
    SECTION1
  </section>
  <section class="section2">
    SECTION2
  </section>
</body>
</html>

Над кодом, над которым я работал.

Текущий цвет делится на каждую секцию.

КогдаЯ прокручиваю вниз, хочу изменить цвет background-color: white -> background: linear-gradient(#f05fa6, #ed1654)

Есть ли какое-нибудь решение по этому поводу?

Ответы [ 4 ]

0 голосов
/ 07 июня 2019

Я пытался использовать раствор атомикс с конечным цветом, но это было слишком сложно.Я нашел себе лучшее решение, используя chroma.js

Вам нужно сгенерировать шкалу из двух цветов (или более): 

var scale = chroma.scale(['#1abc9c', '#e74c3c']).domain([0, $(document).height()]);
$(window).on('scroll', function () {
    $('.section').css('background-color', scale(window.pageYOffset));
});

Здесь я создаю масштаб с нужным мне цветом, а затем я добавляю собственный домен, чтобы моя шкала могла использовать положение смещения, которое может быть от 0 (вверху страницы) 3600 (внизу моей страницы).Или вы можете попытаться получить значение положения прокрутки между 0 и 1 с помощью некоторой математики.

Затем, когда мы прокручиваем, мы можем использовать наш масштаб с текущей позицией прокрутки.Он сгенерирует цвет RGBA между нашими двумя цветами, прежде чем достигнет последнего в нижней части страницы #e74c3c

0 голосов
/ 04 октября 2018

Этот код jquery изменяет цвет фона тела. 

$(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() {
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 300) {
                $("body").css('background-color', 'blue');
            } else {
                $("body").css('background-color', 'red');
            }
        });
    });

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

body {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

Сделайте фоны ваших классов секций прозрачными. 

.section1, section2 {
  background-color: transparent;
}
0 голосов
/ 04 октября 2018

Вам необходимо плавно интерполировать цвета с учетом смещения прокрутки страницы (window.scrollY или window.pageYOffset в старых браузерах).

Сайт Samsung переводит сплошной цвет вместо градиента, что немного проще.

Вот так ( см. CodePen ): 

const [red, green, blue] = [69, 111, 225]
const section1 = document.querySelector('.section1')

window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset) / 150
  y = y < 1 ? 1 : y // ensure y is always >= 1 (due to Safari's elastic scroll)
  const [r, g, b] = [red/y, green/y, blue/y].map(Math.round)
  section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
})

Вы можете применить ту же логику к цветам градиента.

0 голосов
/ 04 октября 2018

Я думаю, вам нужно использовать свойство "transition" в CSS. 

body {
  background: green;
  transition: 0.3s all;
}

Затем вы можете добавлять, удалять элементы вместе с изменением цвета: 

$(function() {
$(window).scroll(function () {
   if ($(this).scrollTop() > 50) {
      $(‘body’).addClass(‘colorChange’)
      $(‘header’).addClass(‘displayNone’)
      $(‘nav’).removeClass(‘navBackgroundStart’)
      $(‘nav ul’).addClass(‘addBlackBackground’)
   } 
   if ($(this).scrollTop() < 50) {
      $(‘body’).removeClass(‘colorChange’)
      $(‘header’).removeClass(‘displayNone’)
      $(‘nav’).addClass(‘navBackgroundStart’)
      $(‘nav ul’).removeClass(‘addBlackBackground’)
   } 
});
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...