Css3 — Анимированный каталог товаров

Содержание

Анимация CSS: примеры

В создание анимации можно не только ограничиваться специальными программами, а и использовать возможности каскадной таблицы CSS3. Опираясь на знания и свою фантазию вырисовывать эффекты в CSS анимации без использования каких-либо дополнений. Тем более CSS анимация — это хороший способ произвести впечатления на своих пользователей при правильном ее размещении. С помощью анимации CSS можно заставить шевелиться практически все, текст, картинку, произвольные фигуры и все остальное что придет на ум.

В статье постараемся подробнее ознакомиться с возможностями анимации и ее применениями. А также приведем несколько интересных примеров с различными эффектами.

Поддержка браузеров.

Для поддержки анимации всеми популярными браузерами применяется нестандартное свойство, префикс. Оно обозначается в начале строки каждому браузеру в отдельности.

Браузер Explorer Chrome Firefox Safari Opera
Версия 10.0 4.0 16.0 4.0 15.0
animation -webkit- -moz- -webkit- -webkit-

Internet Explorer 10 поддерживает без префикса. Браузер Опера распознает префикс –webkit поэтому значение -o- можно не применять.

Начальный кадр анимации.

С помощью свойства @keyframes создается начальный кадр анимации, который необходимо привязать к определенному селектору. Затем указать по крайней мере два действия:

— название анимации
— продолжительность анимации

Пример.

HTML

CSS

Примечание: Если не указана продолжительность анимации, то никаких действий не произойдёт поскольку по умолчание она равна нулю.

Как работает CSS анимация?

Анимация дает возможность переходить с одного стиля на другой при этом плавно их меняя. Изменить можно многие элементы, а главное – неоднократно, столько раз сколько нужно. Переход анимации указывается в процентах от 0% до 100% или же ключевыми словами от «from» до «to».

Пример.

HTML

CSS

Примеры анимации в логотипе.

Возможно, данное применение нечасто встретится в веб-дизайне разве что за исключение в промо — роликов. Но весьма будет интересным для глаз и может вдохновить на бедующее создание логотипа.

Другие примеры анимации

Где еще можно применить анимацию? Да где угодно, анимация способна двигать многие веб-элементы: меню, ссылки, обычный текст и т.д. Действия практически неограниченные, даже с помощью анимации возможно заменить некоторые javascript`ы.

40 CSS 3 и Jquery красивостей для сайта

1. CSS текстовый эффект

Плагин для реализации сменяющихся слов с различными анимированными эффектами. CSS эффект подойдет для реализации промо-сайтов и анимированных баннеров.

2. CSS3 вертикальные и горизонтальные вкладки (табы)

Реализация разбиения содержимого страницы на вкладки (табы) с использованием анимированных CSS3 эффектов. Четыре варианта исполнения: горизонтальные и вертикальные табы с различными анимированными эффектами.

3. Адаптивный jQuery слайдер на основе плагина IMPRESS.JS

Классный слайдер с имитацией 3D эффекта при пролистывании слайдов. При увеличении/уменьшении размера экрана — изменяется размер шрифта, изображений и всех элементов на слайде, что гарантирует корректное отображение при любом расширении экрана. Предусмотрена автоматическая прокрутка.

4. jQuery CSS плагин «Responsive Horizontal Layout»

jQuery решение для создания удобной навигации по разделам документа без перезагрузки страницы. Каждый раздел отображается в отдельном блоке с вертикальной прокруткой, а переход между ними можно осуществить как с помощью клика мыши, так и воспользовавшись заглавием (при большом расширении экранов содержание заглавие отображается с левой стороны, при просмотре сайта на малом экране — сверху документа).

5. HTML5 CSS3 стильная форма авторизации и регистрации

Переключатель между формами авторизации и регистрации с проверкой заполнения полей. Для того, чтобы переключиться на форму регистрации на демонстрационной странице нажмите на ссылку «Join us» снизу формы

6. Плагин «Content Navigator» с применением CSS3

Реализация навигации по содержимому в виде Список категорий → Список разделов → Содержимое раздела. Навигация сопровождается различными JS эффектами.

7. CSS3 слайд-шоу с Parallax эффектом

Пролистывание слайдов осуществляется с Parallax эффектом (движение слоев с различной скоростью, в совокупности создают 3D эффект). Размер слайдера изменяется пропорционально изменению размера окна браузера.

8. Аудио слайд-шоу с использованием jQuery плагина jPlayer

Слайд-шоу с музыкальным сопровождением. Есть возможность ставить на паузу или проматывать музыкальную композицию.

9. Parallax эффект при прокручивании страницы с помощью jQuery и CSS

jQuery решение для реализации 3D эффекта при прокрутке страницы. Вы также можете подробнее почитать по-русски.

10. jQuery плагин для загрузки файлов на сервер «File Upload»

Функциональное свежее решение для загрузки файлов на сервер. Возможна загрузка нескольких файлов одновременно. Подробнее о плагине вы можете прочитать на русском.

11. Своеобразное меню на jQuery и CSS

При выборе пункта меню область с его содержимым раскрывается поверх.

12. Горизонтальное анимированное jQuery меню

Выпадающее горизонтальное меню с интересным jQuery эффектом появления вложенных пунктов.

13. «TimeLine» плагин для хронологического отображения выполненных работ в портфолио

Обалденный jQuery CSS плагин, будет очень полезным дополнением для сайта любой веб-студии или фрилансера. С его помощью можно наглядно отобразить примеры выполненных работ с разбивкой по времени. Внизу отображается сама временная шкала, а сверху выполненные работы. Для перехода между работами можно использовать как шкалу, так и стрелки влево/вправо.

Цукерберг рекомендует:  Что нового в PHP 5.5

14. Галерея «TouchTouch», оптимизированная для просмотра с мобильных устройств

15. CSS3 слайдер изображений «Cycle Slider»

16. CSS галерея изображений в стиле аккордеон

При клике на название выезжает изображение с описанием. Используется только CSS3.
Урок по созданию галереи [in English].

17. Классные яркие всплывающие подсказки jQuery и CSS3

Всплывающие jQuery подсказки в 7 стилевых оформлениях. Легко подключить и использовать в своих проектах.

18. «jPages» галерея изображений с миниатюрами

Если изображений в галерее больше 5, то появляются стрелки влево/вправо для навигации по фотографиям.

Креативное анимированное меню CSS3

Эксперименты с CSS3 могут привести к замечательным эффектам, которые появляются при наведении курсора мыши. Идея заключается в простом сочетании элементов (иконки, основного и вспомогательного заголовков), которые анимируются и трансформируются при наведении курсора мыши. В уроке объясняется, что происходит с элементами.

Иконки в демонстрации созданы с использованием шрифта Web Symbols, которые подключается с помощью @font-face . Шрифт разработан студией Just Be Nice.

Разметка HTML

Структура HTML для меню представляет собой неупорядоченный список, в котором каждый пункт является ссылкой, содержащей элемент span иконки и элемент div содержания (для основного и вспомогательного заголовков):

Общая часть стилей для всех примеров включает шрифт для иконок:

Путь к файлам указывается относительно файла CSS. Следовательно, они располагаются в папке css/websymbols/.

Преимуществом использования шрифта для формирования иконок является то, что к ним можно применять все эффекты CSS3 (например, тени текста) и легко масштабировать так, как нужно.

Стиль для неупорядоченного списка будет одинаковый для всех примеров с небольшими вариациями:

В последующем описании примеров будут показаны стили всех элементов, участвующих в формировании эффекта.

В первом примере будут описаны все элементы, а в последующих фокус сместиться на отличиях.

Примечание: В описании примеров не используются префиксы браузеров, но в коде демонстрации они присутствуют.

Пример 1

В данном варианте сформировано вертикальное меню. При наведении курсора мыши изменяется размер элементов и цвет фона всего пункта.

Стили для пункта списка:

Трансформация будет выполняться для всех свойств, так как нужно изменять цвет рамки и фона.

Ссылка будет иметь следующие стили:

Стили для одного элемента. Элемент span иконки будет размещаться слева:

Мы используем шрифт Web Symbol, поэтому каждый символ будет иконкой.

Контейнер для содержания будет иметь следующие стили:

Элементы содержания будут изменять размер шрифта и использовать линейную трансформацию.

А при наведении курсора мыши на пункт меню элемент списка будет изменять размеры шрифта и цвета:

Пример 2

Во втором варианте мы добавим анимации для элементов содержания. Они будут выдвигаться сверху и снизу.

Определим две анимации. Первая будет начинаться с опускания соответствующего элемента вниз на 200%. Также непрозрачность элемента устанавливается в 0. А конечной точкой анимации будет установка элемента в его позицию (0%) и полной непрозрачностью.

Вторая анимация использует тот же принцип, но для смещения элемента вверх:

Пример 3

В данном варианте при наведении курсора мыши меняется цвет фона и текста. Также инока увеличивается и поворачивается вокруг оси, для чего используется увеличение размера шрифта иконки:

Пример 4

Примеры с 4 по 8 используют другой шаблон для меню. Пункты меню располагаются горизонтально рядом друг с другом.

Иконка располагается в верхней половине пункта по центру:

Контейнер содержания располагается в нижней части пункта:

Основной и вспомогательный заголовки имеют следующие стили:

При наведении курсора мыши на пункт иконка будет размываться и выскальзывать сверху, также изменяется цвет фона, а содержание будет выскальзывать сверху и снизу:

Размытие иконки происходит за счет установки прозрачности текста и определения тени с большим рассеянием. Анимация определяется такой же как и выше приведенном примере за исключением установки большего значения смещения.

Пример 5

В пятом примере иконка будет выскальзывать слева, главный заголовок — справа, а вспомогательный заголовок — снизу:

Анимация moveFromBottom уже использовалась в выше приведенных примерах. А анимация moveFromLeft смещает соответствующий элемент влево и затем перемещает его на оригинальную позицию:

Пример 6

В данном варианте заголовок будет выскальзывать слева и одновременно поворачиваться вокруг своей оси:

Анимация moveFromLeftRotate будет перемещать элемент и одновременно поворачивать его вокруг оси:

Пример 7

В данном примере вспомогательный заголовок будет размещаться внизу пункта:

При наведении курсора мыши вспомогательный заголовок будет выскальзывать снизу и менять цвет фона, иконка будет выскальзывать снизу, а основной заголовок будет увеличиваться до от маленького до нормального размера:

Анимация smallToBig выполняет трансформацию масштаба:

Пример 8

В данном примере будет увеличиваться весь пункт при наведении курсора мыши. Для эффекта будет изменяться масштаб до значения 1.1. Также иконка с идентификатором #heart будет особенной. Она будет красной, а при наведении курсора мыши для нее будет использоваться анимация smallToBig в бесконечном цикле для имитации биения сердца.

Пример 9

Два последних примера используют круги для оформления пунктов меню:

Чтобы создать круг, нужно установить радиус для рамки равным половине высоты/ширины элемента. Размещаем элемент абсолютно и центрируем его.

При наведении курсора мыши на пункт меню будет происходить следующее:

Пример 10

В последнем примере пункты списка имеют левое поле равное -48px. они перекрывают друг друга. При наведении курсора мыши будет изменяться масштабт и увеличиваться значение свойства z-index , чтобы поднять нужный пункт над остальными.

Заключение

Все трансформации и анимации будут работать в последних версиях современных браузеров.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/
Перевел: Сергей Фастунов
Урок создан: 3 Ноября 2011
Просмотров: 59823
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

CSS3 Анимация: 10 Впечатляющих примеров

Одни из лучших примеров CSS3 анимации.

Свойства CSS3 открыли огромное количество новых дверей для веб-разработчиков и дизайнеров, позволяя создавать анимацию и интерактивность прямо в CSS разметке, обходя стороной Flash, Silverlight или After Effects. Ниже мы собрали лучшие примеры CSS3 анимации, включая отдельные эффекты и сайты.

01. One Shared House

One Shared House – это веб-документалка об опыте UX дизайнера Ирен Перейры (Irene Pereyra), которая была частью феминистской коммуны в 1970-х годах в Амстердаме. Как только вы попадете на сайт, то будете не одни: за движениями вашего курсора будут следить.

Вместо банального скроллинга Перейра и ее портнер Антон Реппонен (Anton Repponen) черпали вдохновение из игры ‘Where in the World is Carmen Sandiego?’ ранних 90-х. Они использовали нижний экран, чтобы разделить контент, давая вам возможность по-совему определить уровень вовлечения в историю.

Взаимодействие сочетается с повествованием, чтобы придать завораживающий и новый опыт. Также важна смелость и упорство Перейры и Реппонена, которые вели этот само-финансируемый проект в течение двух лет: “Это позволяет нам эксперементировать с дисциплинами и техниками, для которых обычно нет места в клиентских проектах”, – говорит Перейра.

02. Type Terms

Type Terms – это анимированная шпаргалка, созданная Supremo – веб-дизайн агенством из Манчестера. Проделав некоторые исследования, они обнаружили, что самая интересная информация в сети о типографике представляет собой простые, статичные картинки. Команде нужен был повод для эксперемента с SVG и CSS анимацией, и это стало прекрасной возможностью.

Цукерберг рекомендует:  Вакансии ООО Хоум Кредит энд Финанс Банк

“Я решил создать что-нибудь визуально привлекательное, что помогло бы помочь новым дизайнерам в изучении ключевых типографических правил”, – говорит дизайнер Дэн Хэйвуд (Dan Heywood).

Команда подчеркивает важность того, чтобы дизайнеры хорошо разбирались в типографике. Для тех, кто впервые изучает правила, или для опытных дизайнеров, нуждающихся в переподготовке, этот чит-лист является одновременно учебным и приятным для изучения. Контент сфокусирован, информация понятна, а CSS анимация гладкая и плавная.

03. Waaark

Любое взаимодействие на сайта Waaark открывает невероятное внимание к деталям. Арт директор Джимми Рахериарисоа (Jimmy Raheriarisoa) и фронтенд разработчик Антон Водняк (Antoine Wodniack), создавшие студию French, все продумали. Они распланировали как будут меняться сцены с одной страницы на другую, как меркнет текст и какой будет анимация для SVG графики.

Все воплощается в жизнь, сохраняя при этом производительность и доступность. Они добавили горячие клавиши, чтобы сделать опыт использования лучше для всех людей.

Отвечая на вопрос о своем недавно выпущенном портфолио, Водняк пояснил, что взаимодейсвие было ключевым моментом: «Интернет становится все более и более креативным, и становится необходимым образовывать творческий дуэт между разработчиком и дизайнером. Разработчикам всегда нужны новые испытания, а Дизайнеры нуждаются в решениях, чтобы сделать их идеи возможными ».

04. Periodic table

Периодическая таблица элементов – это популярный объект для дизайнеров, чтобы продемонстрировать новые веб технологии. Разработанная веб дизайнером из Барселоны Рикардо Кабелло (Ricardo Cabello) – эта таблица при первом запуске собирается из множества анимированных элементов.

Эту таблицу можно крутить в разных направлениях с помощью мышки. Также можно изменить форму таблицы внизу страницы.

Кабелло проэкспериментировал, сможет ли он использовать свою JavaScript библиотеку three.js, чтобы перенести эффекты из демо в игровой движок famo.us.

Кабелло также опубликовал видео, демонстрирующее работу демо на iPad 2:

05. CSS Creatures

Все мы знаем, что работа в дизайн индустрии иногда может стать монотонной, так что оторвитесь от своего расписания и повеселитесь с этим милым маленьким CSS проектом.

CSS Creatures позволяет пользователям создавать и анимировать для себя собственного веб-приятеля. Звучит здорово? Все что нужно сделать это отправить твит на @CSSCreatures с желаемым цветом, характером и функциями. Ваше CSS создание появится на сайте менее чем за 25 секунд!

06. AT-AT Walker from Star Wars

Эта иллюстрированная CSS3 анимация создана Энтони Калзадилла (Anthony Calzadilla). Кликните на “view the bones” ссылку на iPad и увидите, как кажая деталь двигается и функционирует.

07. GT America

Grill Type выпустил новый шрифт GT-America. Каждая часть этого сайта рассказывает историю о шрифте.

GT-America назван в честь страны, в которой черпал вдохновение, — Соединенных Штатов. Здесь более 40 анимаций, созданных дизайнером Джошем Шаубом (Josh Schaub). Вы даже можете взаимодействовать с сайтом, чтобы оживить иллюстрации. Нам нравится, как использовалась анимация и видео, чтобы показать невероятную гибкость шрифта.

08. Caaaaaaaat

Японский веб дизайнер и интерактивный директор Масаюки Кидо (Masayuki Kido) создал этого анимированного котика, который растягивается по ширине окна браузера. Сделайте окно достаточно узким и слово изменится с забавными последствиями. Это не все, что может предоставить сайт, но мы не хотим оставлять спойлеров – идите и посмотрите сами!

09. Greenwich Library

Обычно сайты публичных услуг не отличаются красотой и удобством, но сайт бибилиотеки Гринвича – исключение из правил. Дизайн этого сайта является результатом двух лет исследований, тестирования и разработки.

Наш самый любимый момент – это иллюзия отрисовки элементов при прокрутке. Обычно этот трюк создается с помощью SVG, но в данном случае использовались обычные CSS анимации и расслоение элементов, которые выглядят даже интереснее сложной SVG графики.

10. Interactive album covers

Многие обложки классических музыкальных альбомов не только были переделаны на CSS, но они даже реагируют на музыку! Демонстрация включает First Impressions от Stroke и Joy Division’s Unknown Pleasures. Важно: работает только в Google Chrome.

Css3 — Анимированный каталог товаров

Анимация svg свиньи копилки с помощью GSAP tweenmax

Трава на канвасе

Реалистичная трава, колышущаяся от ветра. Камеру можно двигать и смотреть с разных ракурсов. Сделано на three.js

Улитка на CSS

Анимация улитки на чистом CSS

Анимация svg сферы с помощью anime.js

Анимация svg сферы с помощью библиотеки anime.js

Эффект рисования карандашом svg изображения Микки Мауса

Эффект постепенного рисования карандашом. В данном случае воспроизводим рисование заставки к мультфильмам Уолта Диснея. SVG уже нарисован, остается только анимировать в правильном порядке svg path

Велосипедистка

Велосипедистка анимированная с помощью CSS.

Бесконечная галактика

Зацикленная анимация на чистом CSS

3D сфера на чистом CSS

3D анимация сферы на чистом CSS

Анимация жидкости

Анимация жидкости на three.js

Animate.css — сборка CSS3 анимаций

Animate.css — сборка классных, кроссбраузерных анимаций для использования в ваших проектах. Все анимации используют возможности CSS3 и находятся в одном файле — animate.css

Кнопки с эффектами CSS3

Двенадцать иконок с различными CSS3 эффектами, которые можно взять себе на вооружение. Болшинство эффектов будет работать в большинстве современных браузеров.

Креативные эффекты CSS3 для кнопок

Набор эффектов для создания креативных кнопок с анимацией на CSS3 при наведении и нажатии. В некоторых местах использовался и jаvascript для добавления/удаления классов с эффектами.

Анимированные вкладки на CSS3 и HTML5

Вкладки очень распространенный элемент в веб-дизайне, и зачастую он очень полезен. Ведь вкладки позволяют красиво и, главное, компактно оформить текст или комментарии, а также многое другое. Итак, в этом уроке мы собираемся реализовать несколько простых CSS3 вкладок при помощи радиокнопок и псевдоэлемента :checked.

Пример разных видов переходов вкладок можно увидеть здесь:

Посмотреть примерСкачать

Возможно вам понравится прошлый урок, где мы также создавали красивые вкладки — Красивые анимированные вкладки на CSS.

HTML часть

Мы будем использовать элемент с разными классами, для переключения между вкладками. А в теге содержится название вкладки:

CSS часть

Первым делом, что нам нужно сделать, необходимо скрыть остальные вкладки кроме активной. Для этого выставим свойство прозрачности на ноль:

Вкладки будут похожи на элемент , но на самом деле мы будем нажимать на :

Так как не нужна нижняя часть тени для этого элемента, то мы используем псевдоэлемент :after с пустым значением свойства content:

Когда вкладка становиться активной, то у нее есть для этого свой стиль отображения. А также она становится поверх остальных. Делается это с помощью свойства z-index:

Итак, мы скрываем все остальные вкладки с помощью выставления opacity: 0. Мы не можем использовать свойство display: none, т.к. оно не поддерживает эффекты перехода:

Когда мы делаем вкладку активной, то выставляется значение opacity: 1, а также большой z-index:

Вывод

В этой статье мы создали вкладки на CSS3 и HTML5. Они красиво будут работать в современных браузерах. Разные виды переходов можно найти в примерах выше, а также скачать исходники и применять.

Успехов!

Еще материалы по этой теме

Отправить статью

Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

10 комментариев к записи

Добрый день, подскажите начинающему в данном примере .tabs input.tab-selector-1:checked

.content .content-1, что означает знак «

Здравствуйте, Артур. Тильда значит что будут выбраны все элементы с классами «.content .content-1», которые следуют за элементами с классами и псевдоселектором «.tabs input.tab-selector-1:checked».

Цукерберг рекомендует:  Страны - программирование и страны

Спасибо Юрий, за урок и за прояснение. Я немного на свой лад делал и вместо текста у меня формы на вкладках, по началу такая белеберда получилась, но сейчас разобрался вроде все ок.

Подскажите пожалуйста. Если у меня разное наполнение вкладок, как можно сделать высоту .content плавающей. Пробовал реализовать это несколькими способами, но ничего не получилось.

Денис, придется тогда немного изменить CSS. Необходимо задавать background не для одного блока (сейчас белый фон задается для блока с классом «content»), в котором находятся все 4 вкладки, а для каждого отдельно в 106-й строке файла style.css.

Как сделать прямую ссылку на конкретную вкладку. Например, чтобы человек, нажав на ссылку, попал на 3 вкладку сразу? Якоря не работают ((

Николай, у активной вкладки есть атрибут checked. Его можно задавать динамически с помощью jQuery при нажатии на ссылку.

Но как реализовать это? Попадение на вкладку с ссылки. Подскажите пожалуйста

Доброго времени суток! Возможно как-нибудь сделать во вкладках вложенные вкладки? Пробовал скопировать в одну из вкладок код секции с вкладками, но при нажатии на любую из вложенных вкладок они все пропадают.

Добрый день, Владимир!

Со структурой вы все делаете верно, но еще нужно внимательно изменить стили, потому что одна из вкладок всегда видна, а остальные скрыты. Вы вставили в первую вкладку код всех вкладок, но не изменили классы, поэтому при клике на любую из вкладок, пропадают все. Вам необходимо новые классы прописать для внутренних вкладок. Также не забудьте изменить изменить все классы в CSS, чтобы они не пересекались с основными названиями классов.

Кроме этих вкладок, на сайте также есть следующие виды вкладок:

Css3 — Анимированный каталог товаров

Сборник HTML, CSS, JavaScript/jQuery компонентов

Коллекция потрясающих эффектов для изображений | HTML, CSS и JavaScript (jQuery)

Эффекты для изображений — здесь мы собрали и продолжаем регулярно обновлять коллекцию бесплатных готовых решений для изображений, созданных при помощи HTML и CSS (CSS3 & HTML5), а также в некоторых эффектах немного присутствует JavaScript (jQuery). Hover-эффекты (эффекты при наведение), 3D, zoom (увеличение), magnify, overlay, transition… Сразу на странице Вы можете просмотреть Демо и скачать исходный код (* zip).

10 Примеров Анимаций созданных только при помощи CSS

Russian (Pусский) translation by Nataly Birch (you can also view the original English article)

Мобильные браузеры с каждым днём становятся всё лучше и лучше, предоставляя нам возможность наслаждаться потрясающими анимациями. Вы будете удивлены, но современные возможности CSS позволяют создавать потрясающие проекты даже без использования изображений.Такие проекты будут полностью масштабируемыми, быстрым в загрузке, и, конечно же, впечатляющими.

Давайте взглянем на потрясающие проекты, созданные только при помощи HTML и CSS.

1. Велосепидист. Реализован только с помощью CSS

Здесь столько всего происходит, что очень трудно поверить что всё это работает только благодаря HTML и CSS! Сочетание вращающейся анимации и множественных многослойных движений создают иллюзию того, что велосипедист и его велосипед сделаны из желе. Обратите внимание на умное использование БЭМ в классах.

2. Сатурн и его Вращающиеся кольца

Соединив вместе много движущихся элементов может позволить нам сделать так, что простые HTML элементы выглядят как более сложные анимации. И это именно то, что показывает эта демка. Обратите внимание на то, как две планеты взаимодействуют друг с другом, а также на умелое расположение частиц, которые воссоздают эффект беспорядочности.

3. CSS анимация цветных слоёв

Может показаться, что нет ничего интересного в примитивных цветных слоях. Но, когда они приведены в движении это уже совсем другое дело. В этом примере, мы можем видеть это воочию. Набор из 11 цветных полупрозрачных прямоугольников, сделанных при помощи HTML, собраны в анимацию, которая просто завораживает.

4. Загрузчик в форме мороженого на палочке

Нам не всегда нужны изображения в формате JPG или PNG для того чтобы создавать красивые картинки. И этот пример тому подтверждение. Всего лишь один контейнер и четыре стандартных блочных элемента нужно для того, чтобы воссоздать такую аппетитную анимацию.И что самое интересное, результат весит намного меньше, чем его аналог, сделанный в формате GIF.

5. Анимация с голубем при помощи CSS

Использование HTML элементов для создания рисунков в паре с небольшой анимацией может привести к потрясающему результату, как к примеру, эта полная задора и веселья демка. Надо отдать должное Юлии Музафаровой за её кропотливый труд в создании всех этих кадров, связанных последовательно. Уж точно это заняло больше, чем пару чашечек кофе.

6. Дремлющий кот

Благодаря искусной комбинации простых HTML элементов и деликатной, игривой анимацией, этот чёрный кот оживает на глазах, привлекая своей харизмой. Проект построен на основе Sass и переменных, которые контролируют анимацию. Вы можете легко изменить параметры, чтобы посмотреть что произойдёт.

7. Чёрный медведь

Использование основных принципов анимации, присущих HTML и CSS, может позволить нам воссоздать очень лаконичную мультипликацию. Так, к примеру, движущаяся голова чёрного медведя, который как будто пытается с вами заговорить, сделана при помощи стандартных трансформаций, умело объединённых вместе.

8. Плескающаяся губка

Набор коротких быстрых анимаций тоже может быть захватывающими.В демке ниже обратите внимание на то, как пузырьки и брызги умело синхронизированы вместе для того чтобы получить лаконичную анимацию губки. И всё это без использования изображений.

9. Почтовый конверт

Хорошо продуманная серия кадров анимации может рассказать целую историю или помочь пользователям понять, что они видят на экране.Здесь мы видим как конверт открывается и оттуда появляется письмо.

10. Загрузчик в форме машинки

Несколько коротких связанных между собой действий могут с лёгкостью воссоздать ощущение настоящего интенсивного движения. Загрузчик в демке показывает машинку, которая стремительно мчится вперёд. Всё это создано только при помощи нескольких стандартных элементов и CSS анимации. Без использования изображений, этот проект точно будет грузиться быстро.

Вдохновляйтесь и творите!

Как и всегда мы хотим поблагодарить Codepen и всех тех талантливых разработчиков, которые придумывали и создавали эти проекты. Они предоставили нам источник для вдохновения. Если вам понравилась эта статья, мы рекомендуем вам посетить несколько наших прошлых статей, которые также полны вдохновляющих примеров. Более того, в некоторых из них вы даже сможете научиться как создавать что-то подобное самому.

20 сайтов с увлекательной анимацией

3 марта 2015 | Опубликовано в Веб-дизайн | 1 Комментарий »

Анимация на сайтах становится все доступнее и проще. Возможностей оживить объект на сайте множество: начиная анимированными гифами, заканчивая эффектами CSS3. При этом лишь немного оживив один из элементов на сайте, вы делаете его интереснее и привлекательнее для пользователей. Сегодня мы собрали сайты, на которых в той или иной степени присутствует анимация, выполненная самыми различными техническими способами. Смотрите и вдохновляйтесь!

Vivify — продвинутая CSS3 библиотека для создания анимации

Всем нам прекрасно известна библиотека анимаций на чистом CSS animte.css . Но почти все эффекты дико приелись и уже не вызывают вау-эффекта у пользователей. Предлагаем нечто новое.

Что представляет собой CSS3 анимация?

Vivify.css — это набор современных стилей, созданных для анимирования любых элементов на странице сайта. Прелесть в том, что Вы получаете огромное количество качественной анимации, которую легко применить и использовать. Ниже приведем список, где чаще всего может быть применена данная анимация:

  • модальный окна;
  • при клике на объект;
  • при загрузке изображений;
  • при скролле страницы.

Список можно расширят вечно, поскольку все ограничения упираются в фантазию фронтенд-разработчика.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих