這是一款效果非常炫酷的jQuery 3D網頁背景視覺差特效插件。該視覺差特效可以制作為全屏背景視覺差效果,也可以在一個容器中制作背景視覺差效果。當使用者移動滑鼠時,由于背景圖檔的移動速度不同,形成了3D視覺差效果。
使用方法
使用這個3D背景視覺差特效插件要引入jQuery和jquery.simple3D.js檔案。
HTML結構
使用一個
作為容器,裡面可以嵌套多個 。每個 都用于放置你需要作為背景視覺差效果的圖檔。
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);
}
初始化插件
$("#simple3D").simple3D({
moveX:3, // 1 - 5
moveY:3, // 1 - 5
bgImage:true, // use background image mode
targetAll:true,
reverseX: true,
reverseY: true
});