请左右滑动下方的二维码拼图
找出上下两部分耦合的二维码
由此获取我们提供的特别福利
导语:近期,各大企业级微信公众平台频繁推出代码特效型图文。其中一部分基于常规 CSS 样式,另有一部分则遵循我们 JZ 多媒体解决方案在去年和腾讯联合制定的 SVG AttributeName 规范,推出了不少优质作品,整个微信行业正在朝着专业代码级运营发展。特此,作为微信图文内动画标准的制定方,本厂牌即日起发布一系列基础的代码样式免费教程,欢迎学习研读。
第一期 渐变 · 纯代码图文特效(1)
第二期 地震 · 纯代码图文特效(2)
本文已纳入 JZ 多媒体解决方案新发售图书版权,禁止任何形式转载或洗稿,禁止任何第三方编辑器在非授权情况下转存为样式模版。
我们经常向学员强调,顶级的微信公众平台图文排版,并不是通过炫技来征服读者,而是“给用户带来惊喜”。一个有惊喜的微信图文,可以换取用户超长时间的停留和交互行为,例如年初我们发布的《别当新媒体小编了,他们太……》一文,图片按钮的特殊效果让人叹为观止。
「横向滑动」是 HTML5 中常用的效果之一,但是本文的应用方式突破了纯粹的横向图片展示功能,设计了一个全新的游戏化场景。JZ 的这一首创玩法值得各位运营人学习,也希望大家更深刻领悟排版的本质意义。
更多 VI、前端、H5、小程序等层面的其他疑问或企业培训预约,可以致电 (021)37218818 询问。
1)滑动+无缝拼接主要依赖的是基础的 CSS 层叠样式,你可以通过点击阅读《微信高级排版——CSS盒模型》学习相关知识。对于本文的滑动二维码拼图而言,首先是上下两个
之间不能有
值,如果你不擅长操作代码,可以用秀米编辑器的「布局」功能制作。
2)
的宽度可以设置100%实现自适,而滑动本身则可以通过一段简单的代码实现,你也可以在很多第三方编辑器平台比如 iPaiban 中直接取用▼
<section style="overflow-x: scroll;">
section>
3)切记,滑动组的图片宽度虽然不限(因为高度会取决于外部区块限制),但两侧一定要留白。因为不同型号的终端宽度有差别,为了避免提前漏出下一张图片,非常建议大家在设计拼图时预留白色区域。
以上就是拼图的实现办法,当然更多专业排版知识你也可以加入我们的网易云课堂深度学习▼
网易云课堂 高级排版术
|
|
详情点击此处
- END -
#招聘启事#广告设计师 职务要求:
1.有扎实的平面设计功底
2.有扎实的动效设计功底
3.对广告创意有独立见解
4.对界面交互有基本认知
5.应届毕业或毕业两年内
职务说明:
1.上海办公
2.专职客户数字广告业务
3.参与教务系统
4.参与设计专著图书写作
基本待遇:
1.8000-12000薪资
2.住房(人才公寓)
3.午餐全额补贴
4.五险一金
应聘材料:
1.个人简历(PDF)
2.作品集 材料不限大小,请邮件至
[email protected]
本则招聘长期有效
其他你会感兴趣的内容
回复 排版阅读互联网文案排版教程
回复 标题了解优质标题的酝酿方法
回复 配图学习图片素材的搭配方法
回复 H 5开启移动营销技术学习课
回复 广告看更多行业广告知识大全
H5、平面、视频等数字营销服务请致电
TEL:(021)3721 8818
客户案例:APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基(湖南) | 中国国际航空 | 湖北省电视台 | 河南卫视 | 浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际|第一太平戴维斯|德国莱茵|盖茨基金会|追星集团
抱歉,除了干货,其他什么也没有。