Кыймылда, параллакс объекттин жайгашкан жеринин ордунда турган байкоочуга салыштырмалуу кандайдыр бир фон боюнча өзгөрүшүн билдирет. Бул термин интернетте популярдуулукка ээ болду. Атап айтканда, сайт кызыктуу көрүнөт, анын дизайнында динамикалык элементтер бар. Параллакс – веб-баракчаларды долбоорлоо ыкмасы, веб-мастерлер көп сандагы конокторду тартуу үчүн колдонгон.
Параллакс эмнеге окшош
Параллаксты сыдырууну вертикалдуу да, түз сызыкта да колдонсо болот. Nintendo мыкты үлгү болуп саналат. Көбүбүз экрандын сол тарабынан оңго карай башкы каармандардын кыймылы менен чагылдырылган компьютердик оюндарды ностальгия менен эстейбиз. Ал вертикалдуу жайгашкан түз сызык боюнча жүзөгө ашырылат, ылдый жылып да болот. Интернеттеги параллакс эффектиси көп колдонулат. Вертикалдуу 3 слайдерди түзүү үчүн JavaScript же CSS колдонсоңуз болот.
Сүрөттөлгөн үч өлчөмдүү мейкиндик эффектиси аларга гана мүнөздүү. Оюндардын жаратуучулары бир нече фон катмарларын колдонушкан. Алар текстурасы боюнча айырмаланат, ал эми кыймыл ар кандай менен жүзөгө ашырылатылдамдык.
Параллакс жөн гана 3D эффекти деп ойлобоңуз. Баракта сиз учурдагы иконаларды жылдыра аласыз. Анын үстүнө, ал абдан жагымдуу көрүнөт. Өзгөчө жакшы вариант - алардын ар бири үчүн жеке траекторияны колдонуу. Бул учурда, ар кандай траекториялар боюнча жылып, ар кандай иконалар колдонулат. Бул дизайн көңүл бурат.
Сүрөт жанды
Сүрөттөрү жок сайтты табуу кыйын. Жогорку сапаттагы жана демонстрациялуу сүрөттөр келгендерди өзүнө тартат. Бирок көп көңүл динамикалык сүрөттөрдүн ар кандай түрлөрүнө бурулат. Чынында эле, бир сайтка киргенде кыймыл бар болсо, анда бул көңүл бурат. Динамикалык сүрөткө ресурска кайтып келген коноктордун ыктымалдуулугун олуттуу жогорулатат. Кыймылдай түштүбү же жокпу? Ошондуктан, сайтка конокторду тартуу үчүн, параллакс эффектиси сыяктуу нерсени изилдеп көрүү керек.
Сүрөттүн жылдырылышынын мисалдары:
- hvorostovsky.com;
- www.kagisointeractive.com.
Мисалдарда көрсөтүлгөндөй, тажрыйба ылдый түшүүчү менюлар аркылуу жакшыртылды. Мындай элемент коноктордун убактысын үнөмдөйт, ошондуктан алар үчүн жагымдуу болот.
jQuery китепканасы
JQueryParallax термини бир эле аталыштагы китепкананы аныктайт. Анын аркасында 3D форматында кыймылдын эффектине жетүү оңой. jQuery китепканасында 3D кабылдоо ар кандай жолдор менен түзүлөт. Алардын бири фон объектилеринин горизонталдуу бир убакта кыймылынан туратар кандай ылдамдык. Бул китепкана көп сандагы ар кандай касиеттердин болушу менен мүнөздөлөт. Ал эми бул жерде сүрөттөлгөн жылышуу анын мүмкүнчүлүктөрүнүн бир аз гана бөлүгү.
Сайт абдан жагымдуу көрүнөт, аны түзүү үчүн ар кандай заманбап элементтер колдонулган. Алардын бири - параллакс. Мисал сайттар мындай болушу мүмкүн:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buyselwebsite.com.
jParallax чычкан менен кыймылдаган катмарлар менен көрсөтүлөт. Динамикалык элементтер абсолюттук позициялоо менен мүнөздөлөт (позиция: абсолюттук;). Алардын ар бири өзүнүн өлчөмү жана жеке ылдамдыкта кыймылы менен мүнөздөлөт. Бул текст же сүрөт болушу мүмкүн (ресурстун жаратуучуларынын талабы боюнча).
Сайттын кирүүчүсүн кабылдоо
Андан кийин адам көбүнчө баракчанын сапаттуу, ыңгайлуу жана билимдүү жасалганына көңүл бурат. Бул чындык, адатта, урматталат. Башка элементтерди сынап көрүү үчүн кызыгуу пайда болот. Интернетте окшош сайттардын көп саны бар. Ресурсуңузду кантип өзгөчө кылуу керек?
Эгер сизге дизайн жакса, келүүчү көбүрөөк убакытка калат. Ошентип, аны жайгаштырылган маалымат өзүнө тартып алуу ыктымалдыгы жогорулайт, ал кызыгуу көрсөтөт. Натыйжада, адам сунушталган кызматты, продуктуну же жарнамалык сунушту колдонот.
Сүйүктүү эски оюндар
"Параллакс" түшүнүгү баарына тааныш болушу керек80-90-жылдардагы консол күйөрмандары. Бул оюндарга тиешелүү:
- Mario Bros.
- Мортал Комбат.
- Каардын көчөлөрү.
- Ай Патруль.
- Ташбакалар убагында.
Башкача айтканда, параллакс – бул көптөн бери колдонулуп келе жаткан техника. Бул оюндар, чынында эле, кандайдыр бир ностальгия менен эсте калды. Анткени, алар ошол мезгилдин мүнөзүнө сугарылгандай.
Экрандагы сүрөттөр параллакс сыдыруу сыяктуу техниканын жардамы менен түзүлөт. Бул техника татыктуу популярдуулукка ээ болгондугунда таң калыштуу эч нерсе жок. Бул дизайн концепциясын 80-90-жылдары ойногондор же досторунун бош убактысын көргөндөр жылуу кабыл алышат.
Параллакс сыдыруу
Дүйнөлүк алдыңкы бренддердин маркетологдору көптөн бери ар кандай техникалык жетишкендиктерди колдонуп келишет. Ошентип, сайтка жөн эле кирүүчүнү да кызыктырууга болот.
Parallax сыдыруу Nike тарабынан ийгиликтүү колдонулган. Компаниянын баштапкы веб-сайты Вейден менен Кеннеди тарабынан иштелип чыккан. Бирок бул дизайн сакталган эмес. Ресурс биздин замандын тенденцияларына ылайык акырындык менен жаңыланып турду. Activatedrinks.com дизайны ошол мезгилдеги Nike маркетологдору колдонгон сайтты эске салган сайттын мисалы.
Спикерлер өтө көп болбошу керек
Сайттын дизайны көбүнчө келүүчүгө багыт берүүчү негизги критерий экенин унутпаңыз. Начар аткарылганресурс, адатта, ээси компаниянын жеңил ойлуу таасири менен колдонуучу калтырат. Бирок ар кандай жагымдуу дизайн элементтери бар сайт уюмдун ээлеринин конокторду кызыктыруу каалоосун көрсөтөт.
Бул жерде параллакс жөнүндө эстен чыгарбоо керек. Бул сонун курал болуп саналат. Бирок алар да өтө алаксып кетпеши керек. Анткени кыймылдуу элементтердин көп сандагы бар баракты кабыл алуу абдан кыйын. Дизайнды бир аз стилдүү жана түшүнүктүү кылганыңыз жакшы.
Динамикалык тандоону талап кылган жеке элементтер болушу керек. Ошондой эле бири-бирине салыштырмалуу катмарларды жылдыруу менен түзүлгөн сүрөт болушу мүмкүн. Колдонуучунун сайты биринчи кезекте коноктор үчүн иштелип чыкканын унутпаңыз. Бул ага бардык билимин жумшаган веб-мастердин шедеври болушу шарт эмес. Анткени, мындай мамиле кабыл алууну татаалдантат.
Сайттын навигациясын кантип түзүү керек
Параллаксты кантип жасоо керек? Бул суроо көптөгөн веб-сайт куруучуларды кызыктырат. Тег жазуунун татаал жактарын билүү зарыл эмес. Интернетте атайын ресурстарды колдонуу абдан ыңгайлуу. Жеткиликтүү сунуштардын көп санынан төмөнкү жардамчыларды айырмалоого болот:
- Plax – бул колдонууга оңой программа. Ал чычканды жылдыруу менен баракты суюктукка айлантат.
- jQuery Parallax Image Slider - Сүрөт сыдырмаларын түзүү үчүн колдонулган jQuery плагини.
- Jquery Image Parallax - тунук чиймелерди иштеп чыгуу үчүн ылайыктуу. Анын-p.webp" />
- Curtain.js туруктуу панелдери бар баракты түзүү үчүн колдонулат. Бул учурда пардаларды ачуу эффекти байкалат.
- Сыдыруу Параллакс: jQuery Plugin чычкан дөңгөлөктөрүн сыдырганда параллакс эффектин жаратуу үчүн.
Дагы пайдалуу плагиндер
Белгилүү болгондой, маалымат эң чоң баалуулук. Жана каалаган жетүү жолдорунун саны канчалык көп белгилүү болсо, туура натыйжаны алуу ыктымалдыгы ошончолук жакын болот. Динамика түзүү үчүн колдонулган пайдалуу плагиндер:
- jQuery Scroll Path - объекттерди көрсөтүлгөн жолго жайгаштыруу үчүн колдонулат.
- Scrollorama – jQuery плагини. Бул жагымдуу материалдык дизайн үчүн курал катары колдонулат. Ыңгайлуу сыдыруунун аркасында беттеги текстти "жандандырууга" мүмкүнчүлүк берет.
- Scrolldeck бул jQuery плагини. Бул бир беттеги сайттар үчүн эң сонун презентация чечими.
- jParallax чычкан көрсөткүчүнүн кыймылына жараша катмарлардын кыймылын билдирет.
- Stellar.js – бул плагин, анын жардамы менен каалаган элементи параллакс сыдыруу эффектиси кошулуп иштелип чыккан.
Паралакс курсорго орнотулган
Бул параллакс абдан таасирдүү көрүнөт. Бир караганда кыймылсызсайт бетинин объекттери чычкан курсору жакындаганда жылат. Ал жанданып, жылдырылып жаткан элементти ээрчийт окшойт.
Биринчи, сиз сүрөткө токтошуңуз керек. Керектүү сүрөт кадрга жайгаштырылат, ал эми анын четтери жашырылган болушу керек. Метод абдан жөнөкөй жана натыйжада тартылган сүрөт абдан жагымдуу көрүнөт.
Сайт үчүн Параллакс эффектиси дизайндын эң сонун жолу. Аны колдонуу ресурсту түзүүгө тийиштүү көңүл бурулганын көрсөтүп турат. Ошондуктан, сунушталган кызматтарга же окуу үчүн маалыматка көңүл буруш керек. Мындай сайттар окшош, бирок жөн гана иштелип чыккан ресурстардын фонунда пайдалуураак көрүнөт.
