03:32 Элемент оповещения на keyframe-анимации CSS3 | |
Недавно мы работали над одним проектом, в котором нам нужно было как-то акцентировать внимание на важных оповещениях. В целом, каждый раз когда менялось оповещение, нужно было сопроводить это визуальным эффектом, чтобы привлечь внимание посетителя. Мы реализовали это с помощью пошаговой анимации на CSS3.  HTML В данном примере мы воспользуемся структурой разметки из нашего выпадающего меню на CSS3. Акцент будет на «span class="bubble"», который является облачком оповещения, которое нам нужно анимировать. CSS Класс .animating отображает CSS3-анимацию, которая использует кривую Безье. .animating{animation: animate 1s cubic-bezier(0,1,1,0);}@keyframes animate{from {transform: scale(1);}to {transform: scale(1.7);}} jQuery Не так-то просто перезапустить анимацию, и Крис Койер написал отличную статью, посвященную этому. Выбранный нами метод включает использование метода setTimeout() из javascript. Итак, каждый раз когда значение оповещения изменяется, класс .animating исключается по прошествии секунды (примерно столько длится анимация). Вам не понадобится переменная counterValue. Здесь она используется лишь для того, чтобы иметь возможность повышать и понижать значение. var counterValue = parseInt($('.bubble').html()); // Get the current bubble valuefunction removeAnimation(){setTimeout(function() {$('.bubble').removeClass('animating')}, 1000);}$('#decrease').on('click',function(){counterValue--; // decrement$('.bubble').html(counterValue).addClass('animating'); // animate itremoveAnimation(); // remove CSS animating class})$('#increase').on('click',function(){counterValue++; // increment$('.bubble').html(counterValue).addClass('animating'); // animate itremoveAnimation(); // remove CSS animating class * Посмотреть демо Просто, но эффективно Нам кажется, что наш сегодняшний пример очень практичный, и отлично отображает то, как можно использовать анимации из CSS3. У вас будет возможность поэкспериментировать со значения кривой Безье и добиться других отличных эффектов. Спасибо за чтение! Хотелось бы услышать ваше мнение. | |
|
| |
| Всего комментариев: 0 | |
