X
Юрий Немец

Анимированные шапки для сайта — делаем крутые шапки на сайте

Элемент сайта, который мы рассмотрим сегодня, является одним из важнейших и очень заметных на странице. Иногда его делают не слишком большим. Он может быть либо статическим, либо динамическим. Всё зависит от желания и фантазий дизайнера и владельца сайта. Возможно, вы уже догадались о чем будет речь — правильно, о шапке сайта. Сегодня мы рассмотрим четыре способа нестандартных способа, с помощью которых можно оформить эту часть сайта. Благодаря этим способам — ваш сайт однозначно выделится на фоне других.

Четыре примера вы можете посмотреть по следующей ссылке:

Посмотреть примерСкачать



Как пользоваться? — Анимированные шапки для сайта

HTML часть

В коде страницы всё что нужно вставить, это:

1
2
3

<div id="large-header" class="large-header">
    <canvas id="demo-canvas"></canvas>
</div>

В блоке <div> с идентификатором и классом large-header находится тег <canvas>, в которм и происходит вся анимация. А блок <div> лишь содержит фоновое изображение.



Javascript часть

Затем в конце страницы необходимо подключить нужные библиотеки. Они находятся в папке js (в архиве с исходниками — ссылка в начале статьи).

Например, для примера №1 нужно подключить следующие библиотеки:

1
2
3
4

<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>

Для 2-го примера:

1
2

<script src="js/rAF.js"></script>
<script src="js/demo-2.js"></script>

Для 3-го:

1
2
3
4

<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-3.js"></script>

И, наконец, для 4-го:

1
2

<script src="js/rAF.js"></script>
<script src="js/demo-4.js"></script>


Ниже я сделал скриншоты каждого из эффектов:



Вывод

Все шапки имеют ширину окна браузера пользователя. Эти примеры используют Canvas и Javascript. Также в первом демо вы могли заметить что при перемещении указателя мыши перемещается эффект на заднем плане, что придает еще большую интерактивность.

Дело в том, что не все мобильные устройства правильно работают с тегом Canvas, поэтому в этом случае будет отображаться просто статическая картинка.


Успехов!

Источник: http://tympanus.net/codrops/2014/09/23/animated-background-headers/

С Уважением, Юрий Немец

Категории: jQuery