Лого SiteHere.ru

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

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

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

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

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



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

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/

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

23 комментария к записи
  • 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;

               
  • Филипп

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

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

    Есть идеи? 

     
  • Aleksandr

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

     

     
  • sergey

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

     
  • sergey

    +  хостинг не хочет  видоизменять  страничку .
    В коде   корректно    прописал изменить   размер шапки  на 350  но ничего не меняется .
    А в папке  на рабочем столе изменяю    и все работает .
    Не понимаю в чем проблема .

     
  • sergey

    Все работает ,кэш нужно было почистить .

     
  • Омар

    Добрый день у меня такой вопрос… почему то Анимация не работает тоесть я вижу графику но ничего не происходит если обновляю сайт графика дергается 1 раз тоесть вижу что рисунок сменился и все опять замирает …. в чем может быть проблема ? применяю demo-1

     
  • Омар

    получилось запустить… теперь другая проблема почему то координаты сбиты…. курсор в одном месте а анимация в другом. Подскажите?

     
    • Юрий Немец

      Добрый день!

      У вас эта проблема на демо примере, который статье или вы пишете об ошибке после переноса на свой сайт?

       
      • Омар

        после переноса на свой сайт http://ssmaker.ru/4856bb78.jpg вот скрин посмотрите где курсор и где анимация… просто не могу понять где править.

         
      • Омар

        и возможно ли сделать так чтоб анимация была по всему сайту?

         
  • Омар

    Подскажите кто ни будь где прописанны координаты привязки курсора + (к анимации )

     

     
    • Юрий Немец

      Вы идете сложным путем, все проблемы были в самом начале, когда вы переносили демо и забыли/не заметили/пропустили что-то из разметки, либо что-то из скриптов, и сейчас пытаетесь переписать весь код. Такой подход займет очень много времени.

      Намного проще все, что касается этой анимации, удалить и заново внимательно перенести из демо-примера. Если в демо-примере у меня на сайте у вас все работает, значит, вы делаете что-то не так у себя в проекте.

      P.S.: без ссылки на ваше демо очень тяжело разобраться что именно вы сделали не так.

       
  • Александр

    можно код html получить ? без подключения библиотек…?

     
  • Федор

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

     

     
  • Владимир

    Как это можно применить в wordpress? Я не селен программировании, просто не сильно понятно куда что устанавливать.

     

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

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