Спецификация CSS Transitions вобрала в себя перечень параметров, которые можно «оживить». Данный список, насколько нам известно, охватывает анимационные параметры как для переходов, так и для покадровой анимации. Но это всего лишь список параметров, не больше. И так как CSS3-градации – это не совсем параметры, а изображения, создаваемые браузером, они, очевидно, не входят в этот перечень параметров с возможностью анимации. Но это не значит, что в
...
Читать дальше »
|
Анимация – это как раз тот отличный эффект, создание которого сильно упрощается за счет таких javascript-платформ как MooTools и jQuery. Сегодня мы хотим предложить вам отличное jQuery-руководство, в котором рассказывается о разработке анимированного фонового изображения на странице. Воспользуйтесь отрывком кода MooTools, который также продемонстрирует вам процесс интеграции данного эффекта в любую веб-страницу. [img]/uploads/posts/2012-05/1337936751_bg-clouds.jpg[/img]
CSS-код #animate-area { background-image: url(clouds.png);background-position: 0px 0px;background-repeat: repeat-x;} Первый этап заключается в установке изображения в качестве фона нашего конкретного контейнера. Не забудьте сделать так, чтобы фон повторялся в горизонтальном направлении! javascript-код MooTools window.addEvent("domready",function() {//settingsvar duration = 40000;var length = 2000;var count = 0;var tweener
...
Читать дальше »
|
Строку прогресса можно повстречать где угодно. Например, строка прогресса есть почти в каждом браузере или менеджере загрузок, – она отображает стадию завершенности закачки файла. Разрабатываете приложение для рабочего стола или веб-приложение, в определенный момент вам обязательно понадобится данный элемент интерфейса. Учитывая это, в нашем сегодняшнем руководстве мы хотели бы научить вас создавать стильные анимированные строки прогресса посредством CSS3. HTML Разметка не может быть еще проще:
* .progress-bar – определяет основные стили строки прогресса. * .blue – в данном случае, CSS-класс blue добавляет синий стиль для строки. * .stripes – тип анимации для текущей строк
...
Читать дальше »
|
Хотите создавать красивые слайд-шоу презентации для веб, используя только лишь HTML и CSS? С Impress.js это больше не проблема, так как это полноценная платформа трансформаций в CSS3, которая позволяет вам конвертировать HTML-контент в слайд-шоу с великолепными эффектами. Impress.js – это jQuery-плагин, созданный на просторах github пользователем bartez, который использует CSS3-функционал для создания презентаций. Все современные браузеры будут поддерживать великолепные визуализации, созданные с помощью Impress.js. Скачивание и установка Impress.js Скачивайте Impress.js с ресурса github. Кликните по кнопке zip, как показано на скриншоте
...
Читать дальше »
|
Веб-приложений для проектирования и редактировая изображений много, и с каждым днём они всё более набирают вес в качестве альтернативы стационарному ПО графической обработки. Однако, среди них с трудом можно отыскать сервисы с "поддержкой GIF-анимации", так что, решать задачу построения анимированных GIF-фрагментов без приложений рабочего стола тяжеловато. [img]/uploads/posts/2012-06/1340788271_online-animated-gif-creator.jpg[/img]
MotherEffingAnimatedGIF - очень простое в использовании, но функциональное веб-приложение с открытым исходным кодом для быстрого построения таких изображений в режиме онлайн. Просто "перетаскиваете" любое количество изображений на рабочую панель приложения, выстраиваете их, разворачиваете нужной стороной, настраиваете их масштаб + качество, а также скорость чередования кадров. Далее можно проиграть анимированный GIF в окне предварительного просмотра и скачать себе го
...
Читать дальше »
|
Почти у каждого веб-дизайнера или разработчика имеется хотя бы чуточка опыта во Flash. И все мы помним, каким образом работает пошаговая анимация: вы определяется положения объекта в нескольких кадрах, и программа сама воспроизводит анимацию. Существует также пошаговая анимация на CSS3 (На сайте CSS-Tricks можно найти отличную статью на эту тему), где основная логика очень схожа, но вы анимируете элемент посредством параметров CSS. Rekapi – это библиотека, которая реализует пошаговую анимацию и посредством javascript. Она также позволяет нам определить объекты, кадры, анимации и контролировать положение сцены (воспроизведение, пауза, остановка). [img]/uploads/posts/2012-07/1342178803_rekapi-js-keyframe.gif[/img]
Прорисовка
...
Читать дальше »
|
Сегодня мы поговорим с вами об анимационном эффекте «marquee» или иными словами - бегущая строка. Не так давно мы уже рассказывали вам о параметре -webkit-marquee, но на этот раз мы собираемся продвинуться немного дальше. [img]/uploads/posts/2012-07/1343247263_marquee-01.jpg[/img]
В нашем сегодняшнем руководстве мы займемся разработкой эффекта в стиле бегущей строки при помощи CSS3-анимаций. Таким образом у нас будет возможность добавить больше функционала, который может быть реализован только лишь посредством -webkit-marquee. Если вы до сих пор не знакомы с анимациями в CSS3, то мы настоятельно рекомендуем вам ознакомиться с некоторой документацией: * CSS3 Animations – W3School *
...
Читать дальше »
|
Сегодня мы хотим рассказать вам о том, как разработать временные оповещения посредством анимаций в CSS. Суть заключается в том, чтобы отображать оповещение или предупреждение определенный промежуток времени, а затем скрывать его. Мы воспользуемся небольшим индикатором прогресса, чтобы отобразить, сколько времени осталось до исчезновения блока. Вы наверняка уже видели подобное. Например, мы наткнулись на подобный эффект на сайте buysellads.com, где временные оповещения используются для подтверждения сохранения изменений. Что касается разметки, то здесь мы просто воспользуемся разделом с сообщением внутри, а также дополнительным разделом для небольшой строки прогресса: Your settings have been saved successfully! |
Недавно мы работали над одним проектом, в котором нам нужно было как-то акцентировать внимание на важных оповещениях. В целом, каждый раз когда менялось оповещение, нужно было сопроводить это визуальным эффектом, чтобы привлечь внимание посетителя. Мы реализовали это с помощью пошаговой анимации на CSS3. HTML В данном примере мы воспользуемся структурой разметки из нашего выпадающего меню на CSS3. Акцент будет н
...
Читать дальше »
|
JZoopraxiscope – это jQuery-плагин, разработанный под вдохновением от первого пленочного проектора Zoopraxiscope, и предназначенный для создания анимаций из списка статичных изображений. Кроме jQuery он также использует jQuery UI и анимирует только одним горизонтальным изображением. Вся работа заключается в вызове простой функции, в которой мы указываем расширение изображений и кадра. [img]/uploads/posts/2012-08/1345193890_jzoopraxiscope.jpg[/img]
Кроме того, JZoopraxiscope работает при помощи представленных кнопок воспроизведения и паузы. Хотя сложно представить широкое применение этого плагина, чуточка креативности поможет вам без труда оформить веб-страницы. Требования: jQuery и jQuery UI Совместимость: все современные браузеры Веб-сайт:
...
Читать дальше »
| |
