4 237 В первую же секунду, когда пользователь попадает на сайт, он видит изображение, расположенное в шапке сайта. Именно поэтому необходимо уделить особое внимание этой части страницы. Шапка может иметь разный размер, быть динамичной или статичной. Ее главная задача — удержать внимание посетителя на сайте и заставить его заинтересоваться содержательной частью. Следовательно, в дизайне все средства хороши.
В данной статье мы представили несколько способов, которые помогут разнообразить шапку сайта и сделать его запоминающимся.
Перейдя по следующей ссылке, Вы сможете изучить предложенные варианты оформления.
Шапки сайта с анимацией на javascript: как настроить
Итак, для того чтобы сделать анимированную шапку, обратимся к 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 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> |
Для второй анимации:
|
1 2 |
<script src="js/rAF.js"></script> <script src="js/demo-2.js"></script> |
Для третьей анимации:
|
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> |
Для того чтобы реализовать четвертую анимацию, используйте:
|
1 2 |
<script src="js/rAF.js"></script> <script src="js/demo-4.js"></script> |
На скриншотах, представленных ниже, виден эффект:
Первый пример наиболее интересен, поскольку при перемещении мыши эффект движется на заднем плане, что очень интересно и красиво. В заключение следует сказать, что ширина шапок — это ширина окна браузера посетителя сайта. В данных примерах используются Canvas и Javascript. Помните, что не все гаджеты распознают тег Canvas, однако это не повод для паники. В таких случаях в шапке будет изображена статическая картинка.
