Как можно улучшить переход страницы изображения маски? - PullRequest
Новая
       78

Как можно улучшить переход страницы изображения маски?

2 голосов
/ 13 июля 2020

Я пытаюсь добиться того же эффекта перехода страницы, что и на этом веб-сайте http://56k.studiovoila.com/

Итак, после нескольких поисков я нашел этот учебник https://tympanus.net/Tutorials/CSSMaskTransition/, Я взял PNG, который они использовали в демонстрации 1, и добавил его в свой проект с правильным кодом.

Вы можете увидеть здесь пример моего кода. (эффект расплывчатый, но эффект можно угадать) 

const btnClick = document.getElementById("btn-click");
const body = document.querySelector("body");

    btnClick.addEventListener("click",(e)=>{
  e.preventDefault();
  body.classList.remove("reveal");
  body.classList.add("disapear");
});

body.addEventListener("animationend",()=>{
  body.classList.remove("disapear");
  body.classList.add("reveal");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: static;
  height: 100vh;
  width: 100vw;
  -webkit-mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
  mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
  -webkit-mask-size: 7100% 100%;
  mask-size: 7100% 100%;      
  background: yellow;
}

body.disapear {      
  animation: mask-play-disapear 2s steps(70) forwards;
}
 body.reveal {
    animation: mask-play-reveal 1.4s steps(70) forwards;
  }

@keyframes mask-play-disapear {
  from {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }
  to {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
  }
}
@keyframes mask-play-reveal {
  0% {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
  }
  100% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }

  
}

#div1 {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
}
<body>
  <div id="div1">
    <a href="#" id="btn-click">click me</a>
  </div>
</body>

ПРОБЛЕМЫ:

1. Кажется, что ошибка, когда пользователь видит переход с firefox, но только с компьютера Ma c (Catalina 10.15.5). Вы можете увидеть эту ошибку на веб-сайте, который я создал по адресу https://abiesco.ch

2. Поскольку это PNG, я не могу легко изменить формы во время анимации, это не очень гибко. У меня нет исходного файла (фотошоп или после эффекта).

МОЙ ВОПРОС:

Можно ли использовать морфинг SVG для получения того же эффекта? Я знаю, что мы можем использовать аниме. js с учебник по тимпана и DesignCourse youtubeVideo . Но я действительно хочу сохранить воду - органические c формы, которые заполняют и покидают экран.

Я уже пробовал плагин bodymovin для постэффекта, который позволяет экспортировать постэффект анимации в json файл, который может анимировать lott ie. js. Но фильтр смещения турбулентности (для эффекта воды) плагином не поддерживается.

1 Ответ

1 голос
/ 22 июля 2020

Хорошо, я нашел лучший способ анимировать переход между страницами.

Я могу использовать WebGL.

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

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

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

...