Анімована шапка для лендінзі - анімація для шапки на що продає сторінці

Минулого тижня я писав статті, які пов`язані з ефектами при прокручуванні. Тому що зараз інтерактивом на сторінці можна утримати відвідувача і тим самим "зачепити" його. Сьогодні Ви побачите також ефект при прокручуванні сторінки, але він буде не таким складним, але в той же час дуже красивим. Ми створимо анімовану шапку для Вашої продає сторінки.

Елементи для продає сторінки:

• Оригінальний ефект для Лендінзі при прокручуванні сторінки
• Анімація для Лендінзі - створення анімації на Лендінзі
• Гарне оформлення сайту - оформляємо красиво, утворять єдиний сайт
• Як зробити відео фоном сайту + відеостокі

Суть ефекту: під час прокручування сторінки фонове зображення в шапці стає поступово розмитим і заголовок з описом зміщується до самого низу шапки. Також при Скролл вгору - анімація відбувається в зворотному напрямку.

Подивіться на даний ефект в своєму браузері:

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

З цього уроку Ви дізнаєтеся як створити анімовану шапку для своєї продає сторінки, але вивчивши міні-курс "Лендінгем за 60 хвилин" Ви дізнаєтеся як зверстати Лендінгем з нуля: "Лендінгем за 60 хвилин".

Розмите фонове зображення виглядає наступним чином:

Як зробити анімовану шапку?

1 HTML структура

Для початку нам необхідно створити правильну HTML структуру:

12345678

lt;div id="Header"gt;lt;span class="Bg normal"gt; lt;/spangt;lt;span class="Bg blur" style="Opacity: 0;"gt; lt;/spangt;lt;div class="Wrap"gt;lt;h1 style="Transform: matrix (1, 0, 0, 1, 0, 0) ;"gt; Великий заголовокlt;/h1gt;lt;p class="Lead" style="Transform: matrix (1, 0, 0, 1, 0, 0) ;"gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate odio, asperiores aut sapiente blanditiis cupiditate harum.lt;/pgt;lt;/divgt;lt;/divgt;

Відео: Фіксована меню (шапка) при прокручуванні

поясню:

• Рядок: 2 - блок з фоновим зображенням без розмиття.
• Рядок: 3 - блок з фоновим розмитим зображенням, який спочатку не видно.
• Рядки: з 4 по 7 - заголовок і докладний опис, яке буде зміщуватися при прокручуванні вниз.

2 стилі CSS

Як Ви зрозуміли з HTML структури, нам необхідно два фонових зображення: розмите і нерозмиті.

Тому для кожного з блоків зараз задаємо своє фонове зображення. Стилів небагато:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667

#header {height: 90vh-min-height: 300px !important-position: relative-}#header: before {position: absolute-left: 0-top: 0-height: 100%-width: 100%-display: block-content: ``-background: # 000-opacity: 0.4-}#header span.bg.normal {background-image: url("../images/header-normal.jpg")-}#header span.bg.blur {background-image: url("../images/header-blur.jpg")-opacity: 0-}#header span.bg {background-color: # 000-background-position: 50% 0-background-repeat: no-repeat-background-size: cover-display: block-height: 100%-left: 0-opacity: 1-position: absolute-top: 0-width: 100%-}#header .wrap {left: 50%-max-width: 800px-padding: 0 15px-position: absolute-text-align: center-top: 50%--webkit-transform: translate(-50%, -50%)-transform: translate(-50%, -50%)-width: 100%-}#header h1 {color: #fff-font-size: 80px-font-weight: 900-line-height: 95px-margin: 0 0 20px-}#header p {color: #fff-font-size: 32px-font-weight: 300-line-height: 36px-}

З стилями закінчили і переходимо до анімації.

3 JS анімація

Я використовую знову ж бібліотеку ScrollMagic, яка дозволяє створювати красиву анімацію на Лендінзі.

Підключаємо необхідні скрипти:

• ScrollMagic.min.js
• jQuery.min.js
• TweenMax.min.js
• animation.gsap.js
• script-sitehere.js - наш скрипт

Два перших скрипта можна не викачувати і підключити прямо з CDN:

12345

lt;script src="Http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"gt; lt;/scriptgt;lt;script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"gt; lt;/scriptgt;lt;script src="Js / TweenMax.min.js"gt; lt;/scriptgt;lt;script src="Js / animation.gsap.js"gt; lt;/scriptgt;lt;script src="Js / script-sitehere.js"gt; lt;/scriptgt;

Нині ж давайте заглянемо всередину script-sitehere.js:

123456789101112131415161718192021222324252627

$(function () {var scrollMagicController = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: `OnLeave`}})-var topperTween = TweenMax.to(`#header span.bg.blur`, 1,{opacity: 1})-var headingTween = TweenMax.to(`#header h1, #header p`, 1,{y: 200})-var scene = new ScrollMagic.Scene({triggerElement: `#header`,duration: `70% `}).setTween([topperTween, headingTween]).addTo(scrollMagicController)-})-

висновок

Дана анімація трохи простіша, ніж попередні приклади і встановити його також набагато легше.

Якщо не виходить встановити анімацію: можливо у когось не вийде встановити даний ефект на сайт, тоді Ви можете звернутися до мене за допомогою, попередньо записавшись на SKYPE консультацію!

Якщо Вам потрібна своя унікальна анімація для Лендінзі: також Ви можете зв`язатися зі мною за допомогою форми зворотного зв`язку і я створю унікальну анімацію саме для Вашого Лендінзі. Для цього лише заповніть дану форму: Так, мені потрібна анімація для Лендінзі.

Відео: Як створити анімовану шапку ч 1

Успіхів!