Maillard is een eclectisch deelrestaurant, gevestigd in Mechelen, België. Omarm de kracht van het verenigen van mensen, deel de verhalen, geniet van de smaken, geniet van de wijnen. Niet meer niet minder.
Onze aanpak.
Branding & Design
De branding van Maillard Restaurant werd verzorgd door onze collega’s van Kantoor KOLOS in Mechelen. Nadat branding en webdesign waren goedgekeurd, werd het aan ons overgedragen en konden we beginnen met de ontwikkelingsfase voor deze website.
Development
De website is gemaakt op WordPress en zorgt voor een eenvoudige en snelle manier om de website te bewerken. Als prijzen of menu-items veranderen, moet de klant deze op de website kunnen bijwerken.
Om de ontwerpen van brandingbureau KOLOS feilloos op te bouwen, hebben we vanuit het niets een nieuw thema op maat gemaakt.
Deployment
De klant heeft al zijn eigen hosting voor deze website geregistreerd en wij hebben deze in zijn omgeving geïmplementeerd. Daarnaast hebben we ervoor gezorgd dat de e-mailadressen correct waren ingesteld en dat de website vanuit hun domein mocht e-mailen.
Achter de schermen.
Hoewel de website er uitziet als een ‘eenvoudige’ onepager, laten we eens kijken naar de animatie-elementen.
Smooth Scroll
Voor een meer meeslepende scrollervaring op de website hebben we Lenis Scroll gebruikt voor soepel scrollen. Deze npm-bibliotheek maakt gebruik van het lerp-effect tussen twee verschillende scrollposities om ‘soepel’ naar de nieuwe positie te scrollen.
Menu Image Hovers
Aan de rechterkant van de website ziet u een primaire afbeelding die u helemaal tot onderaan de website volgt. Wanneer u naar de menu-items van het restaurant scrollt, zorg er dan voor dat u de tijd neemt om over een paar elementen te bewegen.
Niet allemaal, maar sommige menu-items laten u een voorbeeld van het gerecht zien als u erover zweeft.
Scroll-in Animatie
Met de smoothscroll-functie is het ook prettig om door uw elementen te navigeren via scrollen. De elementen op de Mailard-website worden in het begin niet weergegeven, maar pas als je langs dat gedeelte scrolt, kun je zien dat de inhoud wordt geanimeerd.
Wanneer u de onderkant van de pagina bereikt, staat er een mooie selectiekader die u zal begroeten.
