Замечательный плагин, который придаст вашему сайту оригинальность и позволит вашим пользователям насладиться замечательными качественными эффектами при наведении курсора на ссылки
Для начала посмотрите
ДЕМО
Установка:
1#: В самый низ вашего CSS вставляйте:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.effects { clear:both } .effects li { display:inline-block; *display:inline; font-size:24px; padding:4px 10px; cursor:pointer } .effects li:first-child { background:#222; float:left; opacity:0.6; height:auto; width:180px; text-align:left; } .effects li:hover { color:#fff; } i { font-size:0.5em } .jEffects-particle { font-size:20px; font-family:arial; z-index:2; position:absolute } .distance { height:80px;} .distance li.first { *margin-right:160px; } .distance li { *float:left; height:40px; vertical-align:top; border-top:1px solid #666; } .distance li img { opacity:0.6 } .distance li:hover img { opacity:1.0 } .concentrate li { opacity:0.6; } .concentrate li:hover { opacity:1.0; } #overview { margin:auto; width:370px; text-align:left; color:#fff } #overview pre { background:#246; padding:4px; } .themes { position:fixed; left:0; top:0; z-index:10; width:100% } a.theme { float:left; background:#eee; color:#222; top:0; display:block; padding:6px; font-size:24px; height:46px; line-height:46px; } a.buy { background: #202020; color:#FFFFFF; } a.white { left: 0; } .jeffects_min { display:none } .jorbital { float:right; color:#fff } |
2#: После /head на нужных страницах вставляйте:
|
|
<script type="text/javascript" src="/js/jquery.jeffects.js"></script> <script> $( function() { $("a[href]").jEffects({ type:'bomb', randomizeParticles: true, colors: [ "#f88", "#8e4", "#4bf"], particles: 16, radius:64 }); }); </script> |
Разберёмся с настройками:
type:'bomb' - тип используемой анимации (fireball , bomb , snow , bubbles , concentrate)
randomizeParticles: true - использовать ли беспорядочные направления анимации (true или false)
colors: [ "#f88", "#8e4", "#4bf"] - используемые цвета
particles: 16 - количество вылетающих элементов при наведении
radius:64 - максимальный радиус элемента
Осталось лишь залить JS файл из прикреплённого архива в папку
jsАвтор публикации
12
Я не понял вашего вопроса, но постараюсь на него ответить...
Отличные эффекты, но, к сожалению мне не подходит- мое меню- гамбургер сжимается как jpeg формат в очке тигра
Ну и фразочка