Талантливо преподнесенный текст прекрасно заменяет любую графику.Березуева Алексея ©

Rammdrum.com - сайт об ударнике Rammstein - Главная

Новости
Будь в курсе
Мини Чат

Движущаяся шапка блога эффект 3D

4713 |

(13)

В моей Twitter ленте, я стараюсь размещать ссылки на интересные сайты, на которых та или иная идея реализована весьма удачно и любой пользователь мог на неё посмотреть и задать себе очередной вопрос:

Quote

Хм... интересная идея, а как её реализовать?

одними из таких сайтов стали:

www.batman-3d.de
www.meninamenino.com.br

как вы понимаете у данных сайтов есть одно общее решение, которое мы будем рассматривать в данной статье - это движущаяся шапка, эффект 3D (jQuery Smart3D)

Шаг-1 JS:

Давайте установим после тега <body> следующие скрипты:

Code

Многие могли догадаться, что значение 500 - это ширина нашей с вами шапки, поэтому не забываем их менять, когда будете устанавливать свою шапку для блога.

Шаг-2 HTML:

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

HTML-Code

Code

Шаг-3 CSS:

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

CSS-Code

Code

#mindscape {
  width: 400px;
  height: 225px;
  overflow: hidden;
}

#monsteck_variketch {
  width: 400px;
  height: 225px;
  overflow: hidden;
}

На этом всё, единственное, что хочу сказать от себя, так это то, что у данного решения существует один большой минус, если первое изображение фона можно обработать в Фотошопе и сжать его размеры, то вот второе изображение фона, должно иметь прозрачность PNG24, из-за чего, данное изображение будет иметь большой вес.

Источник:
http://4coder.info
Вольный перевод:
http://www.center-dm.ru

Ваша оценка новости

оценка новости4.5голосов: 28

Теги: 3D, блог, jQuery, шапка, html-css

11 | Preekly пишет: | 05.02.2012 | 02:39 0

Доброго времени суток. Спасибо за предоставленный способ отображения шапки. У меня имеется такой вопрос: изображение 1500px, шапка 900px. Изображение специально сделал больше чем на 100px чем шапка, что бы прокручиваемое внутри изображение можно было прокручивать дольше. Можно ли сделать так что бы шапка из-за этого не уезжала не пойми куда?

Цитировать

12 | Preekly пишет: | 05.02.2012 | 03:41 0

Точнее сказать, со смещением самой шапки "не пойми куда" я разобрался. Но вопрос в другом, как я понимаю картинки прокручиваются всего лишь на это расстояние: http://img835.imageshack.us/img835/2492/88308658.jpg
Можно ли как-то увеличить это расстояние, что бы при проведении мышкой по картинке прокручивался ни маленький кусочек, а хотя бы в два раза больший.

Цитировать

13 | Preekly пишет: | 05.02.2012 | 03:55 0

Все, разобрался. Я болван, извиняюсь за кучу флуда. Если найдется такой же болван как я, то пусть не забудет указать размеры к картинке везде, в том числе там где подключается скрипт.

Цитировать

9 | Mortal пишет: | 10.01.2012 | 17:31 0

блин,ну елки-я говрю шарпка проспиана на сайте не в верхней части сайта,а в ксс

Цитировать

10 | 3loY пишет: | 11.01.2012 | 20:08 0

Ну так удали из стилей класс / айди и пропиши по аналогии к примеру выше, окда?

Цитировать

8 | Mortal Kombat 9 ( MK 2011 ) пишет: | 10.01.2012 | 13:34 0

такой вопрос если шапка в ксс прописана,ак е помнефять на эту?
вот в ксс это-как сделать?
#header{height:227px;width:1000px;overflow:hidden;background:url('/images/head.jpg');}

Ответ: научись для начало правильно задавать вопрос, нечего не понятно что ты хочешь...

Цитировать

7 | Кейтен пишет: | 24.12.2011 | 00:16 +1

Это называется параллакс :). Был ещё плагин jQuery Parallax, или с каким-то похожим названием...

Самая офигенная галерея параллакса у Turbomilk, это очень крутая компания (в России), которая рисовала иконку главной страницы iconfinder.com, бейджи и иконку 404 для хабра, логотипы Альфа-банка и кучу ещё всего разного...

http://characters.turbomilk.ru/

Цитировать

6 | ucoz user пишет: | 06.11.2011 | 03:22 0

отличная штука !! единственное что , (я не знаток, а так самоучка) но всё же копал и стиль цсс и скрипт - изменить размеры так и не получилось, по любому встаёт криво выходит, то фон на половину не видно, то нет отцинтровки ((( весь день и так возился и так - не то.

кто может , точнее знает , подскажите высота нужна 110 - 120 пхб .
ширина заднего фона (задний фон -рамка) 555 пх - 600. при этом при движении ни один из боков фона исчезать не должен из видимого поля.

Цитировать

5 | Malika пишет: | 16.09.2011 | 13:23 0

а как можно сделать то же самое на Блоггере? и можно ли вообще сделать такую шапку на блоггере?? я бы очнь хотела себе такую, только вот пока нет возможности размещаться на платном хостинге dry

Цитировать

4 | vMovies пишет: | 18.08.2011 | 16:16 0

супер.

Цитировать

3 | pashok77007 пишет: | 11.06.2011 | 00:51 0

подскажите пожалуйста как на юкозе поставить?
по пальцам

Цитировать

2 | Skoda пишет: | 15.04.2011 | 21:30 +1

Спасибо, пригодиться. Для справки правильнее данный эффект называть - Эффект параллакса (paralax effect). Уже дано искал подходящий вариант реализации.

Цитировать

1 | Curious пишет: | 13.04.2011 | 17:27 0

Очени интересно!

Цитировать

RuleZ-DM	chernoffo	3loY
Silver	erudit	armenka
Angry	Skoda	iGosu