Анимация на сайте с использованием jQuery

 

«Как же сделать сайт удивительный, не похожий на другие? Как сделать сайт не плоский, а трёхмерный? Как выделиться среди сотен других однотипных сайтов?», — спрашиваю я себя, создавая сайт borisov-quality.com.

Что ж... Решение есть. Анимация. Даже не просто анимация, а тотальная анимация всего сайта. Анимация всего, что есть на сайте, всех объектов: окон, картинок, теней, кнопок... Всех объектов!

Это не означает, что только анимацией отличается сайт. Да-а-а... При помощи CSS3, JavaScript и jQuery сайт становиться и псевдо-3D-сайтом.

За счёт визуального эффекта движущихся теней сайт приобретает эффект трёхмерности. И на экране видны объекты, расположенные не только по координатам осей X и Y, но и по координатам оси Z.

Рассмотрим поближе сайт borisov-quality.com. А именно, объекты для анимации:

  • знак качества в центре:
    • пять сторон знака качества;
    • слово «БОРИСОВ»;
    • буква «К», повёрнутая на 90о по часовой стрелке;
  • знак качества на цепочке;
  • меню, состоящее из пяти пунктов;
  • форма подписки;
  • социальные кнопки;
  • надписи над формой подписки и социальными кнопками;
  • аудио плеер;
  • кнопка в центре окна браузера;
  • лампа, которую можно перемещать по всему окну;
  • кнопки «Комментарии» и «Проекты»;
  • окна, содержащие контент;

Рассмотрим всю анимацию от начала. Т.е. с того момента, когда посетитель заходит на сайт.

 

Демонстрация возможностей HTML5, CSS3, JavaScript, jQuery

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

А тут: БАЦ! КНОПКА! Что делать??? Ступор... И закрывают на фиг сайт. Типа: «Ничего интересного, ни что не мельтешит, не дёргается. Приколов нету! НЕТУ ПРИКОЛОВ, БЛИН!!! Пойду дальше впустую тратить своё время...»

Те же, кто полюбопытствует и наведёт курсор на кнопку, увидят всплывающую подсказку, которая интересно появляется, как бы из неоткуда. В подсказке написано: «Включи звук, нажми F11 и кликни по кнопке».

А вот после клика и начинается, собственно, анимация и демонстрация возможностей HTML5, CSS3, JavaScript и, понятно, jQuery.

Анимация развёртывания сайта длится 2 минуты 31 секунду. Столько, сколько играет музыка из гимна России.

Кстати, воспроизведение музыки осуществляется при помощи HTML5-тега <audio>. Следовательно, да и вообще, услышать звуки на сайте можно только используя  современные браузеры, такие как Google Chrome, Mozilla FireFox, Opera, SafariInternet Explorer 9, 10.

 

Пользование 3D-сайтом borisov-quality.com

Когда демонстрационная анимация заканчивается, все объекты становятся на место, и на них уже можно воздействовать:

  • кликать по меню;
  • кликать по всем элементам знака качества;
  • кликать по кнопкам «Комментарии» и «Проекты»;
  • подписываться в форме на получение курсов по HTML и CSS;
  • перемещать лампу по всему экрану;
  • кликать на круглую кнопку включения (при этом происходит обратная анимация свёртывания сайта).

Двигающиеся анимированные тени объектов — один из главных методов создания визуального эффекта псевдо-трёхмерности на сайте.

Почти у каждого объекта на сайте есть тень: у меню, знака качества, надписей, окон.

Но главное отличие — это возможность видеть и перемещать тени, двигая курсором мыши ЛАМПУ.

Это самый классный анимационный эффект. Такого не было ещё ни на одном сайте!

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

Во время этой анимации играет музыка из фильма «Терминатор 2». Дослушайте до конца. Только звук прибавьте. Очень здорово получается.

 

Анимированное появление контента

При нажатии на пункт меню или на кнопки «Комментарии»/"Проекты", или на элемент знака качества, появляется (лучше даже сказать: «выплывает») анимированное окно с контентом. Всё очень плавно и гармонично. Контента на сайте немного, но при этом он ёмкий и в точности соответствует общей концепции сайта. Это — теоретичесое описание технологий HTML, CSS, JavaScript, jQuery, а также практическое применение знаний по этим технологиям, используя курсы, которые можно получить, подписавшись на рассылку HTML и CSS — лучшие бесплатные курсы.

 

Плагины и наборы jQuery для анимации

Не буду томить. Известно, что в самой библиотеке jQuery есть функция animate (), которая как раз и предназначена для анимации объектов DOM-дерева документа.

НО! Как не печально, функция animate () выполняется браузерами скачками. Так, будто выпадают кадры. Естественно, в этом виноваты не браузеры, а сама функция. Поэтому, я её почти не использую.

В замен этой функции для анимации объектов я воспользовался jQuery-плагином — jQuery.Transit. Посмотреть его работу, функционал и скачать можно по выше обозначенной ссылке.

Это очень классный плагин, который для анимации использует CSS3-переходы и преобразования (transitions и transformations). Его написал Rico Sta Cruz. Информация на том же сайте.

Для возможности перемещения лампы и анимации теней я использую набор jQuery-библиотеки — jQueryUI (jQuery User Interface).

Также на  jQueryUI построены вкладки на сайте. Их можно увидеть, кликнув на пункт меню «КАК?»

 

Анимация и псевдо-3D-сайты

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

Появление новых анимированных сайтов, построенных на CSS3 и JavaScript — это вопрос времени. Надеюсь, не очень долгого :)

Что же касается 3D-сайтов, то можно сказать, они будут востребованы, легки и понятны. Возможно для их массового распространения понадобится больше времени. Но оно не за горами.

О кроссбраузерности сайта borisov-quality.com расскажу в следующем посте.

Оцените материал:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звёзд   (голосов: 4, средняя оценка: 5,00 из 5, сумма: 20)

Loading...

Понравилось? Поделитесь с друзьями:





Другие материалы по теме:

Борисов - Качество
HTML и CSS - бесплатные видеокурсы
«HTML» и «CSS»
Изучите Видеокурсы
Бесплатно!
Станьте хозяином своих сайтов прямо сейчас! Введите Ваше Имя и Ваш E-Mail:

Ваш E-Mail в безопасности