最近、この拡散された WeChat 公式アカウントの事例をどこでも見ることができます。
https://mp.weixin.qq.com/s/ZYfIqwPNbHVepSyJsLFk-w
これがどのように実現されたかについて話しましょう。言ってしまえば、SVG のアニメーション効果とクリエイティブを利用して、このようなクールな効果を実現しています。
関連するのは、opacityとheightの 2 つのアニメーション要素の変化だけです。
WeChat のテキストコンテンツは本質的には HTML コードの一部です。まずはデモを見てみましょう。
これは通常の画像で、ただし画像のみでレイアウトされています。
<!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>
次に、調整後のコードです。
…
<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>
ただし、問題が発生する可能性があります。それは、異なる画面サイズでは高さが異なるため、高さを一致させる必要があるためです。この小さな調整を行うために、paddingを使用することができます。以下のようになります。
<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>
要約すると、2 つの重要なポイントは次のとおりです。
- 画像の外側のボックス（img-content）に
height:0の属性を追加しますが、overflow:hiddenを追加しないことが重要です。これは、ボックス内のコンテンツが高さを超えた場合に正常に表示されるかどうかに影響します。 - 最も外側のボックス（content）の高さは完全に
svgの高さによって支えられます。したがって、第 1 のポイントと組み合わせると、目的を達成するためにsvgの高さを制御し、必要なコンテンツを表示することができます。
SVG アニメーションについては、別の記事で説明します。
ここをクリックしてSVG の高さ拡張の例を表示してください。