SVG黑科技排版 | 点击GIF首图消失并展开长图
发布于 3 年前 作者 qiang61 325 次浏览 来自 分享

案例展示

点击查看实际案例

案例代码

提示：有【】都需要根据里面的内容进行替换，比如【图片宽度】，实际图片宽度是500，整个就替换成500。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
    <title>懂点君：SVG黑科技排版 | 点击GIF首图消失并展开长图</title>
    <style type="text/css">*{margin:0;padding:0;}.rich_media_content{overflow:hidden;color:#333;font-size:17px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-align:justify;position:relative;z-index:0;}.rich_media_content *{max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important;}</style>
</head>
<body>
    <div class="rich_media_content" style="visibility: visible;">
        <section style="overflow: hidden;" data-author="dongdianjun">
            <!-- 长图的内容 -->
            <section style="height: 0;" data-author="dongdianjun">
                <section style="font-size: 0;line-height: 0;">
                    <svg style="display: inline-block;width: 100%;background: url(【图片地址】) center center no-repeat;background-size: 100% 100%;vertical-align: top;weixin: dong_dian_jun;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 【图片宽度】 【图片高度】"></svg> 
                    <svg style="display: inline-block;width: 100%;background: url(【图片地址】) center center no-repeat;background-size: 100% 100%;vertical-align: top;weixin: dong_dian_jun;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 【图片宽度 【图片高度】"></svg> 
                    <svg style="display: inline-block;width: 100%;background: url(【图片地址】) center center no-repeat;background-size: 100% 100%;vertical-align: top;weixin: dong_dian_jun;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 【图片宽度】 【图片高度】"></svg> 
                    <svg style="display: inline-block;width: 100%;background: url(【图片地址】) center center no-repeat;background-size: 100% 100%;vertical-align: top;weixin: dong_dian_jun;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 【图片宽度】 【图片高度】"></svg> 
                </section>
            </section>
            <!-- 展开区域 -->
            <svg data-author="dongdianjun" style="display: inline-block;max-width: none!important;width: 100%;background: #fff url(【图片地址】) center center no-repeat;background-size: 100% 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 【图片宽度】 【图片高度】">
                <!-- 展开高度的动画 -->
                <animate attributeName="width" values="100%;【展开的百分比值%】;【展开的百分比值%】" keyTimes="0;.02;1" dur="1000s" begin="click+1.05s" fill="freeze" restart="never"></animate>
                <!-- 淡出的动画 -->
                <animate attributeName="opacity" values="1;0;0" keyTimes="0;.001;1" dur="1000s" begin="click" fill="freeze" restart="never"></animate>
                <!-- 隐藏的动画 -->
                <set attributeName="visibility" from="visible" to="hidden" dur="0.3s" begin="click+1.05s" fill="freeze" restart="never"></set>
                <g data-name="触发区域">
                    <set attributeName="visibility" from="visible" to="hidden" dur="0.3s" begin="click" fill="freeze" restart="never"></set>
                    <rect x="0" y="0" width="【图片宽度】" height="【图片高度】" opacity="0" fill="#000" style="pointer-events: visible;">
                        <animate attributeName="x" begin="click" dur="0.1s" values="100000" fill="freeze" restart="never"></animate>
                    </rect>
                </g>
            </svg>
        </section>
    </div>
    <!-- 46552 -->
</body>
</html>

案例分析

  • 先把SVG效果拆分一下，第一步点击gif首图淡出消失，第二步展开无缝长图；
  • gif首图淡出消失：一看到“淡出”就能联想到是通过animate动画控制opacity透明度的属性值从1变为0，从而实现淡出的效果，注意控制动画的时间；
  • 展开无缝长图：展开无缝长图也是比较常见的排版效果，难点在于如何精确计算展开的百分比数值，展开太多文章底部就会留白，展开少了文章内容就会显示不全；当展开区域的SVG宽度与无缝长图的宽度一样时，展开的百分比数值 = 无缝长图的高度 / SVG的高度 * 100；
  • 触发区域要做防止重复点击触发，通过visibility属性和x属性来实现，visibility属性主要是隐藏触发区域，x属性主要是改变触发区域的位置。
回到顶部