在昨天的《下雪SVG交互图文案例合集》文章中,给大家推荐了几个跟下雪相关的SVG交互图文案例。
雪总是看不够。
今天再给大家来点儿干货,教大家如何在公众号文章里「下一场雪」。
4种方式,任你选择。
一
圆点雪花飘落
*素材来自KTM官方账号寒冬,过一种滚烫人生
组件:雪花飘落
编号:11342(组件)
雪花由简单的矢量圆点构成,不会让读者下意识去看雪花长什么样,注意力仍然留在文字和图片上。适合全文覆盖的轻量氛围打底,或作为其他更复杂下雪效果的底层叠加。
对应i排版SVG编辑器(SVG.iPaiban.com)组件「雪花飘落」(编号:11342),支持调整雪花密度、飘落速度等参数。
二
图案雪花飘落
*素材来自央视新闻大雪,来了!
组件:雪花飘落(有图案)
编号:11343(组件)
雪花不再是圆点,而是有明确形状的图案——默认通常是带花瓣或尖角的雪花轮廓,也可以替换为其他图案的雪花。这一效果可让下雪的氛围更浓厚。
*素材来自BREGUET宝玑你的圣诞心选,是____?
组件:雪花飘落(有图案)
编号:11343(组件)
对应i排版SVG编辑器(SVG.iPaiban.com)组件「雪花飘落(有图案) 」(编号:11343),支持调整雪花大小、雪花密度、飘落速度等参数。教程参考:“如何让图文里可以下雪啊?”
三
遮罩下雪
*素材来自绝对MINI这一次,重返60年前那个雪夜
组件:遮罩
编号:10829(组件)
使用以上两种方式调整不出自己想要的下雪效果?不如直接让设计师设计想要的下雪动态画面,并保存为透明底的GIF图,然后通过排版的方式叠加在想要下雪的画面之上。
对应i排版SVG编辑器(SVG.iPaiban.com)组件「遮罩」(编号:10829),需要哪个画面下雪,就在对应画面下插入这个组件,然后上传透底下雪GIF。
四
滤色遮罩下雪
*素材来自i排版
组件:滤色滤镜遮罩
编号:11898(组件)
这是四种方式中最有融合感的一种。雪花看起来不是浮在表面的一层贴纸,而是和底图的光影、色调自然叠加在一起。
与第三种普通的遮罩下雪不同,这种是让设计师设计的下雪动态画面,保存为一张纯黑底GIF,然后通过滤掉黑色保留白色的方式叠加在想要下雪的画面之上。
*纯黑底下雪GIF素材示例
对应i排版SVG编辑器(SVG.iPaiban.com)组件「滤色滤镜遮罩」(编号:11898),需要哪个画面下雪,就在对应画面下插入这个组件,然后上传纯黑底下雪GIF。教程参考:“霸王茶姬的这篇文章中的GIF,怎么这么高清啊?”
























