Блоки с 3D Parallax эффектом через плагин Floatingbox на jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script src = "/js/jquery.floatingbox.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#moving_box1').floatingBox({ scale : 0.3, blur : true, isText : false, xOffset : 235, yOffset: 185, }); $('#moving_box2').floatingBox({ scale : 0.37, blur : true, isText : false, xOffset : 205, yOffset: 155 }); $('#moving_box3').floatingBox({ scale : 0.47, blur : true, isText : false, xOffset : 265, yOffset: 205 }); }); </script> |
2#: Следующий код в то место, где будет сам блок:
1 2 3 4 5 |
<div id = "container" style = "width: 500px; height: 400px; border: 1px solid #000;"> <div id="moving_box1" style = "width: 30px; height: 30px; background: #999;"></div> <div id="moving_box2" style = "width: 50px; height: 50px; background: #AAA;"></div> <div id="moving_box3" style = "width: 40px; height: 40px; background: #BBB;"></div> </div> |