最近在做一些活动页面时，发现脑中空无一物，想到的都是些死板无趣的布局、交互。感觉肚子里的东西太少了，话说“熟读唐诗三百首，不会作诗也会吟“啊，所以这就多看看一些设计优秀的网站，遇到感觉不错的写下来，为了加深记忆，也为了能跟大家分享一下~

Mashvp.com这个网站内容不多，十分简洁，但在设计中很多地方还是十分有特色的。今天正好体验了一下，把其中一些特色跟大家分享一下，以后在做PC网站时可以根据实际情况借（co）鉴（py）~

1. 首页滚轮切换图片的效果

网站首页的图片并没有完全展示，而是只显示了每一张图片中左右对称的两个部分，好像在背景大图中蒙上了一层带着两个窗口的蒙版。图片间的切换也没有采用传统的轮播图方式，当用鼠标滚轮进行图片切换时，图片蒙版的两个窗口会分别从上方与下方移出屏幕，移动过程中从窗口可以看到之前纵向被蒙版覆盖的部分。当两个窗口完全移出屏幕时，背景图片会替换为下一张图，然后新的两个窗口会从屏幕上下方进入，最终定格在屏幕中间。

2. 页面切换效果与联系方式展示

在首页点击上方导航按钮后会跳转至导航页。导航页的背景是一个不停播放的视频，让页面更加活泼，同时也展示了更多内容。

页面的按钮与文字是在视频上加了一层蒙版后进行展示的。值得一提的是，打开页面时蒙版上的按钮与文字会有一个从下方淡入的效果，而从导航页返回首页时，按钮与文字则会有从下方淡出的效果，整体感觉非常柔和与完整。

页面下方展示了电话与邮箱两个联系方式，默认只展示图标。当鼠标悬停在图标区域时，出现联系方式并隐藏图标，十分流畅。有趣的是，电话的动效看上去是电话图标被挤向中间后消失，而邮箱的动效则是图标在当前位置直接被覆盖。至于是默认就显示出联系方式还是仅显示图标这个问题，对于这个网站我觉得仅显示图标就好。一般而言来网站直接找联系方式的人是少数，大部分人是来看网站内容。将具体联系方式隐藏，能使网站美观简洁，避免打扰大部分看内容的用户，而对于少数想找联系方式的用户，明显图标已经能很好地指引，流畅有趣的动效更是锦上添花。当然，如果网站本身就是为了处理用户反馈，那么找到联系方式就变成主要需求，默认展示可能就更为合适。

 http://s2/bmiddle/001pSqhYzy6OAJRFLu971&690

3. 两列图片不同速率展示

网站中的work页面主要是两列一共19张相同尺寸图片的展示，如果仅用简单的两列展示，势必会感觉死板和无趣。所以在Mashvp中，当滑动页面时，左右两列的图片是以不同速度滑动的。左侧图片会比右侧图片滑动稍快一些，每张图片大约快1/9，在滑动过程中就会出现类似瀑布流的感觉，使页面显得活泼。同时由于每张左侧图片比右侧快1/9，所以左侧放10张图片，右侧放9张图片，在页面最上方和最底部，左右侧的图片都是对齐的。在图片素材不多又想让页面更有动感和节奏时，可以考虑类似这种不同速率展示的方法。

另外在滑动页面过程中，中间文字组成的圆形区域也会随着页面滑动而转动，同样增加了页面的趣味性。并且由于其位置固定，也会在一定程度上弥补左右图片不同速率可能导致的凌乱。

4. 鼠标悬停上的放大效果

当鼠标悬停在图片上时，图片会出现蒙版以及文字，同时图片有缓慢放大的效果。相比简单的蒙层及文字，图片的缓慢放大效果反馈更加明确，选中感更强，也更具动感。

嗯，就先说这么多，洗洗睡了，具体动效各位还是去mashvp.com自己去体验吧~

Ps. 看看人家的代码注释都这么有情怀~~

http://s7/mw690/001pSqhYzy6OAKwrMnsd6&690