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

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

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


Регистрация кассового аппарата
Продажа, техническое обслуживание, регистрация кассовых аппаратов
escto.ru
Купить квартиру
Квартиры выставленные на торги! Ежедневно обновляемая база! Заходи
25-этаж.рф
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Апрель 2018    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30