Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.119.137.175
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модератор форума: Hawk  
Как сделать такую шапку
Сообщение оставлено 07.07.2012 в 15:13:36 | Сообщение #1
Вот читаю прикольный блог, сайт. Только сейчас заметил прикольную шапку. Как сделать её?
Если не поняли что в ней прикольно, наведите на неё :Q

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

(Я так не делал, просто знакомый мне сказал)
 
 
   
Сообщение оставлено 07.07.2012 в 15:24:32 | Сообщение #3
RaMb0, ммм...понятно. Но трабла в том что у меня не сони вегаса, не After effects нету. >:)
 
 
   
Сообщение оставлено 23.07.2012 в 00:03:46 | Сообщение #4
zheka0107, это на Jqery делается! Щас попробую выучить специально для тебя)
RaMb0, Кто те сказал, что это через вегас делается?
 
 
   
Сообщение оставлено 23.07.2012 в 06:42:49 | Сообщение #5
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
 
 
   
Сообщение оставлено 23.07.2012 в 09:16:11 | Сообщение #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
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>
 
   
Сообщение оставлено 23.07.2012 в 09:17:44 | Сообщение #7
Luope, первый твой код вызывает JS функцию ChangeIMG где код функции ? xD

а в целом твой вариант требует две картинки и вторая должна быть анимированая )
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика