响应式渐变透明胶片轮播

translucent-film-carousel-01

任何任务到手之后,我们需要做的不是马上开工,
而应该静下心思考,拆分细化,找到难点,逐个突破。
以这个“响应式半透明胶片轮播”为例,它实际包含了以下子任务:

1、[样式]胶片变形。
解决:3D 变形(perspective + transform
影响:最低需 ie10 → 客户接受低版本不变形。

2、[样式]胶片两侧逐渐透明。
难点:渐变工具极其有限,一般仅用在 background 上。
解决:元素本身无法渐变,那就要转变思路。
   既然只有胶片的头和尾才进行渐变,
   考虑使用与背景相同而本身渐变的图片覆盖之。
影响:两侧遮罩无法很好地在响应式背景上左右定位。

translucent-film-carousel-02

3、[样式]胶片两侧遮罩定位。
难点:背景使用了 background-size:cover,以达到随容器宽度自动居中。
   因此两侧遮罩无法通过 position:absolute 或者 float:right 来定位。
解决:要使背景与遮罩精确对齐,就必须再一次转变思路。
   考虑使用与背景相同大小,中间透明两侧渐变的图片作为遮盖。
影响:半透明的 png 文件体积大 → 接受;
   中间胶片主体部分无法交互。

translucent-film-carousel-03

4、[样式]遮罩点击穿透。

解决:利用 point-events:none 使遮罩不再阻挡其下层胶片的交互。
问题:最低需 ie11 → 自动轮播/客户增加控制按钮。

5、[交互]轮播本身。
解决:显示或每次移动多个元素的场合,jQuery Scrollbox 是个不错的解决。
影响:该插件的回调过于简单,不便于详情切换的交互。

6、[交互]详情切换。
解决:观察 Scrollbox 的轮播时的 DOM 操作,
   实际上是将队列首个元素移动至队列尾部。
   因此我们只需在轮播动作结束时,激活固定序列号(4/8)即可。
   悬停时,停止轮播,并激活对应序列号。

7、[样式]移动版。
解决:不再变形胶片,并仅居中显示一张及其详情。

因为代码较为复杂,不再一一展示,
可以在项目预览中查看完整页面。

发表评论

邮箱地址不会被公开。 必填项已用*标注