Как сделать такую шапку - Форум общения - Logical-portal

Время:

Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.143.1.47

Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.

Страница 1 из 1 1
Модератор форума: Hawk

Как сделать такую шапку

zheka0107

Сообщение оставлено 07.07.2012 в 15:13:36 | Сообщение #1

2440

Вот читаю прикольный блог, сайт. Только сейчас заметил прикольную шапку. Как сделать её?
Если не поняли что в ней прикольно, наведите на неё

Tr1plx

Сообщение оставлено 07.07.2012 в 15:17:47 | Сообщение #2

12828

zheka0107, сперва сделай шапку без эффекта, потом всунь её как картинку куда в After effects или Sony vegas, в общем куда хочешь.
Потом создай ей такой эффект, что она трясётся, выложи на сайт и готова.

(Я так не делал, просто знакомый мне сказал)

zheka0107

Сообщение оставлено 07.07.2012 в 15:24:32 | Сообщение #3

2440

RaMb0, ммм...понятно. Но трабла в том что у меня не сони вегаса, не After effects нету. >:)

Fo[Z]ik

Сообщение оставлено 23.07.2012 в 00:03:46 | Сообщение #4

20130

zheka0107, это на Jqery делается! Щас попробую выучить специально для тебя)
RaMb0, Кто те сказал, что это через вегас делается?

Luope

Сообщение оставлено 23.07.2012 в 06:42:49 | Сообщение #5

3706

Fo[Z]ik, ты ощибаешься, это делается с помощью CSS
zheka0107,
Создаешь 2 картинки, одну обычную, вторую с анимацией. Потом в CSS такое:

Code

Добавлено (23.07.2012, 06:42:22)
---------------------------------------------
Еще один вариант:

Code

Добавлено (23.07.2012, 06:42:49)
---------------------------------------------

Code

НА JS

Liiion911

Сообщение оставлено 23.07.2012 в 09:16:11 | Сообщение #6

7710

Ну вариантов море, в данном случае мы видим вообще ОДНУ картинку и вместо каких-либо эфектов обычным джейквери ее вращают очень быстро на 1 градус в разные стороны.

Код на том сайте примерно такой:
подключена библиотека jRumble.js или (jquery-rumble.js) ~ ссылка на либу на том сайте

далее в скрипте:

Code

  //Трясём логотип при наведении ))
  $(".small_logo").jrumble();
  $(".logo .eye").jrumble({x: 1, y: 0, rotation: 1, speed: 50});
  $(".logo .label").jrumble({x: 0, y: 1, rotation: 1, speed: 10});
  $(".logo .logo-text").jrumble({x: 0, y: 0, rotation: 1});
  $(".logo .slogan").jrumble({x: 1, y: 0, rotation: 1});

  $('.small_logo').hover(
  f

unction(){$(this).trigger('startRumble');},
function(){$(this).trigger('stopRumble');
});
$('.logo').hover(
function(){$(".logo span").trigger('startRumble');},
function(){$(".logo span").trigger('stopRumble');
});

вырвано из скрипта сайта ~ ссылка на скрипты сайта

сама шапень:

Code

<div class="logo-div">
    <a class="logo ir" href="/" title="Яхуею.ru">
     <span class="eye" style="position: relative; left: 0px; top: 0px; opacity: 1; -webkit-transform: rotate(0deg); ">Яхуею.ru</span>
     <span class="logo-text" style="position: relative; left: 0px; top: 0px; opacity: 1; -webkit-transform: rotate(0deg); ">смотри</span>
     <span class="label" style="position: relative; left: 0px; top: 0px; opacity: 1; -webkit-transform: rotate(0deg); ">и</span>
     <span class="slogan" style="position: relative; left: 0px; top: 0px; opacity: 1; -webkit-transform: rotate(0deg); ">удивляйся</span>

    </a>
   </div>

Покормить админа
Мой бложе !!!

Liiion911	Сообщение оставлено 23.07.2012 в 09:16:11 \| Сообщение #6
Заслуга лет Сообщения: 5223 7710	Ну вариантов море, в данном случае мы видим вообще ОДНУ картинку и вместо каких-либо эфектов обычным джейквери ее вращают очень быстро на 1 градус в разные стороны. Код на том сайте примерно такой: подключена библиотека jRumble.js или (jquery-rumble.js) ~ ссылка на либу на том сайте далее в скрипте: Code //Трясём логотип при наведении )) $(".small_logo").jrumble(); $(".logo .eye").jrumble({x: 1, y: 0, rotation: 1, speed: 50}); $(".logo .label").jrumble({x: 0, y: 1, rotation: 1, speed: 10}); $(".logo .logo-text").jrumble({x: 0, y: 0, rotation: 1}); $(".logo .slogan").jrumble({x: 1, y: 0, rotation: 1}); $('.small_logo').hover( f unction(){$(this).trigger('startRumble');}, function(){$(this).trigger('stopRumble'); }); $('.logo').hover( function(){$(".logo span").trigger('startRumble');}, function(){$(".logo span").trigger('stopRumble'); }); вырвано из скрипта сайта ~ ссылка на скрипты сайта сама шапень: Code <div class="logo-div"> <a class="logo ir" href="/" title="Яхуею.ru"> <span class="eye" style="position: relative; left: 0px; top: 0px; opacity: 1; -webkit-transform: rotate(0deg); ">Яхуею.ru</span> <span class="logo-text" style="position: relative; left: 0px; top: 0px; opacity: 1; -webkit-transform: rotate(0deg); ">смотри</span> <span class="label" style="position: relative; left: 0px; top: 0px; opacity: 1; -webkit-transform: rotate(0deg); ">и</span> <span class="slogan" style="position: relative; left: 0px; top: 0px; opacity: 1; -webkit-transform: rotate(0deg); ">удивляйся</span> </a> </div> Подпись пользователя: Покормить админа Мой бложе !!!
	Профиль ICQ Блог Цитата Вверх

Liiion911

Сообщение оставлено 23.07.2012 в 09:17:44 | Сообщение #7

7710

Luope, первый твой код вызывает JS функцию ChangeIMG где код функции ? xD

а в целом твой вариант требует две картинки и вторая должна быть анимированая )

Покормить админа
Мой бложе !!!

Как сделать такую шапку

Страница 1 из 1
1