这是一款效果非常炫酷的jQuery 3D网页背景视觉差特效插件。该视觉差特效可以制作为全屏背景视觉差效果,也可以在一个容器中制作背景视觉差效果。当用户移动鼠标时,由于背景图片的移动速度不同,形成了3D视觉差效果。
使用方法
使用这个3D背景视觉差特效插件要引入jQuery和jquery.simple3D.js文件。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.simple3D.js"></script>
HTML结构
使用一个<div>
作为容器,里面可以嵌套多个<div>
。每个<div>
都用于放置你需要作为背景视觉差效果的图片。
<div id="simple3D"> <div class="dot"></div> <div class="kinoco"></div> <div class="star"></div> </div>
CSS样式
#simple3D { position: absolute; z-index: 1; width: 100%; height: 900px; } #simple3D div { min-height: 1100px; width: 120%; } #simple3D div.dot { background: url(../images/dot2.png); } #simple3D div.kinoco { background: url(../images/kinoco.png); } #simple3D div.star { background: url(../images/star.png); }
初始化插件
<script> $("#simple3D").simple3D({ moveX:3, // 1 - 5 moveY:3, // 1 - 5 bgImage:true, // use background image mode targetAll:true, reverseX: true, reverseY: true }); </script>