03:33 Анимация в стиле Google+ посредством jQuery и CSS3 | |
Google+ сделал большой шаг на пути развития взаимодействия интерфейсов с пользователями, а особенно хочется выделить анимацию интерфейса функции кругов. Я лично считаю, что такой ход вполне заслуживает уважения. Я попробовал реализовать данный эффект анимации посредством jQuery и CSS3. Мне понадобилось всего пару строк кода для применения стилей CSS посредством jQuery: .addClass() и .animation().  Попробуйте открыть эти демо-страницы в одном из современных браузеров. Для наилучшего результата я советую вам использовать Chrome. Демо 1 | Демо 2 | Демо 3 Код javascript $(".square").click(function(){}) - "square" – это имя класса тэга DIV. $(this).animation() и $(this).addClass() – применение анимации и стилей класса. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"><script type="text/javascript" src="easing.min.js"><script type="text/javascript">$(document).ready(function(){$(".square").click(function(){$(this).animate({width:'100px',height:'100px'}, 500, 'linear', function(){$(this).addClass('circle-label-rotate');}).addClass('circle').html(' Bye ').animate({"opacity":"0","margin-left":"510px"},1500);$(this).slideUp({duration: 'slow',easing: 'easeOutBounce'}).hide();});}); HTML код блоков 1 2 3 Круг Диаметр круга в CSS3 – 50 пикселей. .circle{border-radius: 50px; // Chrome & IE9-moz-border-radius: 50px; // Firefox-webkit-border-radius: 50px; // Safariheight:100px;width:100px;background:#dedede;} Вращение CSS3 вращение 0 - 360 градусов @-webkit-keyframes rotateThis{from {-webkit-transform:scale(1) rotate(0deg);}to {-webkit-transform:scale(1) rotate(360deg);}}.circle-label-rotate{-webkit-animation-name: rotateThis;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;} Прямоугольник Содержит CSS-код. .square{height:100px;width:500px;border:dashed 1px #000;margin-top:10px;} Внимание! У вас нет прав для просмотра скрытого текста. | |
|
| |
| Всего комментариев: 0 | |
