Анимированные кнопки с помощью jQuery
Здравствуйте!
Подскажите пожалуйста, есть ли примеры анимированных кнопок, реализованных с помощью jQuery. Интересует анимация - примерно как на этом сайте, реализованная с помощью Flash http://cms.template-help.com/magento_28513 |
Битая ссылка.
Но не глядя скажу что можно. Давай нормальную ссылку, напишу сегодня пример и отправлю) |
Огромное Спасибо за Ответ!!!
Странно, но ссылка у меня открылась, есть и другая с таким же примером: http://www.templatehelp.com/preset/p...V Xk8QZ8Kb403 а вот первоначальная, но у меня она открылась http://cms.template-help.com/magento_28513/ |
Первое и важное, я не в курсе как подгружать звук на jquery. Если найду , то воспользуюсь. А сейчас оглашу алгоритм работы данного плагина , после приступлю к реализации подобного примера. Итак первое что заметил: есть два события, наведение и отвод курсора с обьекта (картинка в данном случае или что вероятнее ссылка с фоновым изображением). Вообще два события. При наведении появляется темный прямоугольник и увеличивается на весь размер картинки , плюс само изображение увеличивается процентов на 10 и сразу уменьшается то базового значения, все это одновременно.плюс в нижней части появляется теск , эффект слайдшоу, и подобие аккордиона в веркней части. Ориентировочно данный пример потребует ресурсов нескольких библиотек, но все же реализуемо . При отводе курсора происходит все в обратном порядке, возможно как то все завязано на toggle, Постараюсь до конца субботы написать вариант, функциональный)
|
Да-да, по алгоритму - все так. К тому же не требуется полной идентичности примеру на флеш. Без звука - будет так же хорошо.
Я, если честно, пхп-кодер и jQuery использую некоторые основы и библиотеки, и думал, что есть готовый пример или библиотека. Поэтому - буду очень Рад и Признателен Вашему решению, к тому же, как я думаю, такой пример поможет многим. Спасибо! |
Ок, вот как раз сейчас занялся реализацией!
|
<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("#block").click(function(){
zoom();
setTimeout(' zoom2();', 1300)
});
})
function zoom(){
$("#block").animate({
width: "300px",
height:"300px",
opacity: 0.3,
left: 100/2*(-1),
top: 100/2*(-1)
}, 1300 );
$('#ptext').slideDown(1300);
$('#ptext2').toggle(1300);}
function zoom2(){
$("#block").animate({
width: "200px",
height:"200px",
opacity: 1.0,
left: 0,
top:0
}, 1300 );
//$('#ptext').slideUp(1300);
// $('#ptext2').toggle(1300);
}
</script>
<style type="text/css">
body {color:white;text-align:center; font-family: 'georgia'; font-size: 13px; } /* not important */
.basic {
width:200px;
height:200px;
float:left;
position:relative;
overflow:hidden;
}
.basic a img {
width:200px;
position:relative;
border:none;
}
.clear { clear:both; }
.ptext{
height:35px;
position:absolute;
top:-13px;
left:0px;
width:100%;
display:none;
background:#0c4b62;
color:white;
opacity:0.9;
}
.ptext2{
height:35px;
position:absolute;
bottom:-13px;
left:0px;
width:100%;
display:none;
background:#0c4b62;
color:white;
opacity:0.9;
}
.ptext .ptextInside{
padding:0px;
margin:0px;
}div {
position: absolute;
background-color: #abc;
left: 4px;
top:30px;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div class="basic">
<a href="#"><img id="block"src="images/15.jpg" width="200" height="200" /> </a>
<p class="ptext" id="ptext">CofeeNerd</p>
<p class="ptext2" id="ptext2">CofeeNerd</p>
</div>
</body>
</html>
Короче говоря это реально проще сделать на флеш. То что написал я просто делает зум и реверс , потом отображает верхнюю и нижнюю надпись. Но заметил что сначала появляется сам фон а потом выезжает надпись.Так и с нижним. Короче говоря к этим частям нужно применять какой нить плагин slider. В общем работает по клику, думаю что заменить что то не составит труда, например срабатываение при наведении или еще что. 1. Зум есть 2. Можно сделать появление обьекта в верху и внизу с помощью моей писанины , а потом применить к ним плагин с эффектом слайдера.Таких масса. Если будут вопросы,пишите. |
Наверное даже лучше делать дивы с слайдерами которые будут появляться верхний через hide, нижний как слайдер первое изображение которого прозрачное.
|
Окей! Огромное Спасибо!!! Буду пробовать!!!
|
Если что, пиши, мне самому до ума захотелось что т одовести, но только если кому то от это го будет прок!
|
| Часовой пояс GMT +3, время: 22:59. |