我正在尝试实现与该网站http://56k.studiovoila.com/相同的页面过渡效果
因此,经过几次搜索,我找到了本教程https://tympanus.net/Tutorials/CSSMaskTransition/,我将他们在演示1上使用的PNG并用正确的代码添加到我的项目中。
您可以在这里看到我的代码示例。 (效果是模糊的,但您可以猜出效果)
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。。当用户看到仅使用Mac计算机(Catalina 10.15.5)使用firefox进行的转换时,这似乎是一个错误。您可以在我在https://abiesco.ch
创建的网站上看到此错误。2。。由于它是PNG,因此在动画制作过程中我不能轻易更改形状,因此灵活性不高。我没有源文件(Photoshop或After Effects)。
我的问题:
是否可以使用SVG变形来获得相同的效果?我知道我们可以将anime.js与tympanus tutorial和DesignCourse youtubeVideo一起使用。但是我真的很想保留水-充满并离开屏幕的有机形状。
我已经尝试了bodymovin plugin的后效应,该效应允许将后效应动画导出到lottie.js可以进行动画处理的json文件中。但是插件不支持湍流位移过滤器(用于水效果)。