Как менять цвет шапки при прокручивании страницы?

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

$(function() < let header = $('.header'), intro = $('.intro'); $(window).scroll(function() < if($(this).scrollTop() >intro.outerHeight()) < header.addClass('header_filled'); >else < header.removeClass('header_filled'); >>); >);

*, *::before, *::after < box-sizing: border-box; >h1, h2, h3, h4, h5, h6 < margin: 0; >a < text-decoration: none; >body < margin: 0; font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.6; color: #fff; >/* Animations */ /* Container */ .container < width: 100%; max-width: 1200px; margin: 0 auto; >/* Header */ .header < width: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: 100; >.header__logo < font-size: 30px; font-weight: 700; color: #fff; >.header__inner < display: flex; justify-content: space-between; align-items: center; >.header_filled < background-color: #3ebb46; border-radius: 0 0 20px 20px; transition: .2s ease-in; >/* Intro */ .intro < display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100vh; background: url("../img/intro.jpg") center no-repeat; background-size: cover; font-size: 20px; >.intro__inner < margin: 0 auto; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid #fff; border-radius: 30px; >.intro__title < font-size: 72px; text-align: center; >.intro__subtitle < font-family: 'Jost', sans-serif; text-transform: uppercase; font-size: 36px; text-align: center; >/* Navigation */ .nav < display: flex; font-size: 15px; font-weight: 500; text-transform: uppercase; >.nav__link < color: #fff; padding: 0 10px; >.nav__link:hover < color: #ffffff; background-color: #0d7711; border-radius: 10px; >/* About */ .about < background-color: #3ebb46; width: 100%; height: 100vh; padding: 60px 0; color: #fff; font-size: 20px; >.about__title < background-color: #61c467; text-align: center; border-radius: 10px; >.about__text < text-align: justify; >.about__link < font-size: 21px; font-weight: 700; color: #6868d8; text-decoration: wavy; padding:0 2px 0 2px; >.about__link:hover < text-decoration: none; color: #3ebb46; background-color: #fff; border-radius: 5px; transition: .1s ease-in; >/* Servives */ .services

              
 
 
CottageKarelia
  
 
 
 
 
 
Гостевые дома и коттеджи Карелии
 
Простой выбор для Вашего отдыха!
 
 
 
 
 
 
О деятельности компании
 
 
 
Наш сайт является крупнейшим каталогом гостевых домов и коттеджей в Карелии, на котором собрано более 1000 позиций. Здесь Вы сможете найти любой дом, соответствующий всем Вашим потребностям. Благодаря удобной форме поиска, Вы наиболее полно сможете охарактеризовать, что именно Вам необходимо, после чего, Вам будут представлены наиболее подходящие дома. Когда Вы определитесь с выбором дома, Вам будет предложено забронировать его, после чего и начнется Ваш отдых! Кроме того, мы с радостью предлагаем гостям Карелии различные туры, созданные для абсолютно любой категории людей.
 
Наши менеджеры свяжутся с Вами и узнают все Ваши пожелания, после чего они сформируют Вам тур: определят наиболее предпочтительные и удобные варианты проезда, сообщат о дополнительных возможностях на территории выбранного места или тура, посоветуют достопримечательности Карелии, которые можно будет посетить неподалеку от выбранного дома, предложат Вам трансфер с вокзала к гостевому дому или коттеджу и обратно. Иными словами, за Вас сделают все и обеспечат Вам лучший отдых на земле в райском уголке, по имени Карелия!
 
 
 
 
 
 
Дополнительные услуги
 
 
 
  

Источник

Как запускать CSS-анимацию при прокрутке страницы

В этом пошаговом руководстве будет рассмотрено создание CSS-анимации с нуля и её включение при скролле (прокрутке вверх-вниз) страницы, когда HTML-элемент находится в поле зрения – видимой части окна, с помощью Intersection Observer API.

Настройка CSS-анимации с помощью ключевых кадров

Начнем с создания CSS-анимации, которая определяется ключевыми кадрами @keyframes .

Анимацию можно назвать как угодно, пусть будет wipe-enter . Здесь HTML-элемент будет увеличиваться в ширину, а затем в высоту.

После того, как определены ключевые кадры, можно использовать анимацию для элемента, установив свойству animation-name название ключевых кадров: wipe-enter . Кроме этого необходимо установить animation-duration – продолжительность анимации и animation-iteration-count – счетчик итераций, указывающий, сколько раз анимация должна воспроизводиться, например – бесконечно.

@media (prefers-reduced-motion: no-preference) < .square < animation-name: wipe-enter; animation-duration: 1s; animation-iteration-count: infinite; >>

CSS-класс .square пусть будет заключён в медиа-запрос prefers-reduce-motion: no-preference . Это обеспечит запуск анимации только в том случае, если пользователь не ограничил её и не включил параметр «уменьшить движение» в своей операционной системе.

В этом примере будет анимирован HTML-элемент квадратной формы:

Для CSS-анимации можно использовать сокращённое написание свойства animation , например:

@media (prefers-reduced-motion: no-preference) < .square < animation: wipe-enter 1s infinite; >>

Управление анимацией с помощью CSS-класса

Допустим, не нужно, чтобы анимация воспроизводилась сразу. Воспроизведением анимации можно управлять, добавляя HTML-элементу CSS-класс переключатель только анимации, который не используется для остальной стилизации элемента.

.square < width: 200px; height: 200px; background: #e62a52; // и т.д. >@media (prefers-reduced-motion: no-preference) < .square-animation < animation: wipe-enter 1s 1; >>

CSS-анимация будет воспроизводиться, когда HTML-элементу будет добавлен CSS-класс .square-animation :

В этом примере CSS-анимация воспроизводится не каждый раз при нажатии на кнопку, а только тогда, когда HTML-элементу будет добавлен CSS-класс .square-animation .

Несмотря на то, что анимация должна показывать появление элемента, элемент отображается и до добавления класса .square-animation . Это сделано для того, чтобы при первой загрузке элемент был виден пользователю, даже если JavaScript заблокирован или не работает.

Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)

В примере выше была реализована CSS-анимация, которая запускается при добавлении HTML-элементу CSS-класса. Вместо перехвата события нажатия кнопки, для добавления и удаления CSS-класса можно использовать несколько вариантов обнаружения состояния, когда элемент при скролле появляется в видимой части окна.

Вот три способа определить, когда элемент находится в видимой области окна:

1. Использовать Intersection Observer API
2. Измерять смещение элемента при скролле страницы
3. Использовать стороннюю JavaScript-библиотеку, которая реализует №1 или №2

Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.

API-интерфейс Intersection Observer позволяет отслеживать момент пересечения одного элемента с другим, и сообщает, когда это происходит. Этот способ идеально подходит для запуска CSS-анимации при скролле страницы. Всё, что нужно знать – когда HTML-элемент пересекается с окном просмотра. Если он пересекается, значит – находится в видимой области окна и в этот момент надо запустить CSS-анимацию.

Intersection Observer API можно рассматривать, как обычный слушатель событий, но с некоторыми дополнительными опциями. Вместо того, чтобы прикреплять прослушивание событий к HTML-элементу, надо заставить наблюдателя отслеживать элемент и его положение на странице.

Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:

// Создать наблюдателя const observer = new IntersectionObserver(entries => < // Заполним метод обратного вызова позже. >); // Сообщить наблюдателю, какие элементы следует отслеживать observer.observe(document.querySelector('.square'));

По умолчанию корневым элементом, который будет проверяться на пересечение, является окно браузера, поэтому наблюдателю нужно только сообщить об анимируемом HTML-элементе.

Когда функция обратного вызова (callback) запускается, она возвращает массив записей из целевых (target) элементов, которые были запрошены, а также некоторую дополнительную информацию о них. В функцию всегда будет возвращаться массив, даже если наблюдение ведётся только за одним элементом, как здесь.

В функции обратного вызова можно перебрать массив записей, чтобы указать, что с ними нужно сделать. Каждая запись имеет свойство isIntersecting , которое может быть true или false . Если оно возвращает true , это означает, что элемент находится в видимой области окна (viewport).

Собираем всё вместе. Обратите внимание, что entry – это объект, предоставленный наблюдателем, а entry.target – это фактический элемент, за которым который ведется наблюдение, поэтому именно ему нужно добавить CSS-класс для запуска анимации.

const observer = new IntersectionObserver(entries => < // перебор записей entries.forEach(entry => < // если элемент появился if (entry.isIntersecting) < // добавить ему CSS-класс entry.target.classList.add('square-animation'); >>); >); observer.observe(document.querySelector('.square'));

Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.

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

Если элемент при анимации изменяет размер или положение, браузеру может быть сложно решить, находится ли элемент в данный момент в области просмотра или нет. Лучше всего поместить анимируемый элемент в контейнер, который не изменяет размер или положение и использовать его для наблюдения за скролллом.

Теперь надо наблюдать за HTML-элементом c CSS-классом square-wrapper а класс для анимации применять к элементу с классом square , как и прежде. Когда элемент-оболочка находится за пределами видимой области, нужно удалять CSS-класс у элемента .square , чтобы анимация перезапускалась каждый раз, когда элемент появляется в окне при скролле.

const observer = new IntersectionObserver(entries => < entries.forEach(entry => < const square = entry.target.querySelector('.square'); if (entry.isIntersecting) < square.classList.add('square-animation'); return; // если класс добавлен, продолжать уже не надо >// перемещение завершено, теперь надо удалить класс square.classList.remove('square-animation'); >); >); observer.observe(document.querySelector('.square-wrapper'));

Чтобы элемент-оболочку было видно, для примера, ему добавлена пунктирная рамка. Попробуйте прокрутить вверх и вниз документ в окне ниже:

Теперь – порядок! Добавляя и удаляя CSS-класс каждый раз, когда при скролле страницы HTML-элемент входит в область просмотра, запускается CSS-анимация.

Запуск CSS-transition при скролле

Если для анимации используется только один шаг и не требуется применение @keyframes , например, достаточно изменения прозрачности HTML-элемента от 0 до 1, можно использовать CSS-transition вместо CSS-animation.

Метод по сути тот же. Вместо определения ключевых кадров ( @keyframes ) для CSS-класса анимации указаны свойства для transition .

.square < width: 200px; height: 200px; background: #e62a52; border-radius: 8px; opacity: 0; transform: scale(1.2); >@media (prefers-reduced-motion: no-preference) < .square < transition: opacity 1.5s ease, transform 1.5s ease; >> .square-transition

Заставим HTML-элемент появляться, когда он перемещается в видимую область просмотра. Для этого в момент появления в окне при скролле ему надо добавить CSS-класс square-transition . Так пользователь, у которого заблокирован или не загружается JavaScript, должен всё-равно увидеть HTML-элемент в его окончательном состоянии.

Это особенно важно, поскольку анимация начинается с opacity: 0 . Если бы не было настройки CSS-класса square-transition и JavaScript не работал, пользователь вообще не увидел бы HTML-элемент! Но если эффект перехода заключается в том, чтобы что-то исчезло, наверное, это не понадобится делать.

При первом запуске JavaScript нужно удалить CSS-класс, чтобы затем, его можно было добавить обратно, когда действительно нужно запустить transition . Это должно быть сделано вне метода обработки наблюдения за скроллом, желательно в начале JavaScript. Вот полный код:

// Удалить CSS-класс square-transition const square = document.querySelector('.square'); square.classList.remove('square-transition'); // Добавить наблюдение за появлением элемента const observer = new IntersectionObserver(entries => < entries.forEach(entry => < if (entry.isIntersecting) < square.classList.add('square-transition'); return; >square.classList.remove('square-transition'); >); >); observer.observe(document.querySelector('.square-wrapper'));

В этом примере CSS-transition запускается, когда элемент-оболочка при скролле появляется в окне. Если Javascript не запустился, элемент всё-равно будет виден.

Как видите, эту технику можно расширять разными способами, чтобы создать множество эффектов анимации.

Источник