шапки ефекти, докато превъртате сайта

Вероятно сте виждали подобни ефекти, когато мястото на капачката отговаря на начина на превъртане на страницата. Например, възможно е да се погледне на ефекта се прилага Фил Renaudom на уебсайта Riot Industries. където, когато кликнете върху капачката се завърти в триизмерен равнина, и докато превъртате увеличава. Подобен ефект се реализира Dzhonni Симпсън в статията. посветени на анимация, приложена към определен сайт шапка, които се активират, когато страницата е превъртат. Ние също създаде план за малка анимация при преглеждане на заглавната част на сайта, за да можете да разберете по-добре какво е под въпрос тук.

Днес ние искаме да ви дадем някои вдъхновение как да създадете анимирани шапки, така че можете да видите какво въздействие може да използвате, за да обновите вашия сайт.

Моля, обърнете внимание: тези ефекти ще работят само в браузъри, които имат подкрепа за съответните CSS-свойства! Само в съвременни браузъри!

Демо страница с ефекти е само за вдъхновение, и сме използвали техниката, което е свързано с промени в статута на класове (състояния) с глава на обекта, което, разбира се, можете да промените по свое усмотрение, в зависимост от това какъв вид ефект ви трябва. Важно е да се разбере, че състоянието зависят един от друг, т.е. промяна на клас А до клас Б може да е подходящо (като се използва преходи), и прехода от А до клас В не може да даде желания резултат. Така че, от порядъка на ефектите е показано на графовете на страницата.

Трябва също да се има предвид, че твърде бързо превъртане може да доведе до нежелано скок, означаваше, че по-горе пасаж от клас А до клас Б.

В демонстрацията сме използвали голям JQuery-плъгин Точки от Халев Troughton.

капачка на сайта се състои от няколко части, за да се покаже на всички ефекти. Налице е обвивка, с цел - за предната и задната страна (която се използва за триизмерна въртене):

Добавихме специални раздели класа, което ни позволява да тече класове промени:

атрибути на данни се използват, за да зададете необходимите класове, в зависимост от това дали скролирането е в каква посока. В нашия живата-нагоре атрибут демо данни съдържа класа за анимирате-надолу данните за предишния атрибут.

"Редуване" могат да бъдат идентифицирани като пример за състоянието на класа:

класове на състоянието се прилагат за капачките на елементите, и едва тогава можем да определим някои промени за деца.

Когато Точки плъгин помощ, ние просто да добавите подходящите класове:

Надяваме се, че ви хареса тези ефекти, и сте вдъхновени да създадат свои собствени проекти, които използват анимиран банер.

Вижте Demo | Изтегляне на изходния код