欢迎光临散文网 会员登陆 & 注册

推荐高级感杂志/报刊范儿SVG模版

2023-06-07 13:39 作者:黑科技编辑器  | 我要投稿

宝藏模版

往期推荐(点击阅读):

🤡推荐几个莫名好玩的SVG模版🤡

🤩推荐几个瞬间高大上的SVG模版🤩

🤗推荐几个敲级可爱的SVG模版🤗

🧐推荐适合年终总结的SVG模版🧐

⏰推荐可无限循环的SVG模版⏰

🧡推荐适合情人节的SVG模版🧡

🦋推荐适合女神节的SVG模版🦋

🧈推荐几个无比丝滑的SVG模版🧈

👍6种「等分容器滑动」的妙用👍

🛹13种精妙的「图片轮播」特效🛹

🦄推荐几个童趣满满的SVG模版🦄

🤑618排版必备SVG模版🤑

🤠属于爸爸们的SVG模版🤠

🤝推荐又红又专的SVG模版🤝

🥮推荐适合中秋的SVG模版🥮

⌛推荐适合双11的SVG模版⌛

🥇推荐适合世界杯的SVG模版🥇

🤶推荐适合圣诞节的SVG模版🤶

🥳推荐适合新年的SVG模版🥳

🧧推荐兔年春节的SVG模版🧧

🤩推荐适合元宵的SVG模版🤩

🧡推荐适合情人节的SVG模版🧡(第Ⅱ期)

🤡推荐适合愚人节的SVG模版🤡

各位 E2.COOL 的会员,编辑器内 900+ 的 SVG 组件你们都用过吗?今天我们来聊聊特别有范儿的 SVG 设计范式——杂志/报刊模拟。

多热区弹出式海报

说到「杂志/报刊」,相信很多平台会员都知道 Vogue 基于 E2.COOL 黑科技 SVG 编辑器设计的《今天的头条是Prada》,作为一篇业内爆款交互设计图文,它的长尾效应经久不衰。

无限往返伸缩器

「无限往返伸缩器」是一种由业内知名开发者@科蚪发明的无限伸长-收缩循环 SVG 交互结构,在很多纸媒公众号内都有广泛应用,如嘉人的《我去,20___年。》:

像这样模拟文件层叠的效果,是该 SVG 模版的一个巧思应用。在 E2.COOL 的组件搜索功能内查找「无限往返伸缩器」即可体验!点击阅读《黑科技编辑器 | 无限往返伸缩器教程》学习该案例的具体操作流程。

点击-切换图片-伸长

看过了纵向的版面层叠,我们再通过 Apple 公众号的《跟着这份 macOS Ventura 词汇表,开始新操作。》学习横向的互动排版方法。

具体操作可以点击阅读《Apple同款|SVG扑克序列横向展开只需5分钟搞定》学习。基于 E2.COOL 黑科技 SVG 编辑器你甚至可以任意变化内部的伸长形式,选择更适合你主题内容的效果。这里提供一个排版结构参考:

更多 Apple 同款的 SVG 交互设计,不妨点击阅读《𝗔𝗽𝗽𝗹𝗲同款𝗦𝗩𝗚模板大全&创意方法论》深入了解。

图书翻页

这是一款基于 SVG 代码模拟翻页效果的组件,支持无限添加页面,来看看人民日报公众号的应用:

当然如果你设计水平优异,已经制作了丝滑的翻页 GIF 动画,那么完全可以通过「连续 GIF 控制器」组件将他们依次衔接,点击下方画面体验:

需要注意的是,在使用这些 GIF 前,你应当确保 GIF 在设计软件中导出时已设置为仅一次播放!

任意动画接伸长

这是一款解放想象力的 E2.COOL 黑科技 SVG 编辑器高级模版,由此能实现丰富的画面伸长前的交互特效,譬如在此我们结合「撕纸」的动作模拟定制(by 交互实验室)案例 GQ 实验室《开撕》的日历交互:

关于该组件的具体应用方法,请点击阅读《解放想象力:SVG 任意动画接伸长》学习,教程里介绍了更多精彩的创意组合设计。

顶层滑动

作为一种「古典」的 CSS 交互布局,顶层滑动效果简洁大气,易于排版又效果流畅,自然也成为了纸媒公众号的常用选项。

在 E2.COOL 的组件搜索功能内查找「顶层滑动」即可体验!此外如果你的版面明确按屏幕大小分隔,那么也可以使用「黑科技编辑器|纵向吸附容器滑动教程」或「黑科技编辑器|纵向吸附滑动教程」进行排版。

横向视差滑动

在定制(by JZ Creative Studio)案例《笃定前行的中国——中国日报记者十年手记》中,中国日报采用了该 SVG 形式将多种纸张纹理与文本、图像融合,质感满满。请横向滑动下方画面体验:

标签抽拉

书签化的交互设计也是一种极具特色的 SVG 模型,由业内知名开发者@GL设计,上架于 E2.COOL 的 UGC 专区:

想实现同样效果?即刻进入 E2.COOL 黑科技编辑器,即可在「UGC 付费原创」大类模版中选择「标签抽拉」畅快体验。



这里是黑科技编辑器(e2.cool),会的比别人多一点

官网链接:www.e2.cool


推荐高级感杂志/报刊范儿SVG模版的评论 (共 条)

分享到微博请遵守国家法律