天天看點

3d視覺效果html,jQuery炫酷網頁3D背景視覺差特效

這是一款效果非常炫酷的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

});