Як зробити прикріплену і анімовану шапку сайту на css3 і jquery

Я думаю, що багато хто з Вас вже помітили, що зараз в тенденцію входять все більше липких елементів дизайну, які залишаються на увазі при прокручуванні сторінки користувачем. Як на мою це дуже зручно, особливо якщо це навігація сайту. Ось саме такий приклад ми сьогодні і будемо робити. Ми дізнаємося як зробити анімовану шапку сайту на JQuery і CSS3 з анімацією.

Як завжди це, виявляється, робиться в мінімум рядків коду і дуже просто, і в той же час дуже ефективно. Ну а тепер давайте приступимо до уроку.

Демо Ι Завантажити

HTML код дуже і дуже простий, нам просто потрібно задати теги для шапки сайту. і далі між ними написати вміст сайту:

Так як це найпростіший приклад, тут ми додали просто текст між тегами h1, але там також можна використовувати зображення, або ж, наприклад, навігацію по сайту.

код jQuery

CSS є найкращим способом реалізації анімації і переходів в даний час. Так що скриптів ми будемо використовувати мінімум, і то для того щоб задати визначення спрацювання анімації при прокручуванні сторінки.

Коли значення положення сторінки при прокручуванні більше ніж 1, це означає, що користувач прокрутив сторінку і потрібно додати клас «sticky» до тегу шапки сайту. Таким чином спрацьовує анімація і фіксується шапка сайту.

А ось і сам код:

Важливо відзначити, що використання jQuery в даному прикладі не дуже хороша справа, тому що якщо в браузері буде відключено використання скриптів, тоді шапка сайту буде просто фіксована і все.

CSS код буде складатися з 2-х частин. Перший код буде відповідати за стандартну шапку сайту, яка знаходиться в положенні за замовчуванням. Другий код буде відповідати за відображення шапки, коли користувач буде прокручувати сторінку. Давайте подивимося як виглядає код за замовчуванням:

Тепер найцікавіший момент: коли користувач прокручує сторінку вниз, тоді буде застосовуватися клас .sticky, якому ми можемо поставити абсолютно різноманітне відображення, на яке тільки здатне CSS. Ми так само встановимо фіксовану позицію, що б наша шапка сайту була завжди на виду.

За допомогою цих CSS правил, які нижче, ми хочемо зменшити площу самої шапки при прокручуванні, змінити колір і звичайно ж зменшити шрифт. Ось сам код:

Це найпростіший приклад, за допомогою якого Ви повинні зрозуміти суть роботи. Все залежить від конструкції Вашого сайту.

Ну а зараз давайте додамо трохи анімації нашому переходу за допомогою transition. Ось код:

Демо Ι Завантажити

висновок

Ось і все :) Поки поки. )