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


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

2770
7.4 из 10
Проголосовало: 3




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

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

Шаг 1:

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

Code
<script type="text/javascript" src="http://webo4ka.ru/Ucoz3/3d_effekt_dli_saita_jquery.js"></script>  
  <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

Code
<ul id="mindscape">  
  <li><img src="fon_1.jpg" /></li>  
  <li><img src="fon_2.png" /></li>  
  </ul>

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

Шаг 3:

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

CSS

Code
<style>
  #mindscape {  
  width: 400px;  
  height: 225px;  
  overflow: hidden;  
  }  

  #monsteck_variketch {  
  width: 400px;  
  height: 225px;  
  overflow: hidden;  
  }  
  </style>

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

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://yraaa.ru
  • Всего комментариев: 6

LinchezZz
0
LinchezZz написал: Написано 03 мая 2011 в 11:03
Комментарий №4
чет я ниче не понял, че и куда заливать

John_Cena
0
John_Cena написал: Написано 03 мая 2011 в 11:27
Комментарий №5
Честно говорю: у Апокалипса все намного лучше расписано
Щас если смогу найду ссыль

John_Cena
-1
John_Cena написал: Написано 03 мая 2011 в 11:31
Комментарий №6
Могу скиуть ссылку в ЛС
Ну или вот: http://www.apo-ucoz.com/load/65-1-0-1681

John_Cena
0
John_Cena написал: Написано 02 мая 2011 в 14:38
Комментарий №3
Старый

Jeff
0
Jeff написал: Написано 02 мая 2011 в 13:38
Комментарий №2
Круто

The™
0
The™ написал: Написано 02 мая 2011 в 00:09
Комментарий №1
Автору

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: