3D эффект при наведении курсора через плагин levitation на jQuery
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript" src="/js/jquery.levitation.js"></script> <script> $(document).ready(function(){ $('#space').levitation(-150,-150, -130); $('#sprite1').levitation(320, 100, 20); $('#sprite2').levitation(330, 120, 130); $('#sprite3').levitation(80, 70, -40); $('#sprite4').levitation(180, 130, 40); $('#sprite5').levitation(10, 180, 180); }); </script> |
2#: Следующий код в самый низ вашего CSS:
1 2 3 4 5 6 |
#example {position: relative; overflow: hidden; width:600px; height:400px;} #sprite1 {width:140px;} #sprite2 {width:240px;} #sprite3 {width:100px;} #sprite4 {width:140px;} #sprite5 {width:340px;} |
3#: Этот код в то место, где будет сам блок с 3D:
1 2 3 4 5 6 7 8 |
<div id="example"> <img id="space" src="/images/space.jpg"> <img id="sprite1" src="/images/x-wing.png"> <img id="sprite2" src="/images/x-wing.png"> <img id="sprite3" src="/images/x-wing.png"> <img id="sprite4" src="/images/t-fighter.png"> <img id="sprite5" src="/images/t-fighter.png"> </div> |