1 291 Одним из самых популярных и простых эффектов на CSS3, является анимация движения ссылок.
Такую вещь можно сделать и на JavaScript ( включая MooTools, jQuery и Dojo Toolkit) и на CSS3. Чем сегодня и займемся.
CSS3
Первый шаг, определить основные элементы для анимации:
|
1 2 3 4 5 6 |
#animateList li a { cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */ } |
Основные параметры для анимации задали, теперь повесим свойство padding при наведении на элемент мышкой.
|
1 2 3 |
#animateList li a:hover { padding-left: 20px; } |
Как только на анкоре срабатывает hover, ссылка анимируется передвижением слева направо за 250 миллисекунд. Бум! Анимация движения ссылок без JavaScript готова.
Однако, помните, что в CSS нет обратной связи, и если вам нужно что-то посложнее, тогда без JavaScript никак не обойтись.
Бонус. Анимация движения ссылок на jQuery
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $('a.nudge').hover(function() { //mouse in $(this).animate({ paddingLeft: '20px' }, 400); }, function() { //mouse out $(this).animate({ paddingLeft: 0 }, 400); }); }); |
Здравствуйте! Подскажите пожалуйста, куда вставлять код
$(document).ready (function () {
$('a.nudge').hover (function () { //mouse in
$(this).animate ({ paddingLeft: '20px' }, 400);
}, function () { //mouse out
$(this).animate ({ paddingLeft: 0 }, 400);
});
});
на WordPress?
возьми в оберни этот код в тэг и размести в файле header.php
В жава скрипт