Веб локација са ефектом паралакса

Тренутно имамо велики избор веб страница које могу имплементирати различите дизајнерске обрасце, који се могу кретати од класичног равног дизајна до иновативног новог дизајна материјала.

Али постоји сасвим другачији и осебујан начин прављења веб страница, веб страница које су само информативног карактера и немају тако сложену функционалност. У тим случајевима можемо користити веб страницу са једном страницом која имплементира ефекат Параллак.

Овај ефекат нам даје осећај да имамо више равни, па чак и више страница у једној. Хајде да видимо како то можемо применити.

ХТМЛ код

Наш ХТМЛ Састојиће се од прилично једноставне структуре, састављене од див -а које ћемо идентификовати као контејнере према одређеним класама, поред тога ћемо укључити наше стилске листове на уобичајен начин, као и наше ЈаваСцрипт. У овом примеру ослањаћемо се на обоје јКуери као Ундерсцоре.јс која је библиотека која нам пружа неколико функционалности које ће нам помоћи у овој вежби:

 Хоме Параллак
Пад са неба
Филм 1
Професионални
Филм 2
Пси резервоари
Филм 3

ЦСС код

За наш стилски лист ћемо радити још мало и користићемо својства ЦСС3 у односу на трансформише да бисмо дали ефекат померања горе или доле по позадини, поред овога користићемо потомке нашег документа за додељивање различитих слика у позадини које ће нам послужити као више страница, да видимо овај фрагмент нашег ЦСС:

 .бацкгроунд {бацкгроунд-сизе: цовер; бацкгроунд-репеат: но-репеат; позадина-позиција: центар центар; преливање: скривено; воља-промена: трансформација; -вебкит-бацкфаце-висибилити: хидден; позадинска видљивост: скривено; висина: 130вх; положај: фиксно; ширина: 100%; -вебкит-трансформ: транслатеИ (30вх); -мс-трансформ: транслатеИ (30вх); трансформирати: транслатеИ (30вх); -вебкит-транзиција: сви 1.2с кубни-безиер (0.22, 0.44, 0, 1); прелаз: сви 1.2с кубни-безиер (0.22, 0.44, 0, 1); }. бацкгроунд: бефоре {цонтент: ""; положај: апсолутан; ширина: 100%; висина: 100%; врх: 0; лево: 0; десно: 0; дно: 0; боја позадине: ргба (0, 0, 0, 0.3); }. позадина: прво дете {бацкгроунд-имаге: урл (скифалл.јпг); -вебкит-трансформ: транслатеИ (-15вх); -мс-трансформ: транслатеИ (-15вх); трансформирати: транслатеИ (-15вх); }. позадина: прво дете. .цонтент-враппер {-вебкит-трансформ: транслатеИ (15вх); -мс-трансформ: транслатеИ (15вх); трансформирати: транслатеИ (15вх); }. позадина: нтх-цхилд (2) {бацкгроунд-имаге: урл (тхепрофессионал.јпг); }. позадина: нтх-цхилд (3) {бацкгроунд-имаге: урл (ресервоирдогс.пнг); }. позадина: нтх-цхилд (1) {з-индекс: 3; }. позадина: нтх-цхилд (2) {з-индек: 2; }. позадина: нтх-цхилд (3) {з-индек: 1; }

Да бисмо завршили са стилским листом, применићемо неке измене у тексту који ће бити укључен у сваки контејнер, као и прелаз који сваки од њих мора да изврши у складу са померањем које направимо на веб локацији, показујући да ли се крећемо горе или доле

 .цонтент-враппер {висина: 100вх; приказ: -вебкит -бок; приказ: -вебкит -флек; приказ: -мс -флекбок; дисплеј: флек; -вебкит-бок-пацк: центар; -вебкит-јустифи-цонтент: центар; -мс-флек-пацк: центар; јустифи-цонтент: центар; поравнање текста: центар; -вебкит-флек-флов: цолумн новрап; -мс-флек-флов: ступац новрап; флек-флов: ступац новрап; боја: #ффф; породица фонтова: Монтсеррат; текстуална трансформација: велика слова; -вебкит-трансформ: транслатеИ (40вх); -мс-трансформ: транслатеИ (40вх); трансформирати: транслатеИ (40вх); воља-промена: трансформација; -вебкит-бацкфаце-висибилити: хидден; позадинска видљивост: скривено; -вебкит-транзиција: свих 1.7с кубних-безиера (0.22, 0.44, 0, 1); прелаз: сви 1.7с кубни-безиер (0.22, 0.44, 0, 1); } .цонтент-титле {фонт-сизе: 12вх; висина линије: 1,4; } .бацкгроунд.уп-сцролл {-вебкит-трансформ: транслате3д (0, -15вх, 0); трансформирати: транслате3д (0, -15вх, 0); } .бацкгроунд.уп-сцролл .цонтент-враппер {-вебкит-трансформ: транслатеИ (15вх); -мс-трансформ: транслатеИ (15вх); трансформирати: транслатеИ (15вх); } .бацкгроунд.уп-сцролл + .бацкгроунд {-вебкит-трансформ: транслате3д (0, 30вх, 0); трансформирати: транслате3д (0, 30вх, 0); } .бацкгроунд.уп-сцролл + .бацкгроунд .цонтент-враппер {-вебкит-трансформ: транслатеИ (30вх); -мс-трансформ: транслатеИ (30вх); трансформирати: транслатеИ (30вх); } .бацкгроунд.довн-сцролл {-вебкит-трансформ: транслате3д (0, -130вх, 0); трансформирати: транслате3д (0, -130вх, 0); } .бацкгроунд.довн-сцролл .цонтент-враппер {-вебкит-трансформ: транслатеИ (40вх); -мс-трансформ: транслатеИ (40вх); трансформирати: транслатеИ (40вх); } .бацкгроунд.довн-сцролл + .бацкгроунд: нот (.довн-сцролл) {-вебкит-трансформ: транслате3д (0, -15вх, 0); трансформирати: транслате3д (0, -15вх, 0); } .бацкгроунд.довн-сцролл + .бацкгроунд: нот (.довн-сцролл) .цонтент-враппер {-вебкит-трансформ: транслатеИ (15вх); -мс-трансформ: транслатеИ (15вх); трансформирати: транслатеИ (15вх); }

ЈаваСцрипт код

Коначно у нашем ЈаваСцрипт ми ћемо се позабавити оним што је слушалац наших догађаја, односно да знамо када корисник користи помицање миша за кретање по веб страници. Поред овога, открићемо и прегледач који се користи и утврдићемо неке константне вредности, као што је трајање које клизач мора да има пре него што се поново промени, осетљивост листања и број страница које ћемо имати.

 вар тиме = фалсе; вар исФирефок = (/Фирефок/и.тест(навигатор.усерАгент)); вар исИнтернетЕ = (/МСИЕ/и.тест(навигатор.усерАгент)) || (/Тридент.*рв\:11\./и.тест(навигатор.усерАгент)); вар осетљивост Свитак = 30; вар дуратионСлидерс = 600; вар слидерАцтуал = 0; вар слидерТоталес = $ (". бацкгроунд"). ленгтх; функција параллакеффецт (евт) {иф (есФирефок) {делта = евт.детаил * (-120); } елсе иф (есИнтернетЕ) {делта = -евт.делтаИ; } елсе {делта = евт.вхеелДелта; } иф (тиме! = труе) {иф (делта = СцроллСенситивити) {тиме = труе; иф (цуррентСлидер! == 0) {цуррентСлидер--; } превиоусИтем (); дуратионСлидерТиме (дуратионСлидерс); }}}

Коначно, утврдит ћемо вријеме у којем слика мора бити фиксирана за прелазак на сљедећу, као и слушатеље наших догађаја, додатно ћемо користити функцију додавања или уклањања разреда како бисмо знали када је једна од слика при дну или при врху:

 функција тимеСлидерДуратион (слидеДуратион) {сетТимеоут (фунцтион () {тиме = фалсе;}, слидеДуратион); } вар евентСцроллМоусе = је Фирефок? "ДОММоусеСцролл": "точак"; виндов.аддЕвентЛистенер (догађај СцроллМоусе, _.тхроттле (Параллак ефекат, 60), фалсе); функција елеНект () {вар $ слидеПревиоус = $ (". бацкгроунд"). ек (цуррентСлидер - 1); $ слидеАнтериор.ремовеЦласс ("померање нагоре"). аддЦласс ("померање наниже"); } функција превиоусИтем () {вар $ слидеСиг = $ (". бацкгроунд"). ек (цуррентСлидер); $ слидеСиг.ремовеЦласс ("довн-сцролл"). аддЦласс ("уп-сцролл"); }

Када је наш код довршен, остаје нам само да тестирамо рад наше апликације, за ово морамо само да користимо померање миша да бисмо видели понашање, да видимо:

Овај ефекат даје сасвим свеж осећај нашим веб локацијама, међутим препоручљиво је користити га у одређеним апликацијама, попут портфолија или страница са информацијама, јер ће свака друга веб локација која обрађује друге врсте процеса или информација уморити корисника и изгубити интересовање за њега …