【SVG案例库】SVG公众号排版交互图文案例汇总 |
您所在的位置：网站首页 › svg互动怎么做 › 【SVG案例库】SVG公众号排版交互图文案例汇总 |
|
随着交付项目数量逐渐增多，于是懂点君在交付的项目案例中挑选一些案例，按照SVG排版交互方式进行归类汇总，整理形成SVG案例库，方便大家定制开发和学习SVG交互排版。 单次展开 描述：点击下拉展开无缝长图一次，比较常见的SVG互动排版。 案例1：点击展开无缝长图（相关兼容问题，点击查看）案例2：点击展开无缝长图案例3：点击缩回到顶再下拉展开无缝长图自动展开 描述：图文素材资源（包括代码、图片、视频、音频等）加载完成后，用户无需点击，自动下拉展开。 案例1：自动展开长图与红包封面卡片案例2：自动展开长图与自动播放动图GIF逆向展开 描述：常见的展开方向是向下展开，逆向展开的方向则是向上展开，看起来有“掉落”的感觉。 案例1：逆向掉落下拉展开无缝长图多段展开 描述：图文资源加载完成后，多段连续自动下拉展开；多次点击连续下拉展开，也就是每点击一次就下拉展开一次。 案例1：多段自动展开(eg:GQ红了)与细节动画（相关兼容问题，点击查看一，点击查看二）案例2：多段自动展开(eg:GQ红了)案例3：多次点击连续展开与左右滑动播放音频案例4：多次点击连续展开与播放动图GIF伸缩展开 描述：点击展开按钮，下拉展开长图，点击返回按钮，向上缩回长图。 案例1：点击可伸缩展开与左右滑动图片案例2：多个可伸缩展开与根据选项显示长图展开套展开 描述：点击展开里面嵌套多个点击展开。 案例1：展开套多个展开与竖版视频遮罩案例2：展开套一次展开与左右滑动开门案例3：展开套多个展开与点击播放音乐案例4：展开套多个展开与横版视频遮罩案例5：展开套一次展开与点击播放动图GIF案例6：展开层层连续嵌套展开案例7：点击播放动图GIF与展开嵌套多个展开互动展开 描述：点击下拉展开之前或展开之后会有一系列的排版交互。 案例1：点击下拉展开同时滑动淡入卡片案例2：多轮点击互动与展开无缝长图案例3：点击拍照展开无缝长图案例4：根据选项展开不同的长图（选择伸长）动图展开 描述：点击播放动图GIF完成之后，再下拉展开无缝长图。 案例1：点击播放GIF展开长图案例2：自动轮播与点击播放GIF展开长图案例3：点击播放音乐与GIF展开长图3D视差 描述：多层图片以不同的速度移动，形成立体的滑动效果，带来强悍的视觉体验。 案例1：点击播放动图GIF与全屏3D视差滚动案例2：点击首图向上滑动隐藏与全屏3D视差滚动案例3：全屏3D视差滚动与视频号美化案例4：纵向视差滚动与视频号美化案例5：纵向视差滚动(三层视差)案例6：纵向视差滚动(三层视差)错层滑动 描述：顶层图片与底层图片可以滑动，中间层图片固定不滑动。 案例1：纵向错层滑动与滚动轮播图片案例2：纵向错层滑动与自动播放动图GIF（相关兼容问题，点击查看）案例3：纵向错层滑动与元素动画展示案例4：纵向反向错层滑动模拟互动 描述：模拟APP界面、游戏机、小游戏等SVG互动排版。 案例1：模拟涂色游戏与红包封面美化跳转案例2：模拟拆开明信片案例3：模拟游戏连连看案例4：模拟游戏机互动与点击下拉展开案例5：模拟微信聊天互动与点击下拉展开案例6：模拟乘坐电梯轨迹运动 描述：物体沿着Adobe Illustrator导出的路径移动。 案例1：轨迹运动与点击展开长图案例2：汽车行走与伸缩展开长图案例3：滑雪轨迹运动与雪路绘制案例4：轨迹运动与自动展开长图轨迹描边 描述：沿着Adobe Illustrator导出的路径完成描边动画。 案例1：轨迹描边动画与自动淡入内容案例2：轨迹描边动画与自动展开淡入内容一键变色 描述：一开始图片默认显示黑白色，点击之后一边向上收缩，一边逐渐变成彩色。 案例1：自动展开与全局变色收缩数据报告 描述：在手绘场景画面、数据图表等增加SVG动画（减少使用动图GIF），既能提升图文的加载速度，还能生动形象展示数据报告。 案例1：多次点击连续展开与细节动画展示（相关兼容问题，点击查看）案例2：数据图表动画展示撕纸翻页 描述：类似书本翻页、撕掉纸张、纸片滑出等效果。 案例1：点击书本翻页案例2：多轮互动撕纸翻页与展开无缝长图案例3：点击卡片滑出与卡片链接跳转案例4：多轮互动撕纸翻页随机盲盒 描述：抽签、盲盒机、随机显示长图，都具有随机性，更具趣味性。 案例1：点击展开与随机显示长图内容案例2：点击播放GIF与随机抽签案例3：点击播放GIF与随机抽签案例4：盲盒机随机抽取盲盒密码解锁 描述：点击正确的密码，成功解锁后展开长图。 案例1：解锁密码的同时播放视频案例2：点击收起下拉展开与左右滑动图片滑动选择 描述：左右滑动生成海报，点击原生弹出海报；多个左右滑动选项组合形成海报。 案例1：左右滑动选择与点击原生弹出海报案例2：多个左右滑动选项生成海报（相关兼容问题，点击查看）选择答题 描述：单项选择答题、选择多个选项生成相关海报。 案例1：单项选择答题同时展开无缝长图案例2：单项选择答题与点击多次展开案例3：根据多个选项生成相关海报九宫格 描述：九宫格布局排版。 案例1：九宫格点击可重复挤压展开与收起案例2：九宫格点击可重复弹出和关闭海报图片案例3：九宫格点击原生弹出海报图片案例4：九个层点击可重复弹出和关闭海报图片弹出海报 描述：点击原生弹出海报图片，海报图片长按可识别二维码和保存本地相册。 案例1：点击原生弹出海报图片案例2：十个热区点击原生弹出海报图片案例3：点击时间轴卡片原生弹出海报图片案例4：十二宫格点击原生弹出海报图片图片切换 描述：点击图A淡出，图B淡入。 案例1：点击动画切换图片与视频号卡片美化案例2：点击动画切换图片与插入无角标链接案例3：点击下拉展开与动画切换图片图片滑动 描述：图片左右或上下滑动自动对齐。 案例1：图片上下滑动自动对齐案例2：图片左右滑动自动对齐与适配深色模式可弹出案例3：中间层图片滑动与视频号美化案例4：上下左右组合滑动图片轮播 描述：循环闪动轮播、循环叠图轮播、无缝滚动轮播、循环有序淡入图片等。 案例1：循环闪动轮播与红包封面卡片案例2：循环叠图轮播与无缝滚动轮播图片案例3：循环有序淡入图片与无缝滚动轮播图片案例4：循环叠图轮播与打字动画效果多图展示 描述：可以重复不限次数点击显示和关闭图片、探照灯、多点点击淡入图片等。 案例1：十六宫格可重复点击显示关闭图片（相关兼容问题，点击查看）案例2：模拟打印小票与可重复点击显示关闭图片案例3：多次点击互动淡出图片案例4：多次点击探照灯与淡入图片案例5：点击展开长图与滑动开门显示图片案例6：多点点击淡入显示图片案例7：可重复切换背景（Tab切换入门版）案例8：可重复选择点击显示和关闭视频/图片滚动等播放GIF 描述：点击播放动图GIF。 案例1：点击播放GIF图与点击下拉展开案例2：点击播放GIF图（相关兼容问题，点击查看）案例3：点击连续播放多张GIF图案例4：点击播放GIF图与动画切换图片播放音乐 描述：点击播放音乐，有的是使用音频实现（会出现音频播放提示，用户可以手动关掉音频播放），有的是使用视频实现（没有任何提示，用户无法提前关掉）。 案例1：点击播放音乐与切换图片案例2：点击播放伪音频（使用视频实现音频播放）播放视频 描述：竖版视频和横版视频。 案例1：插入竖版视频案例2：视频遮罩与无缝长图案例3：点击展开与点击大图播放视频视频号 描述：视频号美化处理，包括插入视频号背景、视频号封面美化等。 案例1：视频号卡片美化跳转（相关兼容问题，点击查看）案例2：视频号背景与插入无角标链接圣诞节 描述：圣诞节相关的推文。 案例1：选择下拉展开与点击圣诞树弹出卡片案例2：圣诞节树多点点击弹出海报案例3：圣诞节树可重复点击显示关闭图片和长按图片可识别二维码其他： 描述：无缝长图、淘宝口令等交互。 案例1：无缝长图与长按复制淘宝口令案例2：长按显示图片与点击物体运动合作开发咨询，私信或者评论留言哦~ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |