Смена цвета
шапки по скроллу

Уроки по Тильде

В этом видео я расскажу, как можно поменять цветовую палитру шапки по скроллу

Описание

Посмотреть пример

Материал из видео

Создаём шапку для светлого фона и вешаем на неё класс uc-nav-dark

Шаг 1

Дублируем блок с шапкой ниже, редактируем под темный фон и заменяем класс на uc-nav-light

Шаг 2

В итоге у вас получится 2 шапки. Одна будет появляться, когда фон будет темный, другая, когда он светлый

Шаг 3

На темные блоки вешаем класс uc-dark-section, на светлые uc-light-section

Шаг 4

Ниже создаём блок T123 и добавляем код (Первый блок - темный) Важно!!! Если у вас первый блок на странице имеет светлый фон, то добавьте код из шага 6, вместо этого

Шаг 5 - Первый блок темный

Скрипт


<style>
/*Для темного первого блока*/
    .uc-nav-dark,
    .uc-nav-light {
        position: fixed;
        left: 0%;
        width: 100%;
        top: 0%;
        display: block;
        z-index: 100;
        overflow: hidden;
        visibility: hidden;
    }
    .uc-nav-dark .t396__artboard,
    .uc-nav-light .t396__artboard {
        position: fixed;
        top: 0;
        height: 100vh !important;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
<script>
$(".uc-dark-section").each(function (index) {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: $(this),
      start: "top bottom",
      end: "top top",
      scrub: true
    }
  });
  tl.fromTo(
    ".uc-nav-dark .t396__artboard",
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
    },
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
      ease: "none"
    }
  );
  tl.fromTo(
    ".uc-nav-light .t396__artboard",
    {
      clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
    },
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
      ease: "none"
    },
    0
  );
  let tl2 = gsap.timeline({
    scrollTrigger: {
      trigger: $(this),
      start: "bottom bottom",
      end: "bottom top",
      scrub: true
    }
  });
  tl2.fromTo(
    ".uc-nav-light .t396__artboard",
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
    },
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
      ease: "none"
    }
  );
  tl2.fromTo(
    ".uc-nav-dark .t396__artboard",
    {
      clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
    },
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
      ease: "none"
    },
    0
  );
});
</script>

Ниже создаём блок T123 и добавляем код (Первый блок - светлый) Важно!!! Если у вас первый блок на странице имеет темный фон, то добавьте код из шага 5, вместо этого

Шаг 6 - Первый блок светлый

Скрипт

<style>
/*Для светлого первого блока*/
    .uc-nav-dark,
    .uc-nav-light {
        position: fixed;
        left: 0%;
        width: 100%;
        top: 0%;
        display: block;
        z-index: 100;
        overflow: hidden;
        visibility: hidden;
    }
    .uc-nav-dark .t396__artboard,
    .uc-nav-light .t396__artboard {
        position: fixed;
        top: 0;
        height: 100vh !important;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
<script>
$(".uc-light-section").each(function (index) {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: $(this),
      start: "top bottom",
      end: "top top",
      scrub: true
    }
  });
  tl.fromTo(
    ".uc-nav-light .t396__artboard",
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
    },
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
      ease: "none"
    }
  );
  tl.fromTo(
    ".uc-nav-dark .t396__artboard",
    {
      clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
    },
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
      ease: "none"
    },
    0
  );
  let tl2 = gsap.timeline({
    scrollTrigger: {
      trigger: $(this),
      start: "bottom bottom",
      end: "bottom top",
      scrub: true
    }
  });
  tl2.fromTo(
    ".uc-nav-dark .t396__artboard",
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
    },
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
      ease: "none"
    }
  );
  tl2.fromTo(
    ".uc-nav-light .t396__artboard",
    {
      clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
    },
    {
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
      ease: "none"
    },
    0
  );
});
</script>

Более подробные настройки в видео выше

Не получилось подключить?

Не беда, ты всегда можешь написать мне в Telegram и запросить исходник

Другие уроки

Анимация смены фона

Уроки по Тильде

Анимация и фиксация шапки

Уроки по Тильде

Фоновое видео

Уроки по Тильде