Recently, everywhere you can see this WeChat public account case that has gone viral.
https://mp.weixin.qq.com/s/ZYfIqwPNbHVepSyJsLFk-w
Let's talk about how it was achieved. It's not complicated, mainly using SVG animation effects + creativity to achieve such a cool effect.
There are only two animation elements involved, opacity and height.
WeChat graphic content is essentially a piece of HTML code. Let's start with a demo.
This is a normal image, but it is formatted with all images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG Demo1</title>
<style>
* {
margin: 0 auto;
}
.img-block {
width: 100%;
}
.content img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="content">
<div class="img-block">
<img style="width: 100%;" src="img/1.jpg" alt="" />
</div>
<div class="img-block">
<div style="display: block;"></div>
<img style="width: 100%;" src="img/2.jpg" alt="" />
</div>
<div class="img-block">
<img style="width: 100%;" src="img/3.jpg" alt="" />
</div>
</div>
</body>
</html>
Adjusted to:
...
<div class="content">
<div class="img-content">
<div class="img-block">
...
</div>
...
</div>
<div class="svg-content">
<svg
height="350px"
width="100%"
opacity="0"
style="background-size: contain; background-repeat: no-repeat; width: 100%; height: 375px;background-image:url(img/demo-1.gif);background-size:100%,100%;"
version="1.1"
viewBox="0 0 339 350"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMin meet"
calcMode="spline"
>
<animate
attributeName="opacity"
begin="click"
dur="1s"
fill="freeze"
restart="never"
keyTimes="0;0.0001;1"
values="0;1;1"
/>
<animate
attributeName="height"
fill="freeze"
restart="never"
calcMode="spline"
keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
keyTimes="0;0.0035;1"
values="375;1640;1640"
dur="1200s"
begin="click + 2.75s"
></animate>
</svg>
</div>
</div>
But there is a problem, the height is different on different screens, so we need to ensure consistent height. This can be achieved by using padding, as shown below:
<div class="img-content">
<div class="img-block" style="padding-top: 500px; background:url(img/1.jpg); background-size: contain; background-position: center; background-repeat: no-repeat;">
<!-- <img style="width: 100%;" src="img/1.jpg" alt="" /> -->
</div>
<div class="img-block" style="padding-top: 500px; background:url(img/2.jpg); background-size: contain; background-position: center; background-repeat: no-repeat;">
<!-- <img style="width: 100%;" src="img/2.jpg" alt="" /> -->
</div>
<div class="img-block" style="padding-top: 500px; background:url(img/3.jpg); background-size: contain; background-position: center; background-repeat: no-repeat;">
<!-- <img style="width: 100%;" src="img/3.jpg" alt="" /> -->
</div>
</div>
Two key points to summarize:
- The outer box of the image (img-content) adds the attribute
height: 0, but does not addoverflow: hidden. This is crucial and affects whether the content inside the box can be displayed properly if it exceeds the height. - The height of the outermost box (content) is completely supported by the height of the
svg, which, combined with the first point, achieves our goal of controlling the height of thesvgto display the desired content.
As for SVG animation, it will be discussed in another article.
Click here to view: SVG height extension example