引言
最近由于实在挺忙的,就没有时间写东西,憋了好几个题材,打算在接下来的复习周学得无聊的时候就写写,这是第一个。(然而现在并没到复习周呵呵呵
最初这些效果都是我从其他推送看来的,至于是哪篇推送我也忘记了哈哈哈哈哈哈哈...
先看效果:
【群星闪耀】第五届SKY之星评选开始接受报名
『迎接我们的18』2017-2018跨年留言征集活动
你可以看到,在里头是包含两种效果的:
- 图文渐显
- 弹幕效果
由于第二种效果已经看到有的编辑器(i排版,在他的互动样式里头)已经玩出花来了,并且它的实现比较简单,就不教了,具体可以参考这篇文章:弹幕还可以点击显示!?你需要了解的弹幕排版都在这里了
这里主要介绍第一种效果(图文渐显)的实现。
正文
准备
- 看懂本文需要一些基本的HTML知识,可以从w3school的HTML教程中基础、属性、元素的篇章中获得。
- 你或许需要一个称手的文本编辑器:Notepad++
在编辑时将语言设置为HTML即可获得良好的阅读体验
在使用时请把自动换行关掉 - 鉴于易用性以及广告骚扰等原因,这里我们用135编辑器,而非 i 排版
- 善于使用
Ctlr + A
- HTML源码
你可以轻松地从网页中获取它的全套源码,如果你懒的话在这里我也单独给出:
这里你会理解我为啥叫你用Notepad++而不是记事本
文字渐显:
图片渐显:
文字渐显
文字的效果编辑我们分为两个部分:
- 文本、出现时序、效果持续时间的编辑——在文本编辑器中完成
- 文字排版的编辑——在135编辑器中完成
文本编辑器中的编辑
首先是文本,你有多少段文字就要有多少段上面文字渐显的代码块,将你每段的文本填入代码中你!的!文!本!你!的!文!本!
的位置中即可。
例如你有两段文字要顺序显示:
我是第一段
我是第二段
那么你的代码:
编辑好了文本之后,我们就要对出现时序进行编辑。方法是编辑每段文字的代码里animate
标签中begin
属性的值。通常上一段与下一段的时间间隔为1500~2000ms
,并且第一段的值一般为1000-2000ms
。这里的修改我是没有想到有什么方便的方法,只能一个个按顺序修改咯,具体的例子可以在上面看到。
另外,你可以看到animate
标签中还有其他的属性:
- dur - 动画持续时间,在这里可以理解为文字显示过程需要的时间
- from/to - 这里的
1
和0
代表文字从透明(1)到不透明(0)的过程,即文字透明度的变化初状态与末状态,这里你可以将0
和1
换过来并配合其他属性的修改来玩出其他的效果。- fill - 我也不知道是啥...
- 更多其他属性请参考:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute#ConditionalProccessing
其他的玩法请搜索:svg animate stml
135编辑器中的编辑
编辑好了代码之后,打开135编辑器,点击编辑页面左上角 HTML 字样的按钮,把你的代码全复制进去,再点一次那个按钮就可以看到你的文本了,需要注意,在这个界面你看到的是不带动画效果的,需要查看效果请点击右边的 手机预览。
在这里进行文字的排版,你可以进行你熟悉的 左右对齐/居中、文字大小、加粗斜体下划线、文字颜色、阴影等等等等等等你熟悉的编辑,你也可以对段落中的文字进行删改,但应尽量避免段落的增减以及段落位序改变,不然就会出现奇奇怪怪的效果(如果要进行修改请回到文本编辑器中修改)。
图片渐显
具体操作和文字渐显差不多,具体就是怎么放上你的图片,这里我们需要一个叫 图床 的东西,它的作用相当于帮你存储图片,并给你一个可以直接获取图片的链接巴拉巴拉巴拉...
你可以自建,比如利用七牛云的10g免费空间配合极简图床使用。
也可以用一些国内的公共图床比如:https://imgchr.com/
另:国外的公共图床大多在微信中不能访问,或访问速度偏慢。微博图床也是一个目前来说不错选择,不过很久很久之后你的直链还能不能访问取决于微博
获取到图片的直链后,替换掉代码中的两个http://你的图片链接你的图片链接
即可,图片可以是静态的jpg/png等,也可以是动态的gif。
替换完成之后你也可以插入文本的HTML代码中进行时间的排序,同样是编辑animate
中begin
的值。
135编辑器中对图片的编辑除了边框、大小调整、左右对齐/居中外都是收费的。它还有一个换图的功能,我不知道换过后渐显效果还在不,你们自己去试吧
与其他编辑器素材的结合
有时候你想用用这个编辑器的素材,然后那个编辑器你也有一些素材想用,怎么怎么办呢?
这里有一个办法,先统计你有多少块素材,然后按素材的块数在微信公众号的编辑器中打入相应数量的换行(就是回车,最好再多几个)。然后按顺序在各自的行中粘贴素材就行。
举个例子,我有一个135编辑器的素材,一个秀米的素材,以及两个自己需要在微信编辑器中插入的素材(一段文字、一个投票窗)。
- 在微信编辑器中打入五或六个换行
- 插入投票窗,并调整投票窗所在的位置(行)
- 在相应位置写下自己需要的文字
- 在相应位置将粘贴素材
- 将多出来的行视情况删除
注:在微信编辑器中就尽量不要对素材进行额外的编辑了,很多时候会出现一些奇奇怪怪的现象,对素材的编辑请回到相应的编辑器中进行。
最后请不要忘记发到自己手机上预览一下效果,毕竟一天只有一次推。
最后
这些效果似乎都可以在 i排版 中实现,不过我看了看它的界面呵呵呵立马不想用了。可以这么说,所有的效果也都是建立在HTML上的,既然是HTML,那么代码也必然会暴露给别人,你也就可以很轻易地从中学习它效果的实现方法,看到感兴趣的,右键-检查/查看源代码
就行了。
话说回来,大一里一年的院会干事时光就要结束了,可以说被逼得学到很多东西了,也过得很开心,不过说回来,大二的夜宵估计是没着落了呵呵呵呵呵呵呵呵...