当今网络上最“热门”的技术之一是视差滚动。我们都去过那些旋转鼠标滚轮的网站,当您旋转鼠标滚轮时,页面上的内容会在页面上下移动或跨页移动。
对于那些刚接触网页设计和图形设计的人来说,由于需要大量的CSS,这种技术可能非常难以实现。
如果这描述了您,那么有许多应用程序可能只对图形艺术家有吸引力。他们基本上使用熟悉的页面布局方法来处理网页,这意味着不会涉及很多(如果有的话)编码。一个真正飙升的应用是Adobe Muse。
图形专业人员使用Muse完成的工作非常精彩,您可以通过访问Muse看到您可以做的样本 这一天的网站 。尽管网络专业人士倾向于认为Muse是某种“结束玩具”,但它也被设计师用于创建移动和网络原型,最终将其移交给团队中的开发人员。
使用Muse非常容易实现的一项技术是视差滚动,如果您想查看完整版本的练习。滚动鼠标滚轮时,文本似乎在页面上下移动,图像也会发生变化。
让我们开始吧。
01年01月创建一个网页
当您启动Muse时,单击 新网站 链接。这将打开 新站点属性。该项目将设计用于桌面应用程序,您可以在中选择它 初始布局 弹出菜单。您还可以设置“列数”,“装订线宽度”,“边距”和“填充”的值。在这种情况下,我们并没有非常关注这一点,只需点击即可 好.
格式化页面
设置站点属性并单击时 好 你被带到了所谓的 计划 视图。有一个 家 页面顶部和 主页 在窗口的底部。我们只需要一页。要进入Design View,我们双击打开界面的主页。
左边是一些基本工具,右边是用于操作页面上内容的各种面板。顶部是属性,可以应用于页面或页面上选择的任何内容。在这种情况下,我们想要一个黑色的背景。为此,我们点击了 浏览器填充 彩色芯片并从拾色器中选择黑色。
03年3月向页面添加文本
下一步是向页面添加一些文本。我们选择了 文字工具 并画出一个文本框。我们输入了“欢迎”一词,并在“属性”中将文本设置为 Arial,120像素白色。中心对齐。
然后我们切换到选择工具,单击文本框并设置它 Y位置为168 顶部的像素。在文本框仍然被选中的情况下,我们打开了 对齐面板 并将文本框与中心对齐。
最后,选中文本框后,我们按下了 选项/ ALT 和 转移 键和文本框的四个副本。我们将每个副本的文本和Y位置更改为:
- 至,871
- 图形,1621
- 软件,2371
您会注意到,在设置每个文本框的位置时,页面会调整大小以适应文本的位置。
07年04月添加图像占位符
下一步是在文本块之间放置图像。
第一步是选择 矩形工具 并绘制一个从页面的一侧延伸到另一侧的盒子。选中矩形后,我们设置它 高度为250像素 和它的 Y位置为425像素。计划是让它们始终拉伸或缩小到页面宽度以适应用户的浏览器视口。为此,我们点击了 100%宽度 属性中的按钮。这样做会使X值变灰并确保图像始终是浏览器视口宽度的100%。
05年05月将图像添加到图像占位符
选中矩形后,我们点击了 填充链接 - 不是颜色芯片 - 并点击了我法师墨水 将图像添加到矩形。在里面 配件 地区,我们选择了 缩放以适应 然后点击了 中心把手 在里面 位置 确保图像从图像中心缩放的区域。
接下来,我们使用了 选项/ ALT-Shift键拖动 在前两个文本块之间创建图像副本的技术,打开“填充”面板并将图像换成另一个。我们也为剩下的两张图片做了这个。
有了图像,就可以添加动作了。
07年6月添加视差滚动
有许多方法可以在Adobe Muse中添加视差滚动。我们将向您展示一种简单的方法。
打开“填充”面板后,单击“打开” 滚动标签 并且,当它打开时,单击 动作复选框.
你会看到的值 初始 和 最终动议。这些决定了图像相对于滚轮的移动速度。例如,值为1.5将使图像移动速度比车轮快1.5倍。我们使用值0来锁定图像。
该 水平和垂直箭头 确定运动的方向。如果值为0,则无论您单击哪个箭头,图像都不会移动。
中间价值 – 关键位置 - 显示图像开始移动的点。对于此图像,图像上方的行开始从页面顶部开始325像素。当滚动到达该值时,图像开始移动。您可以通过在对话框中更改此值或通过单击并向上或向下拖动线顶部的点来更改此值。
对页面上的其他图像重复此操作。
07年07月浏览器测试
在这一点上,我们完成了。出于显而易见的原因,我们做的第一件事就是选择 文件>保存站点。要浏览器测试,我们只需选择 文件>在浏览器中预览页面。这打开了我们计算机的默认浏览器,当页面打开时,我们开始滚动。