如何使用SVG路径创建窗帘效果？

Question

我从这里看到的页面加载幕效果中受益匪浅：https://www.epicurrence.com

以下是屏幕录像：

我很想学习如何做类似的事情。谁能帮助我了解如何解决此问题？他们的图书馆是人们使用的还是全部定制的？有什么想法吗？

谢谢

Answer 1

使用SVG进行复制非常简单。

我们要做的就是等待单击，然后在三种路径形状之间设置动画：

1. 矩形，底部为半圆形，不在页面上
2. 矩形，底部接近页面顶部
3. 页面顶部的高度为零的矩形。

动画结束后，我们将SVG隐藏起来以显示其后面的页面。

演示（单击黑色部分开始动画）

var curtain = document.getElementById("curtain");

curtain.addEventListener("click", function(evt) {
  // Call beginElement() on the <animate> element to start the animation running
  document.getElementById("curtainAnimate").beginElement();
});

/* Make the SVG fill the screen */
svg {
  display: block;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
}

<h1>Test page</h1>

<p>Lorem ipsum dolor sit amet, an possit conceptam per. Et lorem qualisque deterruisset mei. Et doctus dissentias vim. Sit inciderint eloquentiam eu, vel diceret veritus patrioque eu, per in congue causae salutatus.</p>

<p>Posse iriure ut nam, tempor veritus vis ex. Ex viris legendos salutatus eos, eam primis meliore signiferumque an. Graeci civibus similique ius ad. Diam ponderum laboramus per ex, autem denique probatus mei in. Vel in saepe mucius tamquam, pri ex iusto graeco comprehensam. Usu deserunt mediocrem et. Quo iisque ullamcorper cu.</p>

<p>Ex vis vero signiferumque, eum quem lobortis an. Eu vidisse erroribus intellegam sed, velit vituperata in vis. Ad omnis mundi dicam eam, ut mea malorum expetendis voluptatum, mea agam option no. Ei pro vero mediocrem. Nam ea velit facete, suas graeci omnesque cum et. At vix invidunt neglegentur, porro ullum numquam id vim.</p>

<p>Sale fabulas sed no, at mel ullum facilis omittantur. In nam zril vitae graece, vis id facete tamquam. Cu discere numquam percipitur mea. Duo nominati evertitur ex, meis impedit forensibus mei ad.</p>

<p>Veniam mucius at mei. Vel ad aliquip accusamus posidonium, his aperiri nonumes cu. Ei duo deleniti repudiare adipiscing, agam impedit per ut. No dicat utinam homero ius, ut ius impedit posidonium reprehendunt.</p>

<svg id="curtain" viewBox="0 0 100 100" preserveAspectRatio="none">
  <path fill="#333" d="M 100,0 L 0,0 L 0,130 c 0,-17, 23,-30, 50,-30 c 27,0, 50,13, 50,30 Z">
    <animate id="curtainAnimate" attributeName="d"
             begin="indefinite" dur="1s" fill="freeze"
             keyTimes="0; 0.7; 1"
             values="M 100,0 L 0,0 L 0,130 c 0,-17, 23,-30, 50,-30 c 27,0, 50,13, 50,30 Z;
                     M 100,0 L 0,0 L 0,50  c 0,-17, 23,-30, 50,-30 c 27,0, 50,13, 50,30 Z;
                     M 100,0 L 0,0 L 0,0   c 0,0, 50,0, 50,0       c 0,0, 50,0, 50,0 Z"/>
  </path>
  <!-- Hides the SVG when the path animation ends -->
  <set begin="curtainAnimate.end" attributeType="CSS" attributeName="display" to="none"/>
</svg>