CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

使用 jQuery + parallax.js 插件实现文字浮动跟随鼠标移动效果

发布时间:『 2017-06-24 17:23』  博客类别:WEB前端  阅读(2207) 评论(0)

我记得博客园上有一个作者的博客上有这个效果,当时就在想是怎么实现的。今天终于有空,就为大家分享一下实现代码。

鼠标跟随文字效果实现起来并不是很难,网上已有相关的parallax.js 插件,我们再结合 jQuery 只需要写一点点代码即可实现。

jQuery互动效果,随着鼠标的晃动,各个图片也在相当的相对运动。

Parallax.js是一款功能非常强大的javascript视觉差特效引擎插件。通过这个视觉差插件可以制作出非常炫酷的视觉差特效。它可以检测智能设备的方向。你可以将它作为jQuery插件来使用,也可以以纯JS的方式来使用。

鼠标跟随文字

该视觉差特效的基本HTML结构使用的是一个无序列表,每一个列表项给它们一个class layer和一个data-depth属性来指定该层的深度。深度为0的层将是固定不动的,深度为1的层运动效果最激烈的层。0-1之间的层会根据值来相对移动。

<ul id="scene">
  <li class="layer" data-depth="0.00"><img src="layer1.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer2.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer5.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer6.png"></li>
</ul>

要初始化视觉差效果,可以选择指定的DOM元素之后,创建一个新的Parallax对象。实用下面的代码进行初始化插件。

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

相关计算公式如下:

xMotion = parentElement.width  * (scalarX / 100) * layerDepth
yMotion = parentElement.height * (scalarY / 100) * layerDepth

更多特效和属性用法,请参考Parallax.js官方文档。https://github.com/razorfish/Parallax-JS


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   jQuery     parallax.js     鼠标跟随文字     视觉差特效     鼠标跟随  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有