哇擦~美工你的海报动起来了-卖家网

哇擦~美工你的海报动起来了

2016-12-16 14:59:53

1241浏览

各种手绘、动态、3D效果的海报扑面而来~同时也为正在码子写干货的单身狗小编默默心疼3秒，本教程只针对0代码的小白童鞋通过了解简单的代码技巧让你的海报星辰大海里动起来，如果你是大神，可以点击页面顶部的关闭按钮。

关键词：0代码基础、互动效果、动态海报

文章导读：天猫双十一的官方页面落地了，万人哄抢的光棍节要来了，各种手绘、动态、3D效果的海报扑面而来~同时也为正在码子写干货的单身狗小编默默心疼3秒，本教程只针对0代码的小白童鞋通过了解简单的代码技巧让你的海报星辰大海里动起来，如果你是大神，可以点击页面顶部的关闭按钮。我们先来看一张图，往下↓

哇擦~美工你的海报动起来了

正文：

那么如果我要实现上面的滚动特效应该怎么做呢？有童鞋说这个效果我用PS的时间轴分分钟就能撸出来，对不对！但是最后你会发现在保存的时候问题来了...高清！高清！高清！成了我们很大的困扰，那么我们如何才能像小编一样做出高清的动态大图呢？只要你掌握了以下4个知识点，那么你们家的海报也能在星辰大海中杨帆起航~

一、必备工具：Adobe Dreamweaver（初学者专业代码编辑必备利器）

1、它是谁？它有什么亮点？为什么我们要用它

哇擦~美工你的海报动起来了

（1）代码不同颜色高亮(如图二所示)，可以很方便的识别的出来不同的代码，同时也可以实时帮你判断写错的代码段；

（2）拆分窗口==》代码和图片同窗展示，实时视图==》可以实时查看编写的代码效果；

（3）易读性高，鼠标放置在某一段代码上的时候，可以同时对应图片区域代表的代码块；

（4）可以快速输入代码段，就算你的英文不过四级，只要你按一下“空格”软件可以自动列表展现你需要输入的HTML标签和CSS属性等内容，节省时间之余还方便像我这样英语不过关的人士进行使用。

二、淘宝常见的HTML标签（什么是HTML？其实就是和PSD、JPG一样样，还不懂？找度娘！）

1、这里只介绍本教程使用到的和常见的标签

哇擦~美工你的海报动起来了

如图三所示，是网页的基本结构，但是淘宝框架的自定义模块已经帮我们实现这个功能了，我们只要认识一下就可以了，淘宝装修中用到的是<body></body>标签里面的内容，同样我们本次编写的代码都是在这个标签里面。

（1）基本的

<html>…</html>定义HTML文档；

<head>…</head>文档的信息；

<title>…</title>文档的标题；

<body>…</body>可见的页面内容；

<div>...</div> 区块标签，可以想象成一个矩形，里面可以放文字，可以放图片；

注释。

（2）文本

<h1>...</h1>标题字大小（h1~h6）；

<b>...</b> 粗体字；

<ul>…</ul>无序列表；

<ol>…</ol>有序列表；

<li>…</li>列表项目；

<ahref=”…”>…</a>链接；

<p>段落。

（3）图形

<imgsrc=”…”>定义图像。

（4）表格

<table>…</table> 定义表格；

<td>…</td> 定义表格中的单元格；

<tr>…</tr> 定义表格中的行。

（5）其它

<map></map>热点地图；

<a name="dm"></a>锚点；

<marquee></marquee>滚动公告。

三、图层分解&代码主体：

1、图层分解（前景层+滚动层+背景层）

哇擦~美工你的海报动起来了

2、代码主体

哇擦~美工你的海报动起来了

（图五）

（1）需要注意的是width:1920px;height:540px;宽高的数值根据你海报的具体宽高数值进行替换。其它的参数都可以直接进行应用，可以不用进行修改；

（2）滚动层的宽可以做的长一些3000px，这样滚动的透明层在左右滚动的时候衔接性会更高，如果是上下滚动的话，那么就把滚动层的高做的长一些，一般是对应展现高度的1.5倍左右重复就可以了；

（3）本次用到的<marquee></marquee>滚动公告标签对应函数的设置。

哇擦~美工你的海报动起来了

height、width 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度；

scrollamount 表示运动速度，值是正整数，默认为6；

scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒；

direction 表示滚动的方向，值可以是left，right，up，down，默认为left；

behavior 表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）；

如果想要玩不一样的滚动方式，那么就可以按照对应的参数进行修改调试注意：输入参数的时候一定是要在英文输入状态！英文输入状态！英文输入状态！重要的事情说三遍，标点符号也是要英文输入状态下输入，这个很重要，否者你的代码就失效了。

四、上传代码调试

复制做好的代码->进入装修后台->添加自定义模块->双击编辑->切换源码窗口->黏贴代码。

总结：

那么你学会了吗？动起来~同时你可以通过改变滚动的参数“direction”，滚动的方向不一样也可以做出其它不一样的效果，比如双十一漫天掉落红包还有接下来的圣诞下雪等等~你的大刀是否已经饥渴难耐，快去试一下吧！源代码下载地址--》链接：http://pan.baidu.com/s/1kVruWGv 密码：wp5e

作者：大麦电商，电商问题交流微信damai-e

原创稿件，转载请注明来源卖家资讯http://www.maijia.com/news/

本文"哇擦~美工你的海报动起来了"为卖家资讯原创稿件,转载请注明出处(本文转载于:卖家资讯http://www.maijia.com/news/article/226698)

如何做一张动态海报