Как мне замаскировать элемент анимированным оверлеем?

Question

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

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

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

• Переключение иерархии элементов / Z-индекса (я уверен проблема кроется где-то здесь)
• Попытка различных преобразований
• Возникновение с максимальной шириной (Успешно, но мне нужно свойство происхождения преобразования)

Пример -

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>

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

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

Спасибо!

Answer 1

Используйте вместо этого clip-path анимацию, и вы можете упростить свой код, установив lo go в качестве фона 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>

Answer 2

Я бы сделал что-то вроде:

$('.transition-cta').on("click", function() {
  $('.transition-wrapper').toggleClass('opened');
  $('.transition-content').animate({ width: 'toggle' }, 800);
});

body {
  background: lightblue;
}

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

.transition-content {
  background-color: #1f1f1f;
  display: none;
  overflow: hidden;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

.transition-cta {
  position: relative;
  text-decoration: underline;
  z-index: 999;
}

.transition-wrapper.opened .transition-cta {
  color: #fff;
}

.transition-content__inner {
  width: 100vw;
}

.transition-content__inner img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transition-wrapper">
  <div class="transition-cta">Trigger Transition</div>
  <div class="content">
    <h1>Some Content</h1>
  </div>
  <div class="transition-content">
    <div class="transition-content__inner">
      <img src="https://i.imgur.com/6um9G9h.png"/>
    </div>
  </div>
</div>