—»     —»   Анимация в стиле Google+ посредством jQuery и CSS3
  Раздел: Анимация, CSS/Style Sheets   Комментариев: 1  

Анимация в стиле Google+ посредством jQuery и CSS3



Google+ сделал большой шаг на пути развития взаимодействия интерфейсов с пользователями, а особенно хочется выделить анимацию интерфейса функции кругов. Я лично считаю, что такой ход вполне заслуживает уважения. Я попробовал реализовать данный эффект анимации посредством jQuery и CSS3. Мне понадобилось всего пару строк кода для применения стилей CSS посредством jQuery: .addClass() и .animation().

Анимация в стиле Google+ посредством jQuery и CSS3

Попробуйте открыть эти демо-страницы в одном из современных браузеров. Для наилучшего результата я советую вам использовать 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>
<script type="text/javascript" src="easing.min.js"></script>
<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('<div class="innertext">Bye</div>').animate({"opacity":"0","margin-left":"510px"},1500);
$(this).slideUp({duration: 'slow',easing: 'easeOutBounce'}).hide();
});
});
</script>

HTML код блоков

<div class='square'>1</div>
<div class='square'>2</div>
<div class='square'>3</div>

Круг

Диаметр круга в CSS3 – 50 пикселей.

.circle
{
border-radius: 50px; // Chrome & IE9
-moz-border-radius: 50px; // Firefox
-webkit-border-radius: 50px; // Safari
height: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;
}

Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Google Plus, jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 11025   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 3 февраля 2012 @ 18:08
Написал: Sana2020 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо,хорошая анимация в стиле Google,мне понравилось,пожалуйста выложите еще что-нибудь подобное!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Как начать играть в страйкбол в москве
как начать играть в страйкбол в москве
msk-sigma.ru
Geze доводчики
Инструкции к доводчикам, замкам и др
doork-shop.ru
Мужской халат бамбуковый
Официальный сайт мужского журнала. Адреса магазинов мужской моды
lolotex.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930