Comments 10
<div id='cont'>
<div id='opacity'></div>
<div id='body'></div>
</div>
#body, #opacity {
width: 128px;
height: 128px;
z-index:2;
position: relative;
background: url('http://sverstay-ka.ru/plugins/backgroundImageTransition/style/img/css.png');
}
#opacity {
position: absolute;
opacity: 0;
z-index:3;
background: url('http://sverstay-ka.ru/plugins/backgroundImageTransition/style/img/css_h.png');
transition: opacity 0.3s ;
}
#opacity:hover {
opacity: 1;
}
Пример: jsfiddle.net/62cF5/1/
— — библиотека jQuery
— — плагин
У вас при наведении мышки большие картинки начинают «дрыгаться», а спрайты вообще уходят за поля документа.
Я писал об этом в статье. Читайте внимательнее.
Да, я видел. Как пример привел для сравнения. + баги поправьте.
Если говорить о сравнениях, то если в вашем примере будет иконка с тенью (с прозрачными элементами), то будет наложение альфа каналов. Насчет багов пожалуйста в личку или в сюда.
Можно даже проще
jsfiddle.net/DbqYw/
jsfiddle.net/DbqYw/
Понятно, что можно сделать и так. Но я преследовал иные цели:
Оставалось выносить иконку в отдельный элемент или создавать псевдоэлемент и анимировать css — свойство opacity. Но это меняло привычный подход к верстке. Хотелось решения, в котором не нужно было бы заботиться об особой структуре html-разметки, а в случае с псевдоэлементами и css-правил. Соответственно, избежать изменений в разметке и правилах в «старых макетах» (сверстанных ранее с использованием «старой» структуры), в которые было решено добавить плавную анимацию.
Я не понял, что автор имел ввиду под «старой структурой». Для меня, например меню в «старой структуре» выглядит как-то так:
Вся «мишура» выносится в CSS. И плавно анимируются иконки или нет, это уже никак не относится к «структуре».
<ul class="menu">
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Работы</a></li>
</ul>
Вся «мишура» выносится в CSS. И плавно анимируются иконки или нет, это уже никак не относится к «структуре».
Меня не покидает ощущение что вы сделали гужевую повозку из автомобиля
Ну куда же без jQuery, конечно.
Sign up to leave a comment.
«backgroundImageTransition», плавная анимация фоновых изображений