H E L L O
W O R L D !

K√ČPES ANIM√ĀCI√ďK

Ezek a kis m√©retŇĪ k√©pek igen kev√©s t√°rhelyet foglalnak, √©s mivel az anim√°ci√≥k k√≥dja CSS-ben van meg√≠rva, a futtat√°suk nem ig√©nyel nagy teljes√≠tm√©nyt a b√∂ng√©szŇĎtŇĎl.

Ezek az elsŇĎ pr√≥b√°lkoz√°sok m√©g csak √∂tletel√©sek: kigondoltam egy mozg√°st, majd a kontextust, v√©g√ľl kerestem hozz√° k√©peket. A technikai megval√≥s√≠t√°suk egyelŇĎre m√©g fapados verzi√≥, mert nem reszponz√≠v. Az anim√°ci√≥k k√≥dj√°ban az egyes elemek √°ltal megtett √ļt (= a mozg√°suk) konkr√©t sz√°mokkal van meghat√°rozva, vagyis az alapk√©p m√©ret√©hez van igaz√≠tva. B√°r az anim√°ci√≥k egyes elemei mindig ugyanazt a mozg√°st ism√©tlik, a k√ľl√∂nb√∂zŇĎ √°tfut√°si idŇĎ √©s a k√©sleltet√©s haszn√°lata tud v√°ltozatoss√°got vinni a l√°tv√°nyba. A k√©pet alkot√≥ elemek r√©tegez√©se pedig ad egy kis 3D-hat√°st.

Az alábbi kisképek szélessége egységesen 300 pixel, hogy biztosan illeszkedjen az okostelefonok méreteihez, ne kelljen vízszintesen görgetni.

Az al√°bbi k√©pek sz√©less√©ge fix 800 pixel, ez√©rt az okostelefonok √©s tabletok kijelzŇĎj√©n v√≠zszintesen g√∂rgetni kell. Monitoron viszont ki lehet √©lvezni a teljes l√°tv√°nyt.

© 2022 esdirea.hu