Лого www.SiteHere.ru

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

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

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

PDF отчет

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

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

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

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>

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

Пример 1 - анимированная шапка
Пример 2 - анимированная шапка
Пример 3 - анимированная шапка
Пример 4 - анимированная шапка

Вывод

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

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

Успехов!

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

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

Анимированные шапки для сайта — делаем крутые шапки на сайте 5.00/5 (100.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

Бесплатный PDF отчет
Комментарии (10) к записи
  • Gleb

    Подскажите как уменьшить высоту этой шапки сайта?

     
    • Юрий

      Высоту шапки можно изменить либо в файле component.css у класса .large-header (изменить свойство width), либо в файле index.html для блока div дописать атрибут style="width:100px".

       
      • Gleb

        Width меняется, но height не хочет менятся, не знаю как изменить, прошу помощи.

         
        • Юрий

          Глеб, я извиняюсь. В спешке писал комментарий выше. Вот правильный комментарий:

          Высоту шапки можно изменить либо в файле component.css у класса .large-header (изменить свойство HEIGHT), либо в файле index.html для блока div дописать атрибут style="HEIGHT:100px".

           
          • Gleb

            К сожелению этот способ не работает(

             
            • Юрий

              Глеб, зайдите в папку js и там выберите файл, который соответствует той шапке, которая Вам понравилась. То есть если первая шапка, то откройте файл demo-1.js. Далее для 1-й шапки в 12-й строке (для 2-й — в 11-й строке; для 3-й — в 13-й; для 4-й — в 12-й строке) измените то, что идет после знака равно. Должно получиться так (если хотите задать высоту в 300px):
              height = 300;

               
              • Gleb

                Спасибо, очень помогло.

                 
  • Филипп

    Привет! Супер работает! Вот только не пойму, как сделать что бы на всех страницах был…. 

    У меня сайт на ВП, вставил в header.php, но работает только на главной. 

    Есть идеи? 

     
  • Aleksandr

    Юрий, подскажите пожалуйста, есть ли какая то библиотека или сборник svg графических изображений, где можно выбрать подходящую графику для собственного сайта?

     

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *