D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2015 год

RSS лента новостей, Подписка по Email

      Простая анимация на CSS

         Я решил поделиться простейшей анимацией на CSS + Javascript. Просто, стильно, удобно, универсально. У меня ей все сайты обсыпаны. Можно делать выплывающие элементы, появляющиеся кнопки и вообще что угодно.
         Например, появляющийся по нажатию тескт:
         
Пишем в стилях:
#text{
opacity: 1; // Прозрачность 1
-webkit-transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transition: opacity 0.7s;}

         
Скрипт (меняет прозрачность с 0 до 1):
document.getElementById('text').style.opacity='0';
document.getElementById('text').style.opacity='1';

         И все! Скрипт можно вызывать onclick или как-то еще. Применяется к элементу с id="text". Между 1 и 2 строкой можно показать сам, например, скрытый элемент с ID text.
         Кстати, чтобы сработало в Гугл Хром, 2 строка скрипта должна быть с таймером: setTimeout("document.getElementById('text').style.opacity='1';", 500);. Иначе не все браузеры меняют первое значение на второе плавно. Они почему-то сразу показывают второе.

         Где посмотреть? Например, сверху справа у меня на dikij.com есть кнопки поиска и добавить в избранное. При наведении на хих формы выводятся с такой вот анимацией задержки. Также, выезжающее слева меню и цитата наверху справа. Ну и разворачивающиеся фреймы. Все это работает на такой вот анимации. Я только меняю длительность и webkit-transition: opacity на другие анимируемые свойства.

         
         
Главная, 1, 2,
( 70 )