Очень интересный эффект, т.н. paralax effect для картинок.
Скрином это не покажешь, поэтому
смотрите DemoЧто нам потребуется:
1) Подключить 2 скрипта после <body> на нужных страницах сайта:
Code
<script type="text/javascript" src="http://www.center-dm.ru/data/jQuery/Smart3D/jquery.smart3d.js"></script>
<script type="text/javascript">
$(function() {
$('#mindscape').smart3d(500);
$('#monsteck_variketch').smart3d(500);
});
</script>
где 500 - это ширина вашей шапки.
2) Затем, пропишем html код нашей шапки в ПУ-->Управление дизайном-->Верхняя часть сайта.
Quote
<ul id="mindscape">
<li><img src="fon_1.jpg" /></li>
<li><img src="fon_2.png" /></li>
</ul>
Подразумевается, что наша шапка будет состоять из 2-х картинок:
fon_1.jpg, fon_2.jpg, одна из которых, будет накладываться на другую.
3) В CSS мы пропишем это:
Code
#mindscape {
width: 400px;
height: 225px;
overflow: hidden;
}
#monsteck_variketch {
width: 400px;
height: 225px;
overflow: hidden;
}
Комментарии: