A parallax megold\u00e1sok a vide\u00f3j\u00e1t\u00e9kok vil\u00e1g\u00e1ban jelentek meg, de ennek m\u00e1r van harminc \u00e9ve is. M\u00e1r ekkor akadtak olyan j\u00e1t\u00e9kok, ahol a h\u00e1tt\u00e9r lassabban mozgott, \u00edgy a t\u00e9r ill\u00fazi\u00f3j\u00e1t keltette. A webdesignban 2011-ben bukkant fel a HTML5-nek k\u00f6sz\u00f6nhet\u0151en. Mindezek mellett m\u00e9g mindig \u00fajnak \u00e9s eredetinek hat a weboldalakon, tal\u00e1n amiatt is, hogy kev\u00e9s oldal merte megkock\u00e1ztatni a haszn\u00e1lat\u00e1t.<\/p>\n\n\n\n
Mi az a parallax design?<\/h2>\n\n\n\n
A parallax design l\u00e9nyege, hogy t\u00f6bb \u201cr\u00e9teg\u201d jelenik meg egyszerre egy weboldalon, szinte 3D-s lesz a l\u00e1tv\u00e1ny. Az\u00e9rt, mert a r\u00e9tegek elt\u00e9r\u0151 sebess\u00e9ggel mozognak<\/strong>, amikor scrollozunk lefel\u00e9 vagy csak mozgatjuk az egeret: p\u00e9ld\u00e1ul a h\u00e1tt\u00e9r lassabban mozdul, mint az el\u0151t\u00e9rben l\u00e9v\u0151 k\u00e9pek. Ez\u00e1ltal kelt t\u00e9rhat\u00e1st, ami leny\u0171g\u00f6z\u0151 tud lenni a megszokott k\u00e9tdimenzi\u00f3s, sz\u00f6veg-k\u00e9p fel\u00e9p\u00edt\u00e9s\u0171 weboldalak ezrei k\u00f6z\u00f6tt.<\/p>\n\n\n\n Tov\u00e1bbi \u201ctr\u00fckk\u00f6kre\u201d is k\u00e9pes azonban a parallax design: nemcsak f\u00fcgg\u0151legesen mozoghat, hanem ak\u00e1r v\u00edzszintesen is, s\u0151t b\u00e1rmilyen ir\u00e1nyban, valamint a felhaszn\u00e1l\u00f3k egy-egy linkre kattint\u00e1ssal l\u00e1tv\u00e1nyos ugr\u00e1sokat tehetnek az oldalon. Ami k\u00e9pes mag\u00e1val ragadni az embert, vagyis vonz\u00f3bb\u00e1, l\u00e1tv\u00e1nyosabb\u00e1 tehetj\u00fck a weboldalunkat vele, a kijelz\u0151 el\u0151tt tarthatjuk a felhaszn\u00e1l\u00f3t, aki \u00edgy t\u00f6bb id\u0151t t\u00f6lt az oldalunkon.<\/p>\n\n\n\n \u00c1ltal\u00e1ban a designerek \u00e9s a weboldaltulajdonosok az\u00e9rt ny\u00falnak a parallax megjelen\u00e9shez, mert egy „mag\u00e1val ragad\u00f3” \u00e9lm\u00e9nyt szeretn\u00e9nek k\u00edn\u00e1lni a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra. Azt felt\u00e9telezik ugyanis, hogy ez\u00e1ltal kreat\u00edvabb megjelen\u00e9s\u0171 \u00e9s megjegyezhet\u0151bb lesz az oldal. Enn\u00e9l azonban t\u00f6bbet tud a parallax oldal.<\/p>\n\n\n\n A parallax g\u00f6rget\u00e9s felhaszn\u00e1l\u00e1s\u00e1ra az egyik legk\u00e9zenfekv\u0151bb lehet\u0151s\u00e9g a t\u00f6rt\u00e9netmes\u00e9l\u00e9s. A felhaszn\u00e1l\u00f3k egyre ink\u00e1bb \u00e9rzelmi kapcsolatot szeretn\u00e9nek kialak\u00edtani a m\u00e1rk\u00e1kkal is, melyekt\u0151l v\u00e1s\u00e1rolnak valamit. M\u00e1r \u00f6t \u00e9ve is azt mutatt\u00e1k a kutat\u00e1sok, hogy az emberek 81 sz\u00e1zal\u00e9ka<\/a> azt v\u00e1rja a m\u00e1rk\u00e1kt\u00f3l, hogy mondjanak el nekik egy t\u00f6rt\u00e9netet, \u00e9s ez a trend az\u00f3ta is v\u00e1ltozatlan.<\/p>\n\n\n\n Ha egy weboldal hat\u00e9konyan mondja el a t\u00f6rt\u00e9net egy parallax anim\u00e1ci\u00f3 alkalmaz\u00e1s\u00e1val, akkor az nagy es\u00e9llyel azt eredm\u00e9nyezi, hogy a l\u00e1togat\u00f3k tov\u00e1bb maradnak a weboldalon. M\u00e1rpedig minden weboldal c\u00e9lja az, hogy cs\u00f6kkentse a visszafordul\u00e1si ar\u00e1nyt \u00e9s n\u00f6velje a weboldalon elt\u00f6lt\u00f6tt id\u0151t. Teh\u00e1t lehet, hogy a parallax effekt n\u00f6veli a bet\u00f6lt\u0151d\u00e9si id\u0151t, ami nem kedvez\u0151 a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny vagy a SEO szempontj\u00e1b\u00f3l, ezzel szemben \u00e1ll azonban, hogy – ha j\u00f3l van kivitelezve – megfogja a felhaszn\u00e1l\u00f3t, n\u00f6veli az aktivit\u00e1s\u00e1t az oldalon.<\/p>\n\n\n\n Az emberek vizu\u00e1lis l\u00e9nyek. Sokkal jobban szeretnek k\u00e9pek seg\u00edts\u00e9g\u00e9vel, vonz\u00f3 \u00e9s izgalmas vizu\u00e1lis megjelen\u00e9ssel inform\u00e1ci\u00f3t befogadni, mint egyhang\u00fa sz\u00f6vegek \u00e1ltal. Ez az oka annak is, hogy a vizu\u00e1lis tartalmak sokkal t\u00f6bb k\u00f6z\u00f6ss\u00e9gi megoszt\u00e1st szereznek, mint az egyszer\u0171 \u00edrott sz\u00f6vegek, legyenek azok b\u00e1rmennyire is informat\u00edvak. A parallax anim\u00e1ci\u00f3k seg\u00edts\u00e9g\u00e9vel pedig az inform\u00e1ci\u00f3k vizu\u00e1lisan izgalmasabb\u00e1 tehet\u0151k, \u00edgy hat\u00e9konyabban \u00e1tadhat\u00f3k az embereknek.<\/p>\n\n\n\n Hiszen ahelyett, hogy sok egyforma bekezd\u00e9ssel tal\u00e1lkozn\u00e1nak a felhaszn\u00e1l\u00f3k a weboldalon, k\u00e9peket, grafikonokat \u00e9s nem mellesleg sz\u00f6veget l\u00e1tnak \u00e9letre kelni a parallax hat\u00e1s \u00e1ltal.<\/p>\n\n\n\n Az el\u0151bbi gondolatot folytatva, a parallax anim\u00e1ci\u00f3k r\u00e9v\u00e9n \u00e9l\u0151v\u00e9 v\u00e1lik a weboldal, ahol \u00edgy gyakorlatilag mozg\u00e1s jelenik meg, ak\u00e1rcsak korunk legfelkapottabb m\u00e9diaform\u00e1tum\u00e1ban: a vide\u00f3kban. A parallax effektek r\u00e9v\u00e9n a weboldal olyann\u00e1 v\u00e1lhat, mintha egy vide\u00f3s prezent\u00e1ci\u00f3 lenne, an\u00e9lk\u00fcl persze, hogy val\u00f3ban el kellene helyezni benne egy vide\u00f3t. <\/p>\n\n\n\n Ugyanakkor van egy el\u0151nye a vide\u00f3kkal szemben: maxim\u00e1lisan a felhaszn\u00e1l\u00f3k kez\u00e9ben van az ir\u00e1ny\u00edt\u00e1s, hiszen a g\u00f6rget\u00e9ssel szab\u00e1lyozhatj\u00e1k a mozg\u00e1st. Ez pedig sokkal felhaszn\u00e1l\u00f3bar\u00e1tabb, mint egy automatikusan elindul\u00f3 vide\u00f3, ahol pause gombot kell lenyomni a meg\u00e1ll\u00edt\u00e1shoz, vagy a cs\u00faszk\u00e1val lehet el\u0151r\u00e9bb \u00e9s h\u00e1tr\u00e9bb mozogni. <\/p>\n\n\n\n Ugyanakkor a parallax haszn\u00e1lat\u00e1val felh\u00edvhat\u00f3 a figyelem bizonyos weboldalelemekre is. Hiszen amikor egy elem m\u00e1s sebess\u00e9ggel mozog, mint a t\u00f6bbi, akkor arra ir\u00e1nyul a figyelem. Az emberek tekintete automatikusan a gyorsabban mozg\u00f3 r\u00e9szre \u00f6sszpontosul, \u00edgy nem kell azt keresni\u00fck. <\/p>\n\n\n\n Mit szeretne minden weboldaltulajdonos el\u00e9rni a weboldal\u00e1val? Azt, hogy leny\u0171g\u00f6zze az embereket \u00e9s eml\u00e9kezzenek r\u00e1, hogy azt\u00e1n k\u00e9s\u0151bb is esz\u00fckbe jusson \u00e9s visszat\u00e9rjenek v\u00e1s\u00e1rolni. Hab\u00e1r a parallax mozg\u00e1s m\u00e1r nem annyira egyedi, mint \u00e9vekkel ezel\u0151tt volt, az\u00e9rt egy kreat\u00edv kivitelez\u00e9s m\u00e9g mindig eml\u00e9kezetes lehet a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra. Ha pedig a Te weboldalad eml\u00e9kezetesebb \u00e9s leny\u0171g\u00f6z\u0151bb, mint a konkurenci\u00e1\u00e9, akkor r\u00e1d fognak eml\u00e9kezni az emberek.<\/p>\n\n\n\n Mindez azonban nem sz\u00fcks\u00e9gszer\u0171s\u00e9g.<\/p>\n\n\n\n Azt kell meg\u00e9rteni a parallax eset\u00e9n, hogy az az anim\u00e1ci\u00f3k egy form\u00e1ja, \u00e9s mint minden anim\u00e1ci\u00f3n\u00e1l a kevesebb t\u00f6bb. Azaz nem musz\u00e1j az eg\u00e9sz weboldalunkat parallax designnal k\u00e9sz\u00edteni, illetve finomabb mozg\u00e1sokat \u00e9rdemes haszn\u00e1lni.<\/p>\n\n\n\n \u00c9rdemes azonban azt is figyelembe venni, hogy milyen jelleg\u0171 az oldalunk. Hiszen a parallax legink\u00e1bb ott m\u0171k\u00f6dik, ahol az emberek nem sietnek, hanem r\u00e1\u00e9r\u0151sen, egy meghat\u00e1rozott c\u00e9l vagy feladat n\u00e9lk\u00fcl tart\u00f3zkodnak az oldalon. Ilyen esetekben a parallax seg\u00edteni tudja egy t\u00f6rt\u00e9net elbesz\u00e9l\u00e9s\u00e9t vagy a m\u00e1rkaidentit\u00e1s m\u00e9ly\u00edt\u00e9s\u00e9t.<\/p>\n\n\n\n M\u00e1sr\u00e9szt parallax oldal eset\u00e9n is figyelhet\u00fcnk k\u00fcl\u00f6n a SEO-ra, \u00e9s – ehhez is kapcsol\u00f3d\u00f3an – a mobilon is haszn\u00e1lhat\u00f3 megjelen\u00e9sre.<\/p>\n\n\n\n N\u00e9h\u00e1ny javaslat:<\/p>\n\n\n\n Igaz, a felhaszn\u00e1l\u00f3kat egy parallax oldalon az anim\u00e1ci\u00f3 fogja leny\u0171g\u00f6zni, annyira, hogy m\u00e1sra nem is nagyon figyelnek, azonban m\u00e9g m\u0171k\u00f6dhet a call to action az oldal alj\u00e1n. \u00c9s tal\u00e1n egy ilyen parallax-\u00e9lm\u00e9ny ut\u00e1n lelkesebben is kattintanak a l\u00e1togat\u00f3k a CTA-gombra.<\/p>\n\n\n\n Mindenesetre, ha nem csak a l\u00e1tv\u00e1ny fontos, hanem a konverzi\u00f3 is, akkor igaz\u00e1n figyelni kell arra, hogy ne hajtsuk t\u00fal a parallax-hat\u00e1st, mert eg\u00e9sz egyszer\u0171en elveszhet\u00fcnk a sok anim\u00e1ci\u00f3ban \u00e9s mozg\u00e1sban, a hull\u00e1mvas\u00fat sor\u00e1n elhalv\u00e1nyul\u00a0az \u00fczenet, elt\u0171nik az oldal c\u00e9lja \u00e9s ir\u00e1nya a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, \u00e9s egy id\u0151 ut\u00e1n nem is tudja, hogy mi v\u00e9gre g\u00f6rget m\u00e9g lefel\u00e9. A leny\u0171g\u00f6z\u0151 l\u00e1tv\u00e1ny \u00e9s a sz\u00e9d\u00fcl\u00e9s k\u00f6z\u00f6tt kell megtal\u00e1lni a hat\u00e1rt, hogy a parallax design jav\u00edtsa, ne pedig rontsa az oldalunk hat\u00e9konys\u00e1g\u00e1t.<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2021.11.17.:<\/em><\/p>\n\n\n\n A k\u00f6vetkez\u0151 p\u00e9ld\u00e1kb\u00f3l els\u0151sorban az der\u00fcl ki, hogy mennyire alkalmas eszk\u00f6z a parallax design t\u00f6rt\u00e9netmes\u00e9l\u00e9sre. Ugyanakkor tal\u00e1n az is l\u00e1tszik rajtuk, hogy ehhez nagy odafigyel\u00e9s \u00e9s alapos tervez\u00e9sre van sz\u00fcks\u00e9g.<\/p>\n\n\n\n A NIIKA oldal\u00e1n<\/a> azt l\u00e1tod, ahogy a hero k\u00e9p absztrakt form\u00e1i finoman elmozdulnak, mik\u00f6zben a sz\u00f6vegek enn\u00e9l gyorsabban mozognak, \u00fasznak be a k\u00e9pbe, \u00e9s onnan kifel\u00e9. Ahogy haladsz lefel\u00e9 az oldalon, \u00fagy v\u00e1ltozik a parallax effekt, ugyanakkor az oldal t\u00f6bb pontj\u00e1n is megjelenik. <\/p>\n\n\n\n A CANN egy amerikai italgy\u00e1rt\u00f3, melynek weboldal\u00e1n<\/a> a k\u00fcl\u00f6nb\u00f6z\u0151 r\u00e9tegek elt\u00e9r\u0151 sebess\u00e9ggel mozognak a g\u00f6rget\u00e9s hat\u00e1s\u00e1ra. Az oldal a term\u00e9k el\u0151nyeit igyekszik els\u0151sorban megmutatni a l\u00e1togat\u00f3 sz\u00e1m\u00e1ra. A sz\u00f6vegek nagyok \u00e9s j\u00f3l olvashat\u00f3k a sok \u00e9s v\u00e1ltoz\u00f3 sz\u00edn ellen\u00e9re, mik\u00f6zben a term\u00e9k is folyamatosan l\u00e1that\u00f3, ahogy az arra utal\u00f3 bubor\u00e9kok is (min\u00e9l gyorsabb a g\u00f6rget\u00e9s, ann\u00e1l t\u00f6bb a bubor\u00e9k). Mindez folyamatos mozg\u00e1sban, \u00fagyhogy egy val\u00f3ban l\u00e1tv\u00e1nyos, izgalmas oldalt siker\u00fclt \u00f6sszehozni, ami miatt a term\u00e9ket is hasonl\u00f3 \u00e9rt\u00e9kekkel ruh\u00e1zzuk fel.<\/p>\n\n\n\n A Garden oldal\u00e1n<\/a> kev\u00e9sb\u00e9 er\u0151teljes a parallax hat\u00e1s, ugyanakkor a grafika itt is felkelti a figyelmet \u00e9s az egyedis\u00e9g \u00e9rzet\u00e9t kelti. A hajt\u00e1s feletti r\u00e9sz parallax mozg\u00e1sa ut\u00e1n m\u00e1r csak vonalak \u00e9s ikonok rajzol\u00f3dnak ki a g\u00f6rget\u00e9s hat\u00e1s\u00e1ra. Ez azonban felh\u00edvja a figyelmet a fontos inform\u00e1ci\u00f3kra, mint p\u00e9ld\u00e1ul a szolg\u00e1ltat\u00e1sok vagy az el\u00e9rhet\u0151s\u00e9g.<\/p>\n\n\n\n A Bertani weboldal\u00e1nak<\/a> designja is meglehet\u0151sen \u00f6sszetett. L\u00e1that\u00f3k itt vide\u00f3k, k\u00e9pek, v\u00e1ltakozva, v\u00edzszintes \u00e9s f\u00fcgg\u0151leges g\u00f6rget\u00e9s, r\u00e1ad\u00e1sul az eg\u00e9rmutat\u00f3 is egyedi, ahogy a navig\u00e1ci\u00f3 sem a megszokott az oldalon. Hab\u00e1r els\u0151re minden m\u00e1sk\u00e9nt van rajta, mint egy megszokott weboldalon, \u00edgy tal\u00e1n nehezebb kiigazodni, ugyanakkor az k\u00e9ts\u00e9gtelen, hogy l\u00e1tv\u00e1nyos, \u00e9s maradand\u00f3 nyomot hagy a l\u00e1togat\u00f3ban.<\/p>\n\n\n\n Azt legmer\u00e9szebb \u00e1lmunkban sem gondoltuk volna, hogy egy toj\u00e1stermel\u0151 gazd\u00e1nak ilyen lehet a weboldala, mint a Crazy About Eggs\u00e9<\/a>. Pedig itt egy holland gazdas\u00e1gr\u00f3l van sz\u00f3, melynek weboldala nagyon egyedi sz\u00ednekkel, grafik\u00e1val \u00e9s parallax effekttel ny\u0171g\u00f6zi le a l\u00e1togat\u00f3t. <\/p>\n\n\n\n V\u00e9g\u00fcl pedig, aki tov\u00e1bbi parallax-p\u00e9ld\u00e1kra k\u00edv\u00e1ncsi, az az Awwward nev\u0171 oldalon<\/a> t\u00f6bb sz\u00e1z d\u00edjnyertes p\u00e9ld\u00e1t tal\u00e1lhat r\u00e1, lehet b\u00f6ng\u00e9szgetni k\u00f6zt\u00fck \u00f6tletek\u00e9rt \u00e9s persze az \u00e9lm\u00e9nyek\u00e9rt.<\/p>\n\r\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/05\/programozo-weboldal-fejlesztes.png\")
<\/figure>\n\n\n\nMire haszn\u00e1lhat\u00f3 a parallax design 2021-ben?<\/h2>\n\n\n\n
Parallax-g\u00f6rget\u00e9ssel mondhatunk el egy t\u00f6rt\u00e9netet<\/h4>\n\n\n\n
A l\u00e1togat\u00e1sok sz\u00e1m\u00e1nak n\u00f6vel\u00e9s\u00e9re<\/h4>\n\n\n\n
K\u00f6nnyebb\u00e9 teszi az inform\u00e1ci\u00f3 \u00e1tad\u00e1s\u00e1t<\/h4>\n\n\n\n
Mozg\u00f3k\u00e9pp\u00e9 alak\u00edthat\u00f3 a weboldal<\/h4>\n\n\n\n
Felh\u00edvhatja valamire a figyelmet<\/h4>\n\n\n\n
Eml\u00e9kezetess\u00e9 tenni a weboldalt<\/h4>\n\n\n\n
Vannak korl\u00e1tai<\/h2>\n\n\n\n
Mit tehet\u00fcnk?<\/h2>\n\n\n\n
N\u00e9h\u00e1ny p\u00e9lda parallax oldalra<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/11\/niika.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/11\/cann.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/11\/garden.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/11\/bertani.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/11\/crazyabouteggs.png\")
<\/figure>\n\n\n\n