Բեռնվում է

Brainstorm

Անհատական Front-end և scroll անիմացիաներ Brainstorm գործակալության կայքի համար

Ամեն ինչ սկսվեց 2018 թվականին՝ որպես արտաքին պատվեր. ես ծրագրավորում էի Brainstorm գործակալության կայքը, մինչ դրա դիզայնը դեռ մշակվում էր։

Կայքի UI-ը իրականացրել եմ HTML, CSS և մաքուր JavaScript-ով՝ անհատական անիմացիաներով և ձեռքով գրված scroll event-ների տրամաբանությամբ։ Կայքի ավարտից հետո Brainstorm-ը հրավիրեց ինձ միանալ թիմին, որտեղ աշխատել եմ հաճախորդների առցանց խանութների վրա։ Դրանք առանձին նախագծեր են։

Դերը՝
Front-end ծրագրավորող
Համագործակցության ձևը՝
Արտաքին պատվեր, 2018 թ. մայիս–հուլիսԱյնուհետև աշխատակից, 2018 թ. հուլիս–դեկտեմբեր
Աշխատանքների շրջանակը՝
Գործակալության կայքի UI-ըԱնհատական անիմացիաներScroll-ով կառավարվող փոխազդեցություններԱդապտիվ դասավորություններ
Տեխնոլոգիաներ՝
HTMLCSSJavaScript

Ինչ էր ներառում աշխատանքը

Brainstorm-ին անհրաժեշտ էր սեփական կայք, մինչ դիզայնը դեռ ձևավորվում էր։

  1. Նախապատմություն

    Գործակալության սեփական կայքը, որի դիզայնը մշակվում և հստակեցվում էր Front-end-ին զուգահեռ։

  2. Զարգացող դիզայն

    Աշխատել եմ փոփոխվող մակետներով՝ չսպասելով վերջնական տարբերակին։

  3. Մակետներ և ադապտիվ UI

    Իրականացրել եմ բոլոր մակետները՝ հարմարեցնելով տարբեր էկրաններին և պահպանելով վիզուալ կոնցեպտը։

  4. Անհատական անիմացիաներ

    Անիմացիան օգտատիրոջ փորձառության մաս էր, ոչ թե պարզապես ձևավորում։

  5. Scroll իրադարձություններ

    Scroll-ի ժամանակ գործող անիմացիաներն ու անցումները ձեռքով ծրագրավորել եմ JavaScript-ով՝ առանց պատրաստի անիմացիոն ձևանմուշների։

  6. Ինչ փոխվեց

    • Գործակալության անհատական անիմացիոն կայք
    • Հրավեր միանալու Brainstorm թիմին որպես ծրագրավորող

  7. Ինչ է ցույց տալիս նախագիծը

    • Ինքնուրույն Front-end իրականացում
    • Ձեռքով գրված անհատական JavaScript անիմացիաներ
    • Հաճախորդի նախագիծ, որը վերածվեց երկարաժամկետ համագործակցության

Սկզբունքներ

Ինչպես էր կայքը կառուցվում դիզայնի մշակմանը զուգահեռ։

  • Աշխատել դիզայնին զուգահեռ

    Ինտերֆեյսը մշակել դեռ փոփոխվող մակետների հիման վրա։

  • Նպատակային անիմացիա

    Անիմացիան՝ որպես կայքի հետ փոխազդեցության գործուն մաս։

  • Scroll-ի կառավարում

    Scroll փոխազդեցությունները կառավարվում են կոդով, ոչ թե ձևանմուշներով։

  • Ադապտիվ կոնցեպտ

    Տարբեր էկրանների համար հարմարեցումը պահպանում է սկզբնական վիզուալ գաղափարը։

Մանրամասն

Մշակման երկու մաս և դրանց մոտեցումները։

1. Scroll անիմացիաներ՝ ձեռքով

Կայքի անիմացիաներն ու ինտերակտիվությունը կառավարվում են scroll-ով։

Պատրաստի ձևանմուշների փոխարեն ես ինքս եմ գրել JavaScript իրադարձությունների մշակման տրամաբանությունը, որպեսզի յուրաքանչյուր էջի անիմացիան աշխատի ըստ մտահղացման։

2. Դիզայնը՝ մշակման ընթացքում

Մակետները շարունակում էին փոխվել, երբ Front-end-ի ծրագրավորումն արդեն ընթացքի մեջ էր։

Զուգահեռ աշխատանքը թույլ տվեց, որ պատրաստ կայքը համապատասխանի վերջնական դիզայնին, այլ ոչ թե դրա վաղ տարբերակին։

Նմանատիպ խնդի՞ր ունեք

Պատմեք՝ ինչ եք ստեղծում։ Կպատասխանեմ երկու աշխատանքային օրվա ընթացքում։

Սկսել նախագիծ

Նոր կայք, պրոդուկտի ինտերֆեյս, դիզայն համակարգ կամ գործող լուծման բարելավում։

Սկսել նախագիծ