Демо: 2 ДЕМО примера
Скриншот: нет необходимости, скрипт приводится в действие движением курсора.
Установка кода:
Между <head> и </head> подключаем скрипт:
Code
<script type="text/javascript" src="http://liiion911.ru/js/jquery.smart3d.js"></script>
в CSS добавляем стилизацию самих изображений:
Code
<style type="text/css">
/* Demo 2 */
#smartdemo2 {
width: 600px;
height: 150px;
overflow: hidden;
border:2px solid #444444;
margin: 0;
}
#smartdemo2 li{
width: 800px;
height: 150px;
}
#smartdemo2 .content {
padding: 0 105px;
color: #fff;
text-shadow: 0 0 8px #000000;
}
/* Demo 3 */
#smartdemo3 {
width: 660px;
height: 170px;
overflow: hidden;
border:2px solid #444444;
margin: 0;
}
#smartdemo3 li{
width: 844px;
height: 170px;
}
#smartdemo3 .content {
padding: 0 105px;
color: #fff;
text-shadow: 0 0 8px #000000;
}
</style>
В любом месте после <body> подключаем анимацию:
Code
<script type="text/javascript">
$(document).ready(function() {
$('#smartdemo2').smart3d();
$('#smartdemo3').smart3d();
});
</script>
И там, где хотим видеть анимацию ставим сами картинки для анимации:
Code
<ul id="smartdemo2">
<li><img src="http://liiion911.ru/im/1111.png" /></li>
<li><img src="http://liiion911.ru/im/2222.png" /></li>
</ul>
