专栏名称: JZCreative
Digital Marketing(数字营销)研究机构与独立厂牌,探讨一切技术流营销:策划/投放/运营/排版/H5/电商/建站/PPT/Prezi/平面/交互/视频/音频/数据可视化/EDM/CRM/机器学习……除了干货,其它什么也没有。
目录
相关文章推荐
他化自在天  ·  《公主,看##知品类》(小众暴利品类挖掘1/ ... ·  2 天前  
黑马营销  ·  路易·威登把「地标营销」又玩出了新高度 ·  2 天前  
马斐九频道  ·  在郝鸿峰的脱口秀中,看到2025年酒业的希望 ·  3 天前  
廣告狂人  ·  2024年十大营销案例(投票) ·  5 天前  
51好读  ›  专栏  ›  JZCreative

拼图游戏 · 纯代码图文特效(3)

JZCreative  · 公众号  · 营销  · 2017-08-10 14:13

正文

除了干货,其它什么也没有

职场

学术

新媒体

设计

极客



请左右滑动下方的二维码拼图

找出上下两部分耦合的二维码

由此获取我们提供的特别福利




导语:近期,各大企业级微信公众平台频繁推出代码特效型图文。其中一部分基于常规 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 新华信 | 高力国际|第一太平戴维斯|德国莱茵|盖茨基金会|追星集团



抱歉,除了干货,其他什么也没有。