Установка и подключение

Velocity.js — это высокопроизводительная библиотека для анимаций на JavaScript, которая сочетает простоту использования jQuery-анимаций с производительностью CSS3. Для полноценного использования Velocity необходимо корректно подключить библиотеку и учитывать особенности её интеграции с современными проектами.

Подключение через CDN

Самый быстрый способ начать использовать Velocity — подключение через CDN. Последние стабильные версии доступны на популярных сервисах, таких как jsDelivr или cdnjs.

Пример подключения через <script>:

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>

При использовании этого метода библиотека сразу становится доступной через глобальный объект Velocity или через $ при совместимости с jQuery.

Установка через npm или Yarn

Для современных проектов, использующих сборщики модулей (Webpack, Vite, Parcel), рекомендуется установка через менеджеры пакетов.

npm:

npm install velocity-animate

Yarn:

yarn add velocity-animate

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

import Velocity from 'velocity-animate';

Для проектов с CommonJS:

const Velocity = require('velocity-animate');

Интеграция с jQuery

Velocity полностью совместим с jQuery. Если jQuery подключен в проекте, Velocity расширяет его метод $.fn.animate, предоставляя более мощные и гибкие возможности анимации.

Пример подключения с jQuery:

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>

После подключения можно использовать как синтаксис jQuery, так и собственный синтаксис Velocity:

$('#box').velocity({ opacity: 0.5, left: "200px" }, { duration: 1000 });

Подключение модулей Velocity UI

Velocity предоставляет дополнительный пакет velocity-ui-pack, включающий предустановленные эффекты анимации, такие как fadeIn, slideUp и т.д. Для подключения через CDN:

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.ui.min.js"></script>

Для npm-проектов:

npm install velocity-animate velocity-ui-pack

Импорт в ES6:

import 'velocity-animate';
import 'velocity-ui-pack';

Эффекты из пакета UI Pack становятся доступными через метод Velocity:

Velocity(document.getElementById('box'), 'fadeIn', { duration: 500 });

Учет зависимостей и порядка подключения

  • При использовании jQuery подключать jQuery необходимо до Velocity.
  • Velocity UI Pack требует наличия основной библиотеки Velocity.
  • Для современных сборщиков модулей рекомендуется использовать import, чтобы избежать конфликтов глобальных объектов.

Выбор метода подключения

  • CDN подходит для быстрого прототипирования или простых сайтов.
  • npm/Yarn предпочтительнее для крупных проектов с системой сборки, так как позволяет контролировать версии, оптимизировать бандлы и использовать Tree Shaking.

Проверка корректного подключения

После подключения Velocity можно проверить его доступность через консоль:

console.log(typeof Velocity); // "function" при корректном подключении

Если используется jQuery, проверка совместимости:

console.log(typeof $.Velocity); // "function"

Любое неправильное подключение или несовпадение версий будет сразу проявляться через ошибки в консоли, что позволяет быстро диагностировать проблему.

Рекомендации по структуре проекта

  • Для чистоты кода рекомендуется хранить скрипты Velocity в отдельной папке, например libs/velocity.
  • В production-сборке подключать минифицированные версии: velocity.min.js и velocity.ui.min.js.
  • При необходимости расширения эффектов создавать собственные файлы с анимациями, импортируя только нужные функции, чтобы снизить размер бандла.

Правильная установка и подключение Velocity.js обеспечивает стабильную работу анимаций и позволяет использовать все возможности библиотеки без конфликтов и снижения производительности.

Оглавление