Ми зібрали для вас добірку кращих прикладів JQuery анімації та CSS3. Ви можете переглянути вихідний код, щоб зрозуміти, як анимируется кожен з прикладів.
Працюють годинник на основі CSS3
Працюють годинник на CSS3, у прикладі використовується анімація і фігури CSS, без зображень або JavaScript:
Демо-версія Завантажити
Анімовані хмари на CSS3
У даному прикладі використовується тільки анімація CSS3:
Демо-версія Завантажити
Анімовані іконки погоди на CSS3
Демо-версія Завантажити
Анімації завантаження на CSS3
Кілька експериментів з індикаторами завантаження на основі CSS3 без JQuery анімації появи. Отримуйте задоволення і не забудьте поділитися тим, що ви дізнаєтеся:
Демо-версія Завантажити
3D обертається планета на основі CSS3
Відмінна ідея і поєднання двох концепцій. А трохи доопрацювавши масштабування і анімацію, можна дивовижний результат!
Демо-версія Завантажити
Ефект анімації тексту
Демо-версія Завантажити
Анімована 3D діаграма
3D діаграма, створена за допомогою HTML і CSS3-перетворень. Тіні створені з допомогою градієнтів CSS, анімація — з допомогою переходів. AngularJS використовується для оновлення даних:
Демо-версія Завантажити
JQuery ефект снігу
Демо-версія Завантажити
CSS3-анімації завантаження
Демо-версія Завантажити
Анімована іконка гамбургер-меню на CSS3
Демо-версія Завантажити
AT-AT (крокуючий броньовик з Зоряних війн) на CSS3
Приклад, який я створив на CSS3. Можна було б, звичайно, зменшити кількість div, використаних для створення частин тіла. Також варто було б оптимізувати приклад і додати клас JQuery з анімацією:
Демо-версія Завантажити
Gran Turismo
Демо-версія Завантажити
3D Сонячна система
Демо-версія Завантажити
Анімація диму
Це CSS3-версія анімації. Клуби диму створюються без зображень, а анімація задається без використання JavaScript і JQuery ефектів анімації:
Демо-версія Завантажити
Анімований логотип
Демо-версія Завантажити
IE10 3D куб
Демо-версія Завантажити
Анімація мов полум’я на основі CSS3
Демо-версія Завантажити
Логотип Бетмена на -webkit – CSS3 анімація
Демо-версія Завантажити
Концепт дизайну погодного додатки на основі CSS
Демо-версія Завантажити
Анімація природи на CSS3
Демо-версія Завантажити
Кіт гуляє (цикл без JQuery анімації)
Демо-версія Завантажити
3D-термінал на CSS3
Демо-версія Завантажити
Анімований графік на CSS3
Лінійний графік на HTML і CSS3. При наведенні курсору миші на розділ відображається його назва. Дані заповнюються і оновлюються з допомогою AngularJS. Перетворення обертання вручну застосоване до точок графіка, анімація задається з допомогою переходів CSS3:
Демо-версія Завантажити
Обертові 3D HTML-форми з допомогою CSS3
Демо-версія Завантажити
Анімації підключення індикатора на основі CSS3
Демо-версія Завантажити
Steps-анімація на Jquery
Анімації JQuery приклад, що ілюструє функцію таймінгу анімації: steps() в поєднанні з листом спрайтів:
Завантажити / Додаткова інформація
Просунута анімація траєкторії
Анімація з застосуванням SVG, яка може стати в нагоді при розробці анімації траєкторії:
Завантажити / Додаткова інформація
Анімації з використанням прокручування wow.js
Завантажити / Додаткова інформація
Анімація з використанням аркушів спрайтів на CSS
Нижче наведено приклад з використанням аркушів спрайтів з поясненнями без JQuery ефектів анімації:
Завантажити / Додаткова інформація
Анімований логотип для Herr Brueckers
Завантажити / Додаткова інформація
Анімація малювання контуру
Завантажити / Додаткова інформація
Нескінченна анімація галереї на основі анімації блоку JQuery
Завантажити / Додаткова інформація
Анімовані кола з використанням CSS / SVG
Завантажити / Додаткова інформація
SVG-анімація з допомогою CSS
Приклад того, як анімувати SVG. Для демонстраційних цілей я використовував іконки «Small Icons» Ніка Фроста і Грега Лапена:
Завантажити / Додаткова інформація
CSS3 паралакс анімація бойових винищувачів від MySkins Studio
Це ще одна CSS3 анімація, створена з використанням паралакса CSS3 і кейфреймов, але без JQuery анімації:
Завантажити / Додаткова інформація
Анімований SVG-логотип
Завантажити / Додаткова інформація
Плоска анімована кругова іконка на основі CSS3
Завантажити / Додаткова інформація
Анімація з setTimeout
Невеликий приклад синхронізації анімації, в якій навколо екрану переміщається куля, з допомогою setTimeout:
Завантажити / Додаткова інформація
SVG-анімація сонця з використанням CSS
Завантажити / Додаткова інформація
JQuery-анімація
Проста JQuery анімація:
Завантажити / Додаткова інформація
CSS-анімація орбіти Землі
Завантажити / Додаткова інформація
Анімація птаха, що летить на CSS3
Завантажити / Додаткова інформація
Анімація атома на основі CSS3
Завантажити / Додаткова інформація
3D-анімація годин з використанням JS
У процесі розробки використовувалися 3D-ефекти CSS3 і JQuery анімація тексту. Приклад працює в Google Chrome 28.0 і Firefox 22.0. У той же час анімація не працює в IE 10 з-за якоїсь помилки доступу JQuery, яку я не спромігся виправити:
Завантажити / Додаткова інформація
Анімоване Лондонське оглядове колесо з двох елементів
Завантажити / Додаткова інформація
Анімація Drag Race
Анімація гонок на чистому CSS / HTML:
Завантажити / Додаткова інформація
Анімований святковий торт
Завантажити / Додаткова інформація
Анімований логотип
Цей анімований логотип без JQuery ефектів анімації виглядає дуже елегантно:
Завантажити / Додаткова інформація
Анімований логотип компанії на основі CSS3
Анімований логотип компанії на чистому HTML / CSS3:
Завантажити / Додаткова інформація
Анімована іконка камери
Завантажити / Додаткова інформація
Анімація помаранчевого автомобіля
Завантажити / Додаткова інформація
Анімована іконка Wi-Fi
Завантажити / Додаткова інформація
Анімовані адаптивні CSS – іконки погоди
Це невеликий набір анімованих ікон погоди на CSS. Зверніть увагу, що більша частина анімації створюється з допомогою псевдо-елементів та JQuery анімації:
Завантажити / Додаткова інформація
Анімований віджет панелі інструментів
Завантажити / Додаткова інформація
Анімована банку Pepsi на основі CSS3
Завантажити / Додаткова інформація
Анімований акваріум з рибкою на CSS3
Завантажити / Додаткова інформація
Анімація простих 3D-фігур на чистому CSS
Набір простих 3D-фігур, анімованих на чистому CSS3 без JQuery ефектів анімації. Пізніше я додам інші фігури:
Завантажити / Додаткова інформація
Анімована сторінка «Скоро у продажу»
Цей заповнювач для сторінки «Скоро у продажу» був розроблений для одного з клієнтів. Пізніше вирішили додати «родзинку» для відвідувачів з сучасними браузерами:
Завантажити / Додаткова інформація
Анімація танцюючої дівчинки
Дуже мила анімація танцюючої дівчинки створена з використанням CSS3 і без JQuery анімації! Всі рухи тіла дівчинки створені з використанням основних фігур CSS і деяких додаткових властивостей, таких як borders, shadows, gradients і т. д.:
Завантажити / Додаткова інформація
Анімований логотип Windows 8 на CSS3
Анімований логотип Windows 8, розроблений за 5 хвилин з допомогою CSS3. Він створюється з допомогою перетворення перспективи CSS3, яке потім анимируется властивостями анімації і кейфреймами:
Завантажити / Додаткова інформація
Анімований логотип з «Посмішкою людиною»
Усміхнений людина — це відомий хакер з аніме «Привид в обладунках: Синдром одинака«. Він розміщував анімований логотип зі своїм обличчям, зламуючи киберсистемы:
Завантажити / Додаткова інформація
Анімовані шестерні на CSS3 і JQuery ефекти анімації
Завантажити / Додаткова інформація
Анімація виклику Skype
Моя спроба відтворити анімацію виклику в мобільному додатку Skype (яку я бачив на своєму iPad) з допомогою CSS:
Завантажити / Додаткова інформація
Анімація птаха, що летить — один елемент CSS
Завантажити / Додаткова інформація
HTML5 Canvas анімація трави
Завантажити / Додаткова інформація
Анімація фенакистископа на CSS3
Завантажити / Додаткова інформація
Переклад статті «50+ JQUERY CSS3 ANIMATION EXAMPLES LIKE FLASH ANIMATION» був підготовлений дружною командою проекту Сайтостроение від А до Я.
