夏日创意SVG排版教程 - 雀巢集团案例分析
探索雀巢集团如何用创新的SVG排版技巧!本文提供详细的SVG交互效果制作教程,从编辑器操作到动画设置,手把手教你打造吸引眼球的夏日主题推文。立即学习如何将你的社交媒体内容转换为清凉的夏日体验,提升用户参与度和品牌宣传效果。
![](http://static.135editor.com/img/grey.gif)
![](http://static.135editor.com/img/grey.gif)
![](http://static.135editor.com/img/grey.gif)
![](http://static.135editor.com/img/grey.gif)
夏风拂过岁月的诗行
开始书写热烈的篇章
又是一年盛夏至
你想好怎么做
夏日的创意SVG排版了吗
别担心
三儿给大家找来了
雀巢集团的夏日主题推文
一起来学习他的创意玩法吧
![](http://static.135editor.com/img/grey.gif)
![](http://static.135editor.com/img/grey.gif)
![](http://static.135editor.com/img/grey.gif)
![](http://static.135editor.com/img/grey.gif)
(来自雀巢集团)
这篇来自雀巢集团夏日主题的推文,利用SVG组件和巧妙的创意设计,让我们看到了推文的两种状态,推文一开篇就引入了夏季高温的话题,引起人们的共鸣,再以给夏日降温的互动,让推文内容切换到清凉状态,通过这样的前后反差,带用户从炎热过渡到清凉,给用户来了一场奇妙的体验,同时也起到了很好的产品宣传推广的效果。
这篇推文用到的SVG组件为点击全文渐进式换内容-自定义触发,ID:360。该效果被许多品牌都有使用过,除了用在这种夏日主题以外,其实还可以用在其它色彩反差的推文中,比如:推文开始为黑白色的状态,擦除后推文变为彩色的内容。
接下来三儿就来为大家讲解这类效果怎样制作。
![](http://static.135editor.com/img/grey.gif)
![](http://static.135editor.com/img/grey.gif)
![](http://static.135editor.com/img/grey.gif)
① 首先在编辑器页面左侧选择【SVG编辑器】,进入SVG编辑器之后在【互动效果】中搜索组件ID:360,名称:点击全文渐进式换内容-自定义触发,将其放到编辑页面。
② 我们需要为组件添加图片,即位移小元素、初始背景图、变化后背景图。
在放入位移小元素部分的图片时,要使用透明底的图片,且需要与背景图的宽度保持一致。位移元素部分图片整体的高度可以按元素高度裁切,不要上下留白太多。
③上传完位移小元素后,接着就上传初始背景图和变化后背景图。(这里所有图片需要宽度一致,并且变化前后背景图的总高度需要保持一致)
添加好初始背景图就需要为图片设置触发点击切换的区域,拖拽红色虚线区域,即可改变触发区域的大小和位置。
接着再添加变化后的背景图即可。
④ 全部图片设置完成后,就需要调整组件细节,包括动画渐变时长和元素移入时长,以及新旧内容分隔线位置。
新旧内容分割线是指设置分割线在位移小元素图片高度占比的位置,比如设置为50%,分割线就在小元素图片的中间位置;设置为100%,分割线就在小元素图片底部。
⑤ 整个SVG组件的内容制作好之后,选择右上角的【同步】【导出】就可以导入到公众号后台了。
![](http://static.135editor.com/img/grey.gif)
![](http://static.135editor.com/img/grey.gif)
以上就是三儿分享的全部内容
如果觉得还不错
记得点赞+在看哦
如果你还有什么想看想学的
欢迎在评论区留言哦
![](http://static.135editor.com/img/grey.gif)
*本文所涉及的素材仅供学习交流使用,侵联删
立即登录
![](https://bdn.135editor.com/files/202108/images/83ed8ebdef793d0854bae4d3d39c4576.png)
![](https://bcn.135editor.com/files/20240808/images/bige_sheji_logo.png)
![](https://bcn.135editor.com/files/20240808/images/bige_ppt_logo.png)
![](https://bdn.135editor.com/files/202108/images/512f0cad-2a6d-4e17-9bae-d7897b4317ad.png)