Всеки, който е играл или гледал приятелите на играта, или по принцип трион игри, които са били освободени в 80-90 години, трябва да е запознат с техниката на паралакс превъртане.
Помислете игри като Mario Bros. Улиците на Rage. Mortal Kombat. Костенурки във времето, или оригиналната игра Moon Patrol. В тези игри, на паралакс техника наблюдава в момент, когато няколко фонови слоеве с различни текстури се движат с различна скорост, което създава ефекта на триизмерното пространство.
Защо аз започнахме да говорим за ретро игри в статията за уеб програмиране? Най-простият отговор ще бъде ", защото те са готини", но не. Паралакс превъртане е готина концепция за дизайн, която се налага в света на уеб дизайна. Nike бяха сред първите, които използват тази техника с голям успех, когато те нае маркетингови гиганти Вайден и Кенеди за развитието на оригиналния сайт Nike по-добър свят. Сайт Nike-добър свят оттогава е актуализиран и се заменя с нова, но има и друг сайт съвсем като изглеждаше, че първата паралакс дизайн от Nike - на мястото на спортните напитки Активиране.
Вероятно сте забелязали, че докато превъртите страницата надолу на сайта на няколко различни елементи, които са на тази страница, които се движат с различна скорост. Да вземем например страницата, която се показва на снимката по-горе. Както превъртите страницата надолу ще видите, сините точки във фонов режим (тези, които са малко замъглено), движещи се със същата скорост като лентата за превъртане. Също така, ще видите, че една група от точки, които са по-фокусирани и са на преден план, движейки се с малко по-висока скорост от лентата за превъртане. По-бързо тези точки се движи текста "0 захар | 0 Калории | ЕСТЕСТВЕНО подсладен "и главната страница заглавието" Продукти ". И накрая, не е по-голям от самия продукт, както малки и нефокусиран във фонов режим и големи, фокусирани и да лежи на преден план. Фонови изображения на продукти, се движат със същата скорост като тази на текста, а изображенията на продукта на преден план се движат по-бързо от текста. Всичко това е идеална демонстрация паралакс превъртане, когато различни слоеве на изображения наложени едно над друго и всички се движат с различни скорости, докато превъртате, създаване на триизмерен ефект.
Паралакс превъртане не се ограничава само до вертикално превъртане или превъртане на страниците в права линия. Дайте Nintendo правото да демонстрират идеален пример, потвърждаващ това твърдение. Мислете за началото на Nintendo игри, където нашите герои обикновено се преместват хоризонтално от ляво на дясно по екрана, а не вертикално надолу, както видяхме на сайта по-горе Активиране. Обърнете се повозим на MarkioKart Wii и нека да поговорим за някои от най-готините неща, които можем да видим там.
Първото нещо, което ще забележите, е посоката, превъртане на страниците на - не е вертикална, но както е споменато по-горе, и първоначално хоризонтално. Разбира се, това е готино, но това също не е нова концепция. Също така, вие ще забележите, паралакс ефект с динозавърът Йоши и черупките на заден план, Марио и Луиджи на преден план и основното съдържание, което се премества с различна скорост, когато се превърта. Но веднага след като се достигне до вашите страници и #highlights #attack, изместване траектория престава да бъде напълно хоризонтално. Същото важи и за прехода между страниците и #rediscover #snes. Изображенията се не само запазват различна скорост на преместване, но също променят общата посока от хоризонтално до вертикално.
Трябва също да се отбележи, че използването на паралакс ефект на вашия сайт не трябва да се ограничава само от възможността за създаване на изкуствен 3D-ефект. Немски сайт уеб дизайн студио Webseitenfactory е пример за това как можете да използвате паралакс да добавите различни ефекти към страницата, като движението на икони по различни траектории, тяхното увеличаване и намаляване както на мястото на превъртане.
Първото ми впечатление беше: "О, този сайт изглежда добре." Но когато тя започва да превъртате, с впечатлението, че е веднага, "Уау, този сайт е яко!". Добавянето на прост паралакс ефект просто прави разлика между добро и запомнящо се.
Паралакс превъртане - това е един добър трик, който може да се съхранява в ръкава си. И това винаги може да се прилага, независимо от това дали сте прави комплексен обект на много страници, или просто сайт визитка на една страница.
Примери за обекти с паралакс
Инструменти за създаване на паралакс ефект: