3D эффект для сайта
Проголосовало: 3
Может быть, раньше вы видели сайты, где шапкой можно было "управлять", т.е. гонять изображение в ней в разные стороны. И вы, скорее всего, думали, что без помощи flash такого не сотворить, но на самом деле все гениальное - просто. И здесь мы справимся всего лишь при помощи JavaScript и CSS.
Это расширение будет смотреться на вашем сайте очень необычно и по новому, т.к. сайтов с хорошей графикой, а тем более "3D" графикой очень мало. И при помощи него вы сможете воплотить свои самые необычные идеи. 3D эффект отлично подойдет для сайта, например, мультипликационного персонажа или сайта посвященному чему-нибудь продвинутому.
Шаг 1:
Устанавливаем скрипты после тега <body>:
<script type="text/javascript" src="http://webo4ka.ru/Ucoz3/3d_effekt_dli_saita_jquery.smart3d.js"></script>
<script type="text/javascript">
$(function() {
$('#mindscape').smart3d(500);
$('#monsteck_variketch').smart3d(500);
});
</script>
Поясним, что значение 500 - это ширина всей шапки.
Шаг 2:
Используем списки, в которые поместим ссылку на графическое изображение шапки, основного фона и фона, например, с движущимся персонажем или другой картинкой, которая должна двигаться:
HTML
<li><img src="fon_1.jpg" /></li>
<li><img src="fon_2.png" /></li>
</ul>
Каждый новый пункт в списке – это новый слой.
Шаг 3:
В css стиле, прописываем размер фона шапки, обратите внимание, что размер ширины меньше на 100 пикселей, делается это для того, чтобы изображения реагировали на движения стрелки мыши и прописываем overflow: hidden;
CSS
#mindscape {
width: 400px;
height: 225px;
overflow: hidden;
}
#monsteck_variketch {
width: 400px;
height: 225px;
overflow: hidden;
}
</style>
Вот и все! Вы можете сделать оригинальную шапку на своем сайте, поместив туда, например, горы, а можете поместить свою фотографию с логотипом. У данного скрипта существует один большой минус, если первое изображение фона можно обработать в графическом и сжать его размеры, то вот второе изображение фона, должно иметь прозрачность PNG24, из-за чего, данное изображение будет иметь большой вес.
- Всего комментариев: 6
0
|
чет я ниче не понял, че и куда заливать
|
0
|
Честно говорю: у Апокалипса все намного лучше расписано
Щас если смогу найду ссыль |
|
-1
|
Могу скиуть ссылку в ЛС
Ну или вот: http://www.apo-ucoz.com/load/65-1-0-1681 |
|
0
|
Старый
|
0
|
Круто
|
|
0
|
Автору
|
- Оставить комментарий:
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
| 0 онлайн |
0 наших |
0 чужих |
 |  |  |  |  |  |
 | |  |  |  |  |
- Обратная связь
- Правила
- RSS
- +18
- Мобильная версия
- Хостинг от uCoz
- Copyright - webo4ka.ru © 2010-2026 г.
- Design by Вовчик Администратор:)