495 3689104
Контакты
Услуги под ключ
Список услуг
Разработка дизайна
  • Разработка стиля
  • Креативный дизайн
  • Графический дизайн
  • Создание анимации
  • 3D моделирование
Разработка сайта
  • Разработка концепции
  • Верстка HTML и CSS
  • Установка CMS
  • Доработка Веб модулей
  • Наполнение контентом
Раскрутка сайта
  • Подготовка SEO стратегии
  • SEO копирайтинг
  • Оптимизация страниц
  • Реклама в Google и Яндекс
  • Поисковое продвижение
Поддержка сайта
  • Обновление контента
  • Модернизация модулей
  • Мониторинг Веб ресурсов
  • Обучение персонала
Заказать услугу
Главная → Статьи → Разработка анимации на «jQuery»
08.10.2013

Разработка анимации на «jQuery»


Разработка анимации на «jQuery»

Без «jQuery» сегодня тяжело представить современные сайты. С помощью этой библиотеки «JavaScript», которая становится все более популярной в сайтостроительстве, создают потрясающие эффекты и анимацию для веб-ресурсов. Эта библиотека постепенно вытесняет другие подобные яваскрипты (к примеру, MooTools), благодаря своей легкости, простоте и функционалу.

Разработка анимации на «jQuery» в наше время очень популярна среди веб-разработчиков. Почти все сайты пестрят красочными и не очень плагинами или модулями, где используются разные анимационные эффекты. Очень много этих плагинов, компонентов или модулей разных систем управления контентом создаются на основе библиотеки «jQuery». Она позволяет создать впечатляющие эффекты без использования ресурсоемкой технологии «flash».

Какие же наиболее распространенные примеры использования «jQuery»?

Можно назвать очень «навороченные» меню, «аккордионы» и слайдеры для вывода новостей и картинок, фотогалереи, всплывающие окна, потрясающие навигационные эффекты, слайдшоу, выпадающие панели, эффекты переворачивания и всяческого другого движения элементов. Таким образом, функциональность библиотеки «jQuery» огромная: от увеличительных стекол до разнообразного движения элементов сайта и других анимационных эффектов.

К примеру, в интернете можно свободно скачать и реализовать на своем сайте разные элементы веб-дизайна и эффекты, созданные с помощью «jQuery». Среди них - эффект лупы, который позволяет увеличивать часть изображения, где в этот момент находится курсор. Можно вспомнить слайдер «Aviaslider», где есть восемь разных режимов перелистывания фото. Существует также множество навигационных эффектов и слайдшоу, всякие «выпадающие» панели и механизмы запуска элементов сайта по той или иной траектории. С помощью библиотеки «jQuery» можно создать интересный интерактивный каталог товаров, «фотоаппарат», фотографирующий части экрана. Существуют плагины для «минималистической» организации детального описания различных сложных объектов.

Одним словом, анимация на «jQuery» – это чудесный «JavaScript Framework». Если есть желание серьезно изучать «jQuery» и делать анимационные эффекты на сайте вручную, тогда есть несколько примеров.

Сначала необходимо скачать саму библиотеку. Например, на сайте проекта. Затем инициализировать фреймворк на личном сайте, вставляя между тегами

<head> </head> код <script type="text/javascript" src="jQuery.js"></script>.

Для понимания работы селектора в «jQuery» нужно знать основы CSS, поскольку селектор этого фрейворка базируется на принципах CSS. Так, с помощью $(“#header”) можно получить элемент с id-селектором «header», с помощью $(“h3?) – все <h3> элементы, с помощью $(“div#content .photo”) – все элементы, класс которых называется «photo» и которые расположны в div с id ”content”.

Давайте создадим слайд-панель, которая движется вверх и вниз, в случае клика по ссылке. Это можно реализовать так:после клика будет переключаться класс ссылки (с “act” на “slide” и наборот), а панель, id которой ”pan”, будет выдвигаться и прятаться. С помощью класса “act” мы можем изменить позицию фоновой картинки.

Итак, вот пример кода:

$(document).ready(function(){
$(". slide").click(function(){
$("#pan").slideToggle("slow");
$(this).toggleClass("act");
});
});

Он позволяет добиться «магического» исчезновения панели

С помощью другого примера можно красиво «растворять» элементы. В момент клика на фото <img class=”del”> можно находить родительский элемент <div class=”fat”> и его прозрачность медленно меняется от opacity «1.0» до opacity «hide»:

$(document).ready(function(){
$(".fat .del").click(function(){
$(this).parents(".fat").animate({ opacity: "hide" }, "slow");
});
});

Таким образом, с помощью фреймворка «jQuery» можно создавать анимацию и вручную. Впрочем, профессиональные веб-разработчики уже создали достаточно эффектов и плагинов, чтобы воспользоваться ими, не вникая в принципы работы библиотеки.


Вам понравился сайт?

Рассказать друзьям