3D эффект для сайта

3D эффект для сайта

92011-04-2935833Денис Абдуллин
Может быть, раньше вы видели сайты, где шапкой можно было "управлять", т.е. гонять изображение в ней в разные стороны. И вы, скорее всего, думали, что без помощи flash такого не сотворить, но на самом деле все гениальное - просто. И здесь мы справимся всего лишь при помощи JavaScript и CSS.

Это расширение будет смотреться на вашем сайте очень необычно и по новому, т.к. сайтов с хорошей графикой, а тем более "3D" графикой очень мало. И при помощи него вы сможете воплотить свои самые необычные идеи. 3D эффект отлично подойдет для сайта, например, мультипликационного персонажа или сайта посвященному чему-нибудь продвинутому.

Шаг 1:

Устанавливаем скрипты после тега <body>:

JS



Поясним, что значение 500 - это ширина всей шапки.

Шаг 2:

Используем списки, в которые поместим ссылку на графическое изображение шапки, основного фона и фона, например, с движущимся персонажем или другой картинкой, которая должна двигаться:

HTML



Каждый новый пункт в списке – это новый слой.

Шаг 3:

В css стиле, прописываем размер фона шапки, обратите внимание, что размер ширины меньше на 100 пикселей, делается это для того, чтобы изображения реагировали на движения стрелки мыши и прописываем overflow: hidden;

CSS


Вот и все! Вы можете сделать оригинальную шапку на своем сайте, поместив туда, например, горы, а можете поместить свою фотографию с логотипом. У данного скрипта существует один большой минус, если первое изображение фона можно обработать в графическом и сжать его размеры, то вот второе изображение фона, должно иметь прозрачность PNG24, из-за чего, данное изображение будет иметь большой вес.

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (3)
Дамир Гаянов 2011-04-30 в 16:07Спам
клево!
0
slavik 2011-05-01 в 19:10Спам
норм
2
Mr.Yes 2013-07-07 в 17:23Спам
прекрасно смотрится
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.