Анімовані шапки для сайту - робимо круті шапки на сайті

Елемент сайту, який ми розглянемо сьогодні є однією з найважливіших і дуже помітних на сторінці. Іноді його роблять не дуже великим. Він може бути або статичним, або динамічним. Все залежить від бажання і фантазій дизайнера і власника сайту. Можливо, ви вже здогадалися про що буде мова - правильно, про шапці сайту. Сьогодні ми розглянемо чотири способи нестандартних способу, за допомогою яких можна оформити цю частину сайту. Завдяки цим способам - ваш сайт однозначно виділиться на тлі інших.

Чотири приклади ви можете подивитися тут:

Подивитися прімерСкачать

Як користуватися? - Анімовані шапки для сайту

HTML частина

У коді сторінки все що потрібно вставити, це:

123

lt;div id="Large-header" class="Large-header"gt;id="Demo-canvas"gt; lt;/canvasgt;lt;/divgt;

Відео: Як зробити анімовану шапку для каналу Ютуб

У блоці з ідентифікатором і класом large-header знаходиться тег , в котрому і відбувається вся анімація. А блок лише містить фонове зображення.

javascript частина

Потім в кінці сторінки необхідно підключити потрібні бібліотеки. Вони знаходяться в папці js (В архіві з кодами - посилання на початку статті).

Відео: Як зробити шапку для сайту (Wordpress)

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

1234

lt;script src="Js / TweenLite.min.js"gt; lt;/scriptgt;lt;script src="Js / EasePack.min.js"gt; lt;/scriptgt;lt;script src="Js / rAF.js"gt; lt;/scriptgt;lt;script src="Js / demo-1.js"gt; lt;/scriptgt;

Для 2-го прикладу:

12

lt;script src="Js / rAF.js"gt; lt;/scriptgt;lt;script src="Js / demo-2.js"gt; lt;/scriptgt;

Для 3-го:

1234

lt;script src="Js / TweenLite.min.js"gt; lt;/scriptgt;lt;script src="Js / EasePack.min.js"gt; lt;/scriptgt;lt;script src="Js / rAF.js"gt; lt;/scriptgt;lt;script src="Js / demo-3.js"gt; lt;/scriptgt;

І, нарешті, для 4-го:

12

lt;script src="Js / rAF.js"gt; lt;/scriptgt;lt;script src="Js / demo-4.js"gt; lt;/scriptgt;

Нижче я зробив скріншоти кожного з ефектів:

висновок

Все шапки мають ширину вікна браузера користувача. Ці приклади використовують Canvas і javascript. Також в першому демо ви могли помітити що при переміщенні покажчика миші переміщається ефект на задньому плані, що додає ще більшу інтерактивність.

Справа в тому, що не всі мобільні пристрої правильно працюють з тегом Canvas, тому в цьому випадку буде відображатися просто статичне картинка.

• Повністю анімоване меню на javascript
• Анімований з`являється текст
• Новорічна анімована шапка на CSS3

Успіхів!

джерело: https://tympanus.net/codrops/2014/09/23/animated-background-headers/

З повагою, Юрій Німець