Pages

0

JQuery 錯位 3D 效果 plugin


點選上面這張圖片就可以看到效果~

這是之前一直很想嘗試的滑鼠效果，
所以就做成了一個以後方便套用的 plugin~
套用與設定的方式很簡單，
只要用一個 list 就可以做出來模擬視差的立體感，
算是滿有趣的互動效果~
這個效果套用在 ul 上，只有一個地方需要注意，
就是 ul 的 position 屬性被我強制設為 relative，
所以在使用 css 定位上要自己留心~
此外，在 ul 中的 li 標籤內，
必須自行增加 move="數字" 的標籤值，
用來決定位移的大小，
數字越小位移越大，0~10 當作 10 計算，-10~0 當作 -10 計算，
不填入數字則不會移動~

oxxo_3Ddislocation_v1 下載 (右鍵另存)

設定值：
level : 0.3  // 位移等即，正：與滑鼠反向，負：與滑鼠同向

參考html：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>jquery oxxo-3Ddislocation plugin</title>
   <style>
    body{background:#469; margin:0;}
    #div1{width:400px; height:300px; display:table; margin:100px auto 20px auto;}
    #test1{width:400px; height:300px; border:10px solid #fff; background:#09c; -webkit-border-radius:50px; -webkit-box-shadow:2px 2px 20px #000;}
    #test1 li{width:400px; height:300px;}
   </style>
   <script src="jquery-1.7.1.min.js"></script>
   <script src="plugin/oxxo_plugin/oxxo_3Ddislocation_v1.js"></script>
   <script>
    $(function(){
     $("#test1").oxxo3Ddislocation({
      level : 0.3  // 位移等即，正：與滑鼠反向，負：與滑鼠同向
     });
    });
   </script>
</head>
<body>
   <div id="div1">
   <ul id="test1">
    <li move="0"></li>
    <li move="15"></li>
    <li move="30"></li>
    <li move="80"></li>
    <li move="cc"></li>
   </ul>
   </div>
</body>
</html>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言