Здравейте скъпи читатели beloweb.ru блог. Днес искам да ви кажа как да се направи, докато превъртате паралакс използване JQuery и CSS3.
За да започнете, искам да кажа, че ефектът е наистина много ефективен вид. И той е широко използван в чуждестранна Интернет. Поради това се създава паралакс, така да се каже, на ефекта от задълбочаване и присъствие. Всичко това прави потребител посети сайта все повече и повече, само за да се възхищаваме си красота.
Може би си спомняте, че показах някои примери за сайтове, които използват паралакс, докато превъртате. Ако сте пропуснали тази колекция, се уверете, че можете да го разгледате, че е тук.
Гледани? Аз искам. -) Да се създаде.
Пример ι изтегляне източници
Искам да благодаря на f6design.com сайт. за този забележителен ефект.
Просто искам да кажа, че моят пример съм създал въз основа на тази демонстрация тук. Какво се е случило с мен, можете да видите тук.
Как става това?
Приятели, както се оказва, няма нищо свръхестествено и тежка там. Първо, създаване на HTML страница. Тогава създадени или съставени обекти, като Photoshop. След всичко, което се създава, е необходимо да се определи веднага където съоръжение ще се намира на страницата, както и скоростта, с която тя ще се превърта, когато потребителят превъртете страницата.
Веднъж създаден с помощта на CSS, например, три слоя (може би повече) 1,2 и 3. След това, във всеки слой се добавя вече готови обекти. Тази задача определя точната позиция на страницата, в пиксели. И след това да се скоростта на превъртане се задава за всеки слой. Обикновено един слой (дистален) се превъртат по-бавно от втория и така нататък. Друг важен момент е, че всеки слой е изложена Z-индекс. Този параметър определя кои за някои ще бъде обект.
С други думи, ние получаваме следния :-) бутер сайт Но това изглежда много хубаво.
Първо трябва да създадете HTML страница:
Както можете да видите от всички обекти на тази страница вече е възложено на класовете, които ще продължат да използват стилове. И тъй като ние имаме тук вече имаме 3 слоя, които са класа:
- паралакс-BG3 - първи слой нагоре.
- паралакс-BG2 - втори слой, средно.
- паралакс-BG1 - и трети слой най-долната.
И готови изображения (обекти), вече са определени за всяка от трите слоя.
Повече на страницата, имаме текст, който има стандартен превъртане. Той също така е записано в позицията, но той ще се движи заедно с фоновете. Въпреки че текстът може да зададете скоростта на превъртане, но вие трябва да създадете отделен четвърти слой.
между маркерите
и не забравяйте да прикачите стилове, както и на самия скрипт паралаксът:Сега най-забавната част.
Първо трябва да се премахнат всички пълнежа върху краищата на страницата. Това се прави по следния начин:
Така че тук ние сме помолени да begraund страница, тя е в изходния код, и да определи точната височина на страницата, тя е 4550px.
Сега за област #wrapper на която са разположени всички наши съоръжения трябва да зададете позиция: относителна. Така че ние показваме рисунки, където нашата област.
В този пример ще използваме корабоплаването по т.нар раздели. Оказва се, един вид голям слайдер. Потребителят има две възможности, щракнете с маркер и той автоматично ще се премести на посоченото място, или просто да преминете начин ни познати. И в двата случая, тя изглежда много хубаво.
И тук CSS код навигация:
Е, сега ние се обръщаме към действителните слоеве
Слоят на текст и неговата позиция:
Както можете да видите, че в началото на текста (# пилотиран полет), определен абсолютна позиция 0 пиксела, а вторият текст (# рамки-парашут) позиция е 1090px, което е значително по-ниска. Друг важен момент за съдържание комплект Z-индекс: 4; най-горния слой. Това е да се гарантира, че другите слоеве не покриват текста.
Сега ние ще създадем слоеве от снимки:
Първият слой - най-голямото облака (# паралакс-BG3):
Вторият слой от облаци:
И третият е последният слой:
Сега нека видим как ще изглежда цялата ни CSS файл с източник:
И сега ние ще за всеки слой на скоростта на слой набор свитък, това е направено, както следва:
Както можете да видите, че в продължение на най-горният слой паралакс-BG3 най-висока скорост на превъртане, най-ниското за втори слой. и за последния слой средна скорост.
Сега тук е как сценария търси най-навигация:
Пример ι изтегляне източници
Чувствам, че ще бъде горещо. D Да ви Th вероятно всички от буржоазията се опитва да копира REDO и т.н и т.н. Чудех се къде буржоазията и тези идеи идват от? Вероятно копие ðóíåò burzhunete: D
Ринат, признавам, всичко. Но за да ме обвиняват в плагиатство, не е редно, все пак. -) Колкото повече стоя всички позоваване на източника, и в този пост също. Habr за първи път чувам, че има този пост.
За burzhunete. Той винаги е бил пред RuNet няма да има. Runet логика: защо измисли ако му вече е в burzhunete. -)
И защо е бил в блога, а не на 1.0 бета, която е променило?
Ето тук, аз не превежда уроците. Взимам пример, за да го разберат и да пишат със свои думи как работи. Така че все повече и сложих линк към източника. -) По същия начин, както се прави в тази публикация.
И аз имам някои грешки в кода коригира. И с течение на скоростта на сваляне почти работил. -) Ако имам вина да се намери, или това, което се добавят някои актуализации, цифрата в логото ще се промени :-)
Tochnyak! Опитайте се да намерите на оригиналния източник на тази статия всички ðóíåò pereroyut: D Tk Мисля, че не всички са на лов за някой, който да поставите връзка към вашата статия искам да правя))) Аз също много започна да забравяйте да поставите връзки трябва да бъдат коригирани)) :)
Свързани статии