轻松创建互动视觉差效果，够创意，玩出花样:jparallax

如果给你一颗太阳、一座山脉、一些小山、一片树林，让你组合成一幅画，鼠标放到云彩上或者鸟上，都会来回动，形成一个可以互动的画面。那么我们该怎么做呢？

首先，我们要把素材图片，拼合一起，肯定会有重叠的，而且，图片也不一定是透明的。跟随鼠标移动，需要图片也动，如果有立体感的效果，就更好了。如下图所示：

一幅拼合的风景画

该怎么实现呢？我们可以通过绝对定位（position:absolute）来实现层叠，配合鼠标在节点层上移动来实现动画。这里，我们推荐一款jQuery插件：jParallax.js。

那么，什么是jParallax呢？

它全名是：jquery.parallax.js，是用来创建交互的视觉差效果的jquery插件。

通过设置图层的绝对位置（CSS），鼠标移动时，根据图层的尺寸来决定图层移动的频率。

那么，如何理解它呢？我们通过一段html和一个图的关系来说明。

jParallax示意图

那么，如何使用它呢？

首先，到github上搜索：jParallax，然后引入到页面中，如下定义图片元素：

定义图片元素在一个容器里

接着如下所示，初始化节点。

jQuery('.parallax-layer').parallar(options);

这里的options是配置项，比如：{mouseport: jQuery('#parallax')}，表示鼠标在哪个区域活动，才会触发视觉差移动效果。我们这里定义的是图片元素外边的容器。

那么，这个插件的效果是什么样的？

jParallax示例效果

上边，我们说了，option是配置项，通过不同的设置和图片素材的组合，可以达到不同的效果，下面，我们来看一些提供好的效果图：

jParallax效果图

当鼠标在右侧的黑方块里移动，来控制左侧的变动效果(设置：mouseport指定到其它节点元素上)。

jParallax效果图

通过此示例，我们可以看出，在复杂页面，效果也是可以的，可以开发小游戏等。

至此，就简单介绍完这个插件了，发挥你的想象力，可以实现各种有趣的小应用。比如：儿童网站（H5页面），是不是就需要一些卡通的动画交互。

如果本文对你有点帮助，那么请关注我吧，求关注，求点赞，求转发！！！