SVG互动排版『点击向上滑动展示』模板代码
发布于 4 年前 作者 xiegang 3163 次浏览 来自 分享

第一步：创建可视区域

模板代码

<section style="overflow: hidden;width: 345px;height: 700px;margin: 0 auto;background-color: #39f;" data-info="公众号：懂点君">
    
</section>

代码原理

  • overflow：hidden：表示溢出/超出当前设置的区域将会被隐藏起来，用户无法查看到，比如在可视区域里面放置一个高度1000px的图片，它将会超出300px，超出的300px会被隐藏起来，我们无法看到；
  • 创建宽度345px，高度700px的可视区域；
  • margin: 0 auto表示水平方向垂直居中；宽度固定时，当外部区域大于345px的时候，可视区域水平居中展示；
  • 设置背景颜色的目的便于写代码的时候调试；

第二步：点击控制SVG高度

模板代码

<section style="overflow: hidden;width: 345px;height: 700px;margin: 0 auto;background-color: #39f;line-height:0;font-size: 0;" data-info="公众号：懂点君">
    <svg width="100%" height="700" style="width: 100%;background-size: 100%;background-repeat: no-repeat;background-position: center center;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSK9gedxiarCYro8ybMyICOZvNj0KTNWIiaoxJCyoEGvymSYRYZq7xOG1vkVlUibjGNGa2fgIxVxx2kg/0?wx_fmt=png);background-color: #fff;" xmlns="http://www.w3.org/2000/svg">
        <animate fill="freeze" attributeName="height" begin="click" dur="2000" values="700;0;0" keySplines="0.5 0.3 0.2 1.0;0.5 0.3 0.2 1.0" calcMode="spline" restart="never" keyTimes="0;0.0013;1"></animate>
    </svg>
</section>

代码原理

  • 当SVG高度为0时，SVG默认的行高导致出现间距，设置行高和字体大小的属性值为0，可以消除该影响；
  • SVG的宽高大小与可视区域保持一致即可；
  • 点击的时候，执行animate动画，让高度属性从700变为0；

第三步：隐藏区域放置内容

模板代码

<section style="overflow: hidden;width: 345px;height: 700px;margin: 0 auto;background-color: #39f;line-height:0;font-size: 0;" data-info="公众号：懂点君">
    <svg width="100%" height="700" style="width: 100%;background-size: 100%;background-repeat: no-repeat;background-position: center center;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSK9gedxiarCYro8ybMyICOZvNj0KTNWIiaoxJCyoEGvymSYRYZq7xOG1vkVlUibjGNGa2fgIxVxx2kg/0?wx_fmt=png);background-color: #fff;" xmlns="http://www.w3.org/2000/svg">
        <animate fill="freeze" attributeName="height" begin="click" dur="2000" values="700;0;0" keySplines="0.5 0.3 0.2 1.0;0.5 0.3 0.2 1.0" calcMode="spline" restart="never" keyTimes="0;0.0013;1"></animate>
    </svg>
    <!-- 隐藏区域的内容可以是图片、视频 -->
    <svg width="100%" height="700" style="width: 100%;background-size: 100%;background-repeat: no-repeat;background-position: center center;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSK9gedxiarCYro8ybMyICOZkWH9J4hAaYv670I9D1Usku8CmuJWxoRb5OocQS142mR5iaDrAZOEP0g/0?wx_fmt=png);background-color: #fff;" xmlns="http://www.w3.org/2000/svg">
    </svg>
</section>

代码原理

  • 可视区域的高度为700px，内容高度为第一个SVG高度和第二个SVG高度的和为1400，也就是说第一个显示，第二个隐藏，无法同时展示；
  • 隐藏区域放置的内容可以是视频、图片、图文都可以，根据实际情况而定；

模板效果

回到顶部