SVG黑科技微信排版『左右视差滚动』模板代码
模板效果
模板代码
<section style="display: flex;overflow-x: scroll;overflow-y: hidden;width: 100%;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory;perspective: 1px;">
<!-- 第一页 -->
<section style="flex: 0 0 auto;width: 100%;height: 100%;background-color: #000;scroll-snap-align: center;">
<section style="height: 0;">
<section style="transform: translateZ(0.9px) scale(0.1);">
<svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOXEX09cMwn1sDHUL46mYFiceLnlsFWuISLgDM2FlyvlN5NCEHCjrTaHQ/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
</section>
</section>
<section style="height: 0;">
<section style="transform: translateZ(0.5px) scale(0.5);">
<svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOKicZr1DRicT9SKaHXHXrhE1MI6jEN8pusO90BY2fVsg1H8Bl5Ju5Zseg/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
</section>
</section>
<section>
<section style="transform: translateZ(0.2px) scale(0.8);">
<svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VORUzibngWbkAgMiaW3OpycUnbg6huCBSib9uicMb5ehCrR4XxVWDIMV4CuA/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
</section>
</section>
</section>
<!-- 第二页 -->
<section style="flex: 0 0 auto;width: 100%;height: 100%;background-color: #000;scroll-snap-align: center;">
<section style="height: 0;">
<section style="transform: translateZ(0.8px) scale(0.2);">
<svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOXEX09cMwn1sDHUL46mYFiceLnlsFWuISLgDM2FlyvlN5NCEHCjrTaHQ/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
</section>
</section>
<section style="height: 0;">
<section style="transform: translateZ(0.4px) scale(0.6);">
<svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOKicZr1DRicT9SKaHXHXrhE1MI6jEN8pusO90BY2fVsg1H8Bl5Ju5Zseg/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
</section>
</section>
<section>
<section style="transform: translateZ(0.8px) scale(0.2);">
<svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VORUzibngWbkAgMiaW3OpycUnbg6huCBSib9uicMb5ehCrR4XxVWDIMV4CuA/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
</section>
</section>
</section>
<!-- 第三页 -->
<section style="flex: 0 0 auto;width: 100%;height: 100%;background-color: #000;scroll-snap-align: center;">
<section style="height: 0;">
<section style="transform: translateZ(0.9px) scale(0.1);">
<svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOXEX09cMwn1sDHUL46mYFiceLnlsFWuISLgDM2FlyvlN5NCEHCjrTaHQ/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
</section>
</section>
<section style="height: 0;">
<section style="transform: translateZ(0.5px) scale(0.5);">
<svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOKicZr1DRicT9SKaHXHXrhE1MI6jEN8pusO90BY2fVsg1H8Bl5Ju5Zseg/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
</section>
</section>
<section>
<section style="transform: translateZ(0.1px) scale(0.9);">
<svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VORUzibngWbkAgMiaW3OpycUnbg6huCBSib9uicMb5ehCrR4XxVWDIMV4CuA/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
</section>
</section>
</section>
</section>