Skip to content
SanHont edited this page Sep 17, 2022 · 5 revisions

Welkom op de wiki van onze squad page. Hier kunt u alle progressie vinden van onze squad page.

Begin schetsen: https://github.com/IsandroC/your-tribe-squad-page/wiki/Begin-schetsen

We begonnen met het idee om een soort mystery boxes op de site maken, waarbij je de box open zou gaan als je er op klikte. Toen gingen we overleggen met elkaar en kwamen we op een andere design uit waarbij we gebruik gingen maken van een Mario thema.

De Lucky Blocks van Mario wouden we alsnog iets extra's geven dat het wel een soort "willekeurig" effect zou hebben. Dit hebben we gedaan door het zo te maken dat als je over de Lucky Blocks hovert er een gif begint af te spelen. Toen hadden we een website gemaakt, maar we kwamen al snel tot de conclusie dat we het design heel anders wouden. Toen kwamen we met het idee er echt een volledig Mario gerelateerde website van te maken. En maakte we deze 2 schetsen.

Afbeelding van WhatsApp op 2022-09-15 om 12 56 52

Afbeelding van WhatsApp op 2022-09-15 om 12 36 51

Waarbij je op de eerste pagina gaat kiezen naar welke "team" pagina je wilt gaan, dit doe je door op de buis/Toad te klikken. Dan kom je vervolgens op de tweede pagina (de team pagina) hier kun je de op de Lucky Blocks klikken en dan ga je vervolgens naar de visite kaartjes toe van de team leden. En met de pijltjes op de buizen kan je wisselen van team pagina. Of als je op het huis icoontje klikt kom je weer terug op de eerste pagina waar je kunt kiezen tussen de verschillende teams.

We wouden graag onze website dynamisch maken en dat wouden we doen door animaties te gebruiken, zo kwamen we op het idee om een Mario toe te voegen die op de achtergrond heen en weer loopt. We gingen het samen proberen te maken met een klasgenoot van een ander groepje. We hadden allemaal wel een idee hoe het zou moeten maar wisten nog niet hoe we het zouden moeten uitvoeren, toen zijn we gaan googelen en van alles gaan proberen en is het uit eindelijk gelukt.

We hebben de Mario laten bewegen door gebruik te maken van keyframes in combinatie met een gif. Op deze manier beweegt de afbeelding die we hebben gekozen en bewegen de benen ook nog eens tegelijkertijd doordat het een gif is. Elke keer als die aan de zijkant van het scherm is gekomen dan draait de Mario om en loopt die weer naar de overkant en zo gaat dat oneindig door.