Эффект показа страницы через определенную фигуру

Question

Есть простая страничка.

<header>header bla</header>
<div class="wrapper">
  <ul>
    <li>sfs</li>
    <li>sdff</li>
    <li>sfsdf</li>
    <li>sdfds</li>
  </ul>
</div>
<footer>
 <h1>copyright something</h1>
</footer>

Как написать эффект типо как на гифке.Как только загрузилась страница показать ее через определенную фигуру.

С начало будет другой экран и другой прелоадер как только страница прогрузилось надо будет показать темный экран и такой эффект (показ страницы через фигуру) потом его увеличивать постепенно до того момента как оно полностью исчезнет и будет виден только страница целиком.

Answer 1

let mask = document.getElementById("mask");
document.body.onload = () => {
  mask.style.transform = "scale(20)";
  setTimeout(() => {
    mask.parentNode.removeChild(mask)
  }, 2500);
}

#content {
  background: lightblue;
}

#mask {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
  transform: scale(1);
  transition: transform 2.5s .3s;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("data:image/png;base64,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");
}

<div id="content">
  <h5>Что такое Lorem Ipsum?</h5>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
  Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах
  и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
<div id="mask"></div>

Answer 2

Можно установить css-маску (синтаксис как у свойства background) и анимировать её размер. Минус - не поддерживается в Internet Explorer.

@keyframes scaleMask {
  from {
    -webkit-mask-size: 10vw auto;
  }
  to {
    -webkit-mask-size: 1000vw auto;
  }
}

body {
  margin: 0;
}

.content {
  min-height: 100vh;
  background: linear-gradient(#cda, #acd);
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjguODY3IiBoZWlnaHQ9IjI3Ljc2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPHBhdGggZD0ibTE0LjQzNCAwIDQuNzU3IDguNzI0IDkuNjc2IDEuODc5LTYuNzM1IDcuMjcxIDEuMjIyIDkuODg2LTguOTItNC4yMzEtOC45MjEgNC4yMzEgMS4yMjItOS44ODYtNi43MzUtNy4yNzEgOS42NzYtMS44NzkgNC43NTgtOC43MjQiLz4NCjwvc3ZnPg0K) no-repeat center/ 10vw auto;
  animation: scaleMask 4s linear forwards 1s;
}

<div class="content">
  <p>asdb askgd jhgasdkj haksdjgas kjdghjas dghjasgd asgdhjgasdhjgadghjas gdhasgd jhasgdhjagsd aslidhasgh dasg d hauisdy asyd ahsdkljh asdkjg auishdkjahsduyas duakjsdhauisdy asdakjsdhkjasdyh auisydkjasbhdkljash dauisydkjhaskj dyasuidyausdy paui</p>
</div>

БЛОГ НА HUSL

Эффект показа страницы через определенную фигуру

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