Цветная анимация Плагин jQuery
Bitstorm.org > JavaScript > Плагины jQuery > Цветная анимация
Анимация цветов
С помощью функции анимации jQuery вы можете анимировать все виды css-свойств. Чего действительно не хватает в jQuery, так это анимации цветов. Этот плагин добавит эту функцию. С помощью этого плагина вы можете анимировать следующие свойства:
- цвет
- backgroundColor
- границаЦвет
- границаБоттомКолор
- границаЛефтКолор
- границаRightColor
- граница TopColor
- контурЦвет
Этот плагин основан на Color Animations Джона Резига. Он исправляет серьезную ошибку, а также добавляет поддержку свойства borderColor.
Этот плагин также добавляет rgba-цвета, так что теперь вы можете анимировать прозрачность фона и текст переднего плана независимо друг от друга. Имейте в виду, что Internet Explorer 8 и более ранние версии не поддерживают цвета rgba.
Демо
ДЕМО
$('#demodiv'). animate({color: '#E4D8B8'}) | ||
$('#demodiv').animate({backgroundColor: '#400101'}) | ||
$('#demodiv').animate({borderBottomColor: '#00346B'}) | ||
$('#demodiv').animate({borderColor: 'darkolivegreen'}) | ||
$('#demodiv').animate({color: 'rgba(42, 47, 76, 0.1)'}) |
Демонстрация довольно проста. Конечно, вы можете использовать все тонкости анимационной функции, такие как очереди, продолжительность, замедление. и обратный звонок.
Загрузить
Загрузить полную или уменьшенную версию здесь:
- jquery.animate-colors.js (5 КБ, лучше всего подходит для разработки)
- jquery.animate-colors-min.js (2,7 КБ, уменьшено, лучше всего подходит для производства)
Просто загрузите этот файл на свой сервер и включите его в свой HTML ниже jQuery.
Не связывайтесь с этими файлами в этом домене напрямую.CDN
Самый простой способ — использовать сеть доставки контента. Просто вставьте следующий код в свой HTML чуть ниже jQuery.
Пакет
Чтобы установить весь пакет, вы можете использовать одну из следующих команд:
git-клон https://github.com/edwinm/Color-animation-jQuery-plugin.git npm установить jquery-цвет-анимацию Bower устанавливает jquery-color-animation
Открытый исходный код
Этот jQuery-плагин защищен авторским правом Эдвина Мартина, 2015 г., и выпущен под лицензией MIT с открытым исходным кодом. Код доступен на GitHub, где вы можете клонировать и улучшать его, а также делать пулл-реквесты.
34 jQuery Backgrounds
Коллекция бесплатных jQuery background примеров и плагинов: адаптивные, полноэкранные, изменение цвета, видео и другие. Обновление коллекции января 2018 года. 2 новых предмета.
- Анимированные фоны CSS
- Фоновые эффекты JavaScript
О коде
Адаптивный фон с анимированными треугольниками
Фон может быть адаптирован к размеру экрана.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
jquery.youtube-фон
Еще один вкладыш 100 в виде плагина jQuery, созданного для облегчения встраивания YouTube в качестве фона обложки с использованием YouTube Embed API.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О плагинеАдаптивные фоны
Простой подключаемый модуль jQuery для извлечения доминирующего цвета изображения и применения его к фону его родительского элемента.
О плагинеРастяжка на спине
Backstretch — это простой плагин jQuery, который позволяет добавлять фоновое изображение с динамически изменяемым размером и поддержкой слайд-шоу на любую страницу или элемент. Изображение будет растягиваться, чтобы соответствовать размеру страницы/элемента, и будет автоматически изменяться в размере при изменении размера окна/элемента.
О плагинеСм.
Чертовски простой jQuery-плагин для видеофонов.
О плагинеФоновая проверка
Автоматически переключаться на более темную или светлую версию элемента в зависимости от яркости изображений позади него.
О плагинеБольшое Видео
Плагин jQuery для большого фонового видео (и изображений).
О плагинеТвердые частицы
Плагин JavaScript (jQuery) для шикарных систем фоновых частиц. Включает дополнительный эффект параллакса, управляемый мышью на настольных устройствах и гироскопом на мобильных устройствах. Работает в любом браузере, поддерживающем холст HTML5.
Вегас
Vegas — это плагин jQuery/Zepto для добавления красивых фонов и слайд-шоу к элементам DOM.
О плагинеКовервид
Сделайте так, чтобы ваше видео HTML5 вело себя как фоновое изображение обложки с помощью этого легкого плагина Javascript / расширения jQuery. CoverVid очень легкий, всего 800 байтов Javascript. Его можно использовать в родном Javascript и jQuery. Его логика основана на родительском элементе, что означает, что родительский элемент может быть любого размера (не обязательно только полноэкранный фон).
О плагинеРазмытие фона
ПлагинBackground Blur — это кроссбраузерный и сверхлегкий плагин jQuery для размытия изображений.
О плагинеjquery.mb.YTPlayer
Компонент jQuery с открытым исходным кодом для простого создания собственного проигрывателя Youtube® или использования видео Youtube® в качестве фона для вашей страницы.
О плагинеMaxImage2
MaxImage2 — это плагин для полноэкранного фонового слайд-шоу, который использует плагин jQuery Cycle для своей функциональности слайд-шоу.
О плагинеПараллаксировать
Parallaxify — это подключаемый модуль jQuery, который добавляет эффекты параллакса к элементам и фонам на основе данных датчика гироскопа (ориентация устройства) или движения мыши. Из-за недавнего ажиотажа, вызванного введением эффекта параллакса в iOS 7, я создал плагин, который позволяет любому легко добавлять эффекты параллакса на свои веб-сайты.
О плагинеПлагин пульсаций jQuery
Добавьте эффект водной ряби на фон с помощью WebGL.
О плагинеВодопровод
Waterpipe.js — плагин jQuery для дымчатых фонов, разработанный dragdropsite.com
ColorBrightness.js
Легкий и простой в использовании подключаемый модуль jQuery, который определяет, является ли цвет фона элемента светлым или темным.
Очень простой, короткий, красивый и отзывчивый плагин JQuery для прокрутки фонового изображения при прокрутке страницы.
Создание случайных фоновых линий, это отлично подходит для фона.
Это небольшой плагин jQuery, упрощающий процесс показа HTML5-видео в качестве фона. Вы можете использовать это для отображения видео на фоне всей страницы или для отображения видео в качестве фона div
, section
, например элементов.
Простой плагин jQuery, который воспроизводит эффект параллакса движущегося фона в iOS, используя только HTML, CSS и JS.
Плагин jQuery для фона параллакса.Этот подключаемый модуль jQuery позволяет добавлять атрибуты данных к тегу изображения или элементу с фоновым изображением, чтобы предоставлять изображения разных размеров в разных точках торможения. Для экономии полосы пропускания при просмотре на мобильном телефоне, но для больших дисплеев четкие большие изображения.
Этот простой плагин делает только одну вещь, и делает это хорошо — он создает отзывчивое полноэкранное фоновое изображение тела, указывая желаемое изображение, будь оно локальным или удаленным. Кроме того, он может создать красивое слайд-шоу фонового изображения, указав массив изображений.
Компонент jQuery с открытым исходным кодом, позволяющий легко создавать собственный проигрыватель Vimeo® или использовать видео Vimeo® в качестве фона для вашей страницы.
Генератор фона Material Design, встроенный в Javascript и CSS, позволяет создавать фон на основе материалов с помощью JS.
Простой плагин jQuery, который позволяет вам динамически изменять фоновое изображение контейнера или div
, просто указав изображения в массиве и id
фона, который вы хотите изменить.
Плагин jQuery, позволяющий динамически изменять цвета фона контейнера или div
.
Плагин HTML5 jQuery для фонового видео.
Легко улучшайте фоновые видео HTML5 с помощью одной строки jQuery.
Карусель простого фонового изображения с использованием jQuery и animate.css.
Идея состоит в том, чтобы позволить пользователям легко менять фон веб-сайта. Пользователи могут выбрать любое изображение или цвет в окне параметров, чтобы перезаписать фон веб-сайта по умолчанию (установленный разработчиком). А поскольку фоновое изображение или набор цветов сохраняются в локальном хранилище браузера, настройки фона будут сохраняться до тех пор, пока пользователь не очистит локальное хранилище.