Как мне замаскировать элемент с помощью анимированного overlay?

Question

Я пытаюсь выполнить некоторые transitions между страницами для проекта, над которым я работаю.
У меня есть анимированный overlay, который появляется на экране, когда пользователь перемещается по сайту с помощью Barba, но у меня возникла проблема.

Я хочу, чтобы логотип располагался по центру страницы, которая вставляется вместе с наложением, но мне нужно, чтобы он располагался отдельно от наложения, поскольку любое преобразование наложения также повлияет на логотип. (Я хочу, чтобы логотип был замаскирован с помощью элемента наложения)

Что я пробовал:

Переключение иерархии элементов с помощью / Z-индекса (я уверен, что проблема где-то здесь)
Пробовал разные трансформации
Экспериментировал с максимальной шириной (имел некоторый успех, но мне нужно свойство transform origin)

Пример:

let transitionOpen = false;

$('.transition-cta').on("click", function() {
  if (transitionOpen === false) {
    $('.transition-background').css("transform", "scaleX(1)");
    $(this).css("color", "white");
    transitionOpen = true;
  } else {
    $('.transition-background').css("transform", "scaleX(0)");
    $(this).css("color", "black");
    transitionOpen = false;
  }
});

body {
  background-color: lightblue;
}

.someContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transition-wrapper {
  overflow: hidden;
}

.transition-background {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transition: 0.7s ease-in-out;
  background-color: #1f1f1f;
  transform: scaleX(0);
  z-index: 2;
}

.transition-center {
  background-image: url('https://i.imgur.com/6um9G9h.png');
  z-index: 2;
  width: 150px;
  height: 150px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transition-cta {
  text-decoration: underline;
  cursor: pointer;
  z-index: 3;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
  <div class="transition-background"></div>
  <!-- I want to clip this with the transition background -->
  <div title="I only want this to show with the transition overlay" class="transition-center"></div>
</div>

<div class="transition-cta">Trigger Transition</div>

<div class="someContent">
  <h1>Some Content</h1>
</div>

(Глобус должен откатиться вместе с наложением)

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

_{Свободный перевод вопроса How would I mask an element with an animated overlay? от участника @TC Work.}

Answer 1

Вместо этого используйте анимацию clip-path, и вы можете упростить свой код, используя логотип в качестве фона transition-wrapper.

let transitionOpen = false;

$('.transition-cta').on("click", function() {
  $('.transition-wrapper').toggleClass('show');
  if (transitionOpen === false) {
    $(this).css("color", "white");
    transitionOpen = true;
  } else {
    $(this).css("color", "black");
    transitionOpen = false;
  }
});

body {
  background-color: lightblue;
}

.someContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transition-wrapper {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.7s ease-in-out;
  background: url('https://i.imgur.com/6um9G9h.png') center/150px 150px no-repeat;
  background-color: #1f1f1f;
  clip-path: polygon(0 0, 0%  0, 0%   100%, 0 100%);
  z-index: 3;
}

.transition-wrapper.show {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.transition-cta {
  text-decoration: underline;
  cursor: pointer;
  z-index: 3;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
</div>

<div class="transition-cta">Trigger Transition</div>

<div class="someContent">
  <h1>Some Content</h1>
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Как мне замаскировать элемент с помощью анимированного overlay?

Ответы (1 шт):