Week 3 - jornveltrop/ilojo-bar GitHub Wiki

Jeany en ik konden allebei niet bij de eerste design review zijn, daarom hebben we deze achteraf in week 3 samen gedaan:

Jeany en ik hebben tijdens onze design review kritisch gekeken naar ons ontwerp en hebben op basis daarvan gediscussieerd over verschillende oplossingen voor UI elementen in ons project. Op basis daarvan hebben we taken verdeeld over wie er aan welke feature zal gaan werken.

Ook hebben we gebrainstormd over een oplossing voor het 3D model. De visualisatie van het gebouw moet namelijk op zoveel mogelijk devices werken.

Jeany en ik hebben samen de feedback van Femke geëvalueerd en hebben dit omgezet naar concrete taken/issues.

Jeany had gewerkt aan een betere versie van het 3D model, deze zijn we vervolgens gaan samenvoegen met de vormgeving, waar ik aan had gewerkt.

Tijdens de stand up met Joost hadden Jeany en ik vragen over hoe we nu het beste Femke haar wensen at betreft de omgeving kunnen verwerken in onze site.

Joost gaf ons toen een paar tips qua technieken. Onder andere: GSAP (Greensock) een lightweight JavaScript animatie library, SVG Viewbox en de Intersection Observer.

Tijdens de code review met Justus hadden we het vooral over de performance. Door het 3d model wordt de site snel traag, helemaal in Nigeria. Daarom hebben we besloten om het 3D model niet meer op de homepage te doen, maar er een aparte pagina voor te maken.

Ook hebben we gepland om de laatste week van de Meesterproef te werken aan performance en accessibility.

Tijdens de design review met Vasilis hebben we gebrainstormd hoe we de introductie van het 3D model zichtbaar kunnen maken. Nu stond er nog een switch knop op de homepage die buiten de stijl viel. Zo kwamen we op een banner die over de foto van het gebouw kan, met tekst als 'View this in 3D'. Dit staat op ons project board, maar zijn nog niet toegekomen om dit uit te werken.

Ook hebben we het kort gehad over de story pages. Deze hadden Jeany en ik nog totaal niet gestyled, omdat we nog bezig waren met de homepage en gevels pagina. Vasilis merkte op dat het lettertype vooral wat groter mag op de story pagina's. Deze story pagina's gaan we volgende week stylen.

Na de stand-up en reviews ben ik hard aan de slag gegaan om een grote slag te slaan op de homepage. Ik had een nieuw idee gekregen voor de homepage die met GSAP (shoutout naar Joost) een betere ervaring zou gaan geven. Hierin zou het gebouw meer tot leven komen en zou, zoals Femke wilde, ook meer omgeving te zien zijn.

Dit is uiteindelijk gelukt. GSAP werkt fijn omdat het snel en logisch te coderen is.

let scrollTL = gsap.timeline({
    scrollTrigger: {
      trigger: '.img_cont',
      start: 'top top',
      end: 'bottom top',
      scrub: 1,
      pin: true,
      snap: 1
    }
});

scrollTL
 .fromTo('.scroll_btn', {opacity: 1, duration: .3}, {opacity: 0} )
 .from('.scroll_cont', {scale: 1},'<')
 .fromTo('#color_building', {opacity: 0}, {opacity: 1},'<')
 .fromTo('#background', {opacity: 1}, {opacity: 0},'-=50%')
 .fromTo('#overlay', {opacity: 1, scale: 1}, {opacity: 0, scale: 1.05}, '<25%')
 .fromTo('.discover_cont',{opacity: 0, zIndex: 0, scale: 0.9, rotation:-3}, {opacity: 1, zIndex: 2, scale: 1, rotation:0}, '<')
 .from('.see_model_cont',{ translateX: "100%", opacity: "0"}, '<')
 .addLabel('end')

Ook de gevels heb ik een upgrade gegeven. Je ziet er nu meer op 1 rij op desktop en als je over de gevels heen hovert openen de deuren. Volgende week wil ik achter deze deuren foto's en items van het desbetreffende verhaal toevoegen.

Door deze animatie worden mensen nieuwsgierig naar meer verhalen doordat ze wellicht benieuwd zijn naar welke items er achter de volgende gevel zit.

HTML

<ol class="storiesList">
    <% discoverList.forEach(story => { %>
        <li class="in-view"> 
            <div class="window_wrap">
                <div class="window_img_cont">
                    <div class="window_img_inner">
                        <img src="<%- story.collage_image.url %>" alt="<%- story.collage_image.alt %>" loading="lazy" width="350px" height="300px">
                    </div>
                </div>
                <img class="window door window_L" srcset="/images/window_L.webp" src="/images/window_L.png" alt="window left side Ilojo bar" width="354px" height="525px" draggable="false" />
                <img class="window door window_R" srcset="/images/window_R.webp" src="/images/window_R.png" alt="window right side Ilojo bar" width="354px" height="525px" draggable="false"/>
                <img class="window window_bg" srcset="/images/window_bg.webp" src="/images/window_bg.png" alt="window Ilojo bar" width="354px" height="525px" draggable="false" />
            </div>
            <h3><%- story.title %></h3>
            <a href="<%- story.url %>" aria-label="<%- story.title %>" class="btn_a">Discover</a>
        </li>
   <% }); %>
</ol>

CSS

.discover li {
    scroll-snap-align: center;
    height: 100%;
    display: flex;
    color: var(--light);
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: .5em;
}

.discover li .window_wrap {
    height: 60vh;
    position: relative;
    display: flex;
    justify-content: center;
}

.discover li img {
    object-fit: contain;
    height: 90%;
    width: auto;
}

.window {
    position: absolute;
}

.door {
    z-index: 2;
    transition: transform 1s ease, filter 1s ease;
}

.window_L {
    transform-origin: 16.28%;
}

.window_R {
    transform-origin: 86.04%;
}

.window_bg {
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,.4));
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,.4));
}

.window_img_cont {
    height: 90%;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    mask-image: url(/images/windows.webp);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: bottom;
    -webkit-mask-image: url(/images/windows.webp);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
}

.window_img_inner {
    height: 56%;
    width: 39vh;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,.4));
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,.4));
}

.discover .window_img_inner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

We zouden deze vrijdag weer een feedback gesprek hebben met Femke, maar doordat ze weer in Nederland is had ze de tijd verkeerd in haar agenda gezet door het tijdverschil. Dus helaas geen feedback gesprek, deze schuift door naar komende maandag, na het maken van een nieuwe afspraak.

Na de feedback van Femke uit week 2 zijn we goed verder gegaan. De stand-up en reviews hebben goed geholpen met ideeën en oplossingen te bedenken. Deze oplossingen hebben we vervolgens uitgevoerd, alleen helaas nog niet kunnen testen. Dat komt maandag.