|
Как сделать такую шапку
|
|
Ник: zheka0107 | Дата: 07.07.2012, 15:13 | Сообщение #1
distortion.
|
Вот читаю прикольный блог, сайт. Только сейчас заметил прикольную шапку. Как сделать её?
Если не поняли что в ней прикольно, наведите на неё 
| |
Ник: scraFFFy | Дата: 07.07.2012, 15:17 | Сообщение #2
FROST HEART
|
zheka0107, сперва сделай шапку без эффекта, потом всунь её как картинку куда в After effects или Sony vegas, в общем куда хочешь.
Потом создай ей такой эффект, что она трясётся, выложи на сайт и готова.
(Я так не делал, просто знакомый мне сказал)
| |
Ник: zheka0107 | Дата: 07.07.2012, 15:24 | Сообщение #3
distortion.
|
RaMb0, ммм...понятно. Но трабла в том что у меня не сони вегаса, не After effects нету. 
| |
Ник: Fo[Z]ik | Дата: 23.07.2012, 00:03 | Сообщение #4
One LIFE, One LOVE
|
zheka0107, это на Jqery делается! Щас попробую выучить специально для тебя)
RaMb0, Кто те сказал, что это через вегас делается?
| |
Ник: Luope | Дата: 23.07.2012, 06:42 | Сообщение #5
Luope
|
Fo[Z]ik, ты ощибаешься, это делается с помощью CSS
zheka0107,
Создаешь 2 картинки, одну обычную, вторую с анимацией. Потом в CSS такое:
Code <a href="url" onMouseOver="ChangeImg('ImgName1','Картинка после наведения')" onMouseOut="ChangeImg('ImgName1','Первая картинка')"> <img name="ImgName1" border="0" height=60" width="468" src="изначальная картинки" alt="любой текст"></a> Добавлено (23.07.2012, 06:42:22)
---------------------------------------------
Еще один вариант:
Code <style> 2 a.link{background:url(ССЫЛКА НА 1 ИЗОБРАЖЕНИЕ);} 3 a.link:hover{background:url(ССЫЛКА НА 2 ИЗОБРАЖЕНИЕ);} 4 </style> 5 <a class="link" href="#">Йа ссылко</a> Добавлено (23.07.2012, 06:42:49)
---------------------------------------------
Code <img border="0" src="ССЫЛКА НА 1 ИЗОБРАЖЕНИЕ" onmouseover="this.src='ССЫЛКА НА 2 ИЗОБРАЖЕНИЕ'" onmouseout="this.src='ОПЯТЬ ССЫЛКА НА 1 ИЗОБРАЖЕНИЕ'"/>
НА JS
| |
Ник: Liiion911 | Дата: 23.07.2012, 09:16 | Сообщение #6
|
|
Ну вариантов море, в данном случае мы видим вообще ОДНУ картинку и вместо каких-либо эфектов обычным джейквери ее вращают очень быстро на 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
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:17 | Сообщение #7
|
|
Luope, первый твой код вызывает JS функцию ChangeIMG где код функции ? xD
а в целом твой вариант требует две картинки и вторая должна быть анимированая )
| |
Покормить админа