Ine van den Hoven
Mijn startniveau is: Rood
De eerste schetsen van mijn ontwerp & mijn persoonlijke uitdaging
Waarom past dit bij Winnie the Pooh? Als eerste had ik het idee om een soort slider te maken waar je meteen alles kan zien van Winnie the pooh. Dit zou ik kunnen doen met allerlei verschillende honing lagen te maken inplaats van rechte lijnen, zodat het meer bij Winnie the Pooh te laten passen.
Waarom past dit bij Winnie the Pooh? Winnie the Pooh is een verhaal dat zich afspeeld in de Hundred Acre Woods. Daarom had ik het idee om een afbeelding van het bos te plaatsen, waar de gebruiker dan om kan inzoomen en dat je op die manier door de jaren heen gaat.
Waarom past dit bij Winnie the Pooh? Winnie the Pooh eet heel veel honing. Daarom kreeg ik het idee om iets met een honingpot te doen die honing schenkt en dat er dan steeds iets gebeurd.
Waarom past dit bij Winnie the Pooh? Aan het begin van veel van de Winnie the Pooh films springt Winnie van letter naar letter en toen had ik het idee om dat na te gaan maken met dan dat hij steeds wat veranderd.
Waarom past dit bij Winnie the Pooh? Het verhaal Winnie the Pooh begon met een verhaaltje in de krant alleen heette Pooh toen nog geen Winnie the Pooh maar Edward de eerste naam van de teddybeer. Toen de rechten werden gekocht door Slesinger, werd er allerlei verschillende soorten speelgoed gemaakt waaronder muziek. Daarna kreeg disney rechten en werden er films/shortstories gemaakt van het verhaal.
Waarom past dit bij Winnie the Pooh? Winnie the Pooh houd erg van honing en probeert dit dan ook overal te krijgen. Zo gaat hij bijvoorbeeld een boom in met een bijennest, om honing te kunnen eten of hij gaat bij zijn dieren vrienden langs om daar honing aangeboden te krijgen.
Gisteravond heb ik nog een van de Winnie the Pooh films gekeken. Hierin kwam veel terug van de boeken, daarnaast word het boek ook echt gebruikt en bladzijdes omgeslagen. Daardoor kwam ik op het idee om misschien iets met een soort boek te doen.
Aan deze technieken/punten wil ik werken:
- Css animaties/transitions
- Semantisch correcte HTML
- Het schrijven van nette CSS
- Uitdaging zoeken, door bijvoorbeeld een boek met CSS te maken en een SVG te animeren
Schetsen van gekozen ontwerp
Mijn idee is om mijn tijdlijn te beginnen met een soort beginpagina, waar druipende honing, de titel en het boek. Wanneer je op het boek klikt opent het en zie je de kaart van het Hundred Acre Woods. Op de kaart kun je op verschillende plekken klikken en ga je naar de verschillende jaren waarin Winnie the Pooh is veranderd. Dit gebeurd door in te zoomen op de kaart en dan komt er een nieuwe afbeelding in beeld van uit die tijd met informatie over Winnie the Pooh in die tijd.
Het idee is uiteindelijk een beetje aangepast door van het boek een pop-up boek te maken. Er kan op verschillende plekken op de kaart geklikt worden en dan popt er een Winnie the Pooh uit de tijdlijn op met wat informatie.
Mijn bevindingen + wijzigingen
Het eerste idee dat ik had geschets van Winnie the Pooh, past niet goed bij de evolutie van Winnie the Pooh.
Dit idee ga ik daarom niet gebruiken, omdat het niet goed past bij Winnie the Pooh en ik het ook een beetje te simple vindt. Daarom ga ik door met de andere ideeën.
Het tweede idee is het beste idee en daar kan ik andere ideeën ook een beetje in verwerken. Ik kreeg de tip om de kaart te verwerken in een boek, omdat het hele verhaal van Winnie the Pooh daarmee is begonnen.
Ik heb de kaart van de Hundred Acre Woods in het book verwerkt door deze over twee pagina's te verdelen. Hier van heb ik geleerd dat het handig is om gebruik te maken van de aspect-ratio om het zo makkelijker te maken om de afbeeldingen te laten mee schalen. Omdat de afbeelding in twee labels staat moet de ene kant de ene helft van de afbeelding laten zien en het andere label de andere kant.
Ik moet nog meer nadenken over het toevoegen van eastereggs.
Wanneer je over de rechterhoek onderin van de map hovert komt er een bijl voorbij, wat onderdeel is van de nieuwe horror film die in 2023 uitkomt. Daarnaast is de poster van de horror film op de achterkant ook een soort easteregg.
Honing idee toevoegen aan idee 2.
Ik heb het idee om iets met honing te doen toegevoegd aan mijn idee door aan de bovenkant van de pagina een soort honing druip effect te creeëren. Dit was een hele opgave om voor elkaar te krijgen. Eerst heb ik het geprobeerd met maar dit werkte helaas niet. Daarna heb ik met de docent geprobeerd om met GreenSock Morph SVG de animatie werkend te krijgen. Dit is uiteindelijk na veel proberen en een goede SVG te maken gelukt.
Leuke animaties toevoegen aan het boek en de rest van de website. Bijvoorbeeld bijtjes die rond vliegen en honing dat animeerd.
Wanneer je het boek opent animeert deze naar het midden en wanneer je op de kaart op de buttons klikt animeren deze ook naar boven.
Mijn bevindingen + wijzigingen
Het is nu nog niet duidelijk dat je op het boek kan klikken.
Dit zou ik kunnen oplossen door een hover state te maken dat de pagina al een beetje roteert of er echt click me op te zetten. Dit is helaas niet gelukt omdat de pagina dan achter de andere pagina's verdwijnt, dan zou het opgelost moeten kunnen worden door de andere pagina's ook mee te laten roteren maar dan was het effect weg. Daarom heb ik het uiteindelijk opgelost door op de kaft click me te zetten naast dat de muis een handje wordt.
Op de kaart duidelijker maken waar je kunt klikken, nu is dat alleen duidelijk door dat er een handje komt.
Dit zou ik aan kunnen passen door om het gebied een border te plaatsen. Dit heb ik gedaan doormiddel van een achtergrond afbeelding op de button te plaatsen. Zodat het er hetzelfde uit komt te zien als de randen om de kaart.
Nu kun je alle popups van Winnie the Pooh tegelijk openen waardoor ze over elkaar vallen.
Oplossen door ervoor te zorgen dat wanneer je er een opent de andere sluiten. Dit heb ik opgelost met JavaScript door remove class toe te voegen.
Responsive gaat hij nog niet helemaal goed.
Goed kijken waar het niet goed gaat en dit met media queries oplossen. Dit heb ik gedaan met de volgende code.
Responsive gaat hij nog niet helemaal goed.
Goed kijken waar het niet goed gaat en dit met media queries oplossen. Dit heb ik gedaan met de volgende code.
Mijn bevindingen + wijzigingen
Shadow toevoegen aan het boek, zodat het meer lijkt alsof het boek ligt.
Doormiddel van het toevoegen van een box-shadow op de class map is het gelukt om een shadow te laten zien wanneer het boek is geopend.
Responsive gaat vanaf 1536px niet helemaal goed. Dan valt Winnie the Pooh Disney jaartal buiten het scherm.
Door het toevoegen van de volgende code gaat het goed en valt de tekst niet meer van het scherm.
@media only screen and (min-width: 1536px) {
main section label ol li div p {
font-size: 1em;
}
}
Niet duidelijk waar je moet beginnen met de tijdlijn.
Dit ga ik niet aanpassen omdat het de bedoeling is dat het van onder naar boven en van boven naar onder gaat. Hiervoor heb ik gekozen, omdat de gebruiker zo willekeurig door de tijdlijn kan gaan.
Shadow achter afbeelding popup. Zodat het duidelijker word.
Ik heb geprobeerd om dit toe te voegen maar is helaas niet gelukt. Wanneer ik een shadow wilde toevoegen ging er steeds wat kapot.
Honing rood maken wanneer het boekje dicht is, zodat het beter gaat passen bij het horror element.
Dit heb ik toegevoegd door middel van een nieuwe gradient aan de svg toe te voegen.
Mijn eindresultaat & persoonlijke ontwikkeling
Wat ik heb geleerd gedurende dit project is het werken met CSS perspective. Dit vond ik erg lastig, maar met hulp heb ik er wel veel van geleerd en is het ook gelukt om het boek zo te krijgen dat het lijkt alsof het ligt.
Wat goed ging het het honing veranderen in een bloedkleur, wanneer de gebruiker naar de achterkant van het boek gaat.
Wat ook goed ging was het ervoor zorgen dat de popups overeind komen met een animatie. Het was even uitvogelen waar de transitie precies moest, maar het is gelukt.
Wat erg lastig was om te maken was de honing animatie. Hier waren verschillende mogelijkheden voor, maar met animate werkte het helaas niet. Daarom hebben we gebruikt gemaakt van een plugin genaamd MorphSVG van GreenSock.
Het is niet gelukt om de pagina geheel responsive te maken, omdat dit erg lastig is met een boek dat open klapt. Daarom is de pagina alleen te gebruiken grote tabelets tot een scherm van 2048px.
Wat ik lastig vond is perspective en javascript. Op sommige momenten raak ik zo in de war dat ik even niet meer weet hoe het nou allemaal moet. Maar met uitleg en iemand die het voordoet ga ik het steeds meer begrijpen en leer ik ook steeds meer.
continu bijhouden terwijl je werkt
- https://stackoverflow.com/questions/107701/how-can-i-remove-ds-store-files-from-a-git-repository
- https://codepen.io/shooft/pen/ExNLMyr
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
- https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility
- https://greensock.com/forums/topic/18708-reverse-a-morph-and-then-fluidly-repeat-from-the-start/
- https://greensock.com/morphsvg/
- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
- https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
- https://www.w3schools.com/cssref/tryit.php?filename=trycss3_perspective1
- https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
- https://gomakethings.com/how-to-get-the-next-and-previous-siblings-of-an-element-with-vanilla-js/
- https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
- https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke
- https://stackoverflow.com/questions/14051351/svg-gradient-using-css
- https://www.cssmatic.com/box-shadow
- https://stackoverflow.com/questions/9419263/how-to-play-audio
- https://stackoverflow.com/questions/37674223/domexception-failed-to-load-because-no-supported-source-was-found
- https://www.disneyclips.com/images2/images/0156.gif
- https://www.disneyclips.com/images/images/winnie-the-pooh-honey2.png
- https://www.disneyclips.com/images2/images/winnie-honey5.png
- https://i.etsystatic.com/17676578/r/il/54b33a/3289301498/il_fullxfull.3289301498_p1j3.jpg
- https://media.pathe.nl/nocropthumb/620x955/gfx_content//api/filmdepot/v1/movie/download/34656/34656_154003_ps_sd-high.jpg
- https://s1.dmcdn.net/v/O2zeE1RPFPBSBI6Hj/x1080
- https://lh3.googleusercontent.com/ci/AC_FhM_AsQAHoFMFw-1sQTUjjIFRPYMWWG8JNdWH_2l6t1TjFYdmDlURLXQa0GAkc28kiT9lElmfAkmu=s1200
- https://images0.persgroep.net/rcs/VHDMWyYRzVmshLwVi_Hf7CGM5Rg/diocontent/68979126/_fitwidth/694/?appId=21791a8992982cd8da851550a453bd7f&quality=0.8
- https://cdn.britannica.com/53/166453-050-BCA1C96E/Winnie-the-Pooh-illustration-Piglet-EH-Shepard.jpg
- https://upload.wikimedia.org/wikipedia/en/thumb/3/3e/Pooh_Shepard1928.jpg/1200px-Pooh_Shepard1928.jpg
- https://images.mubicdn.net/images/film/30795/cache-21653-1538711069/image-w1280.jpg
- https://thewallpapers.org/zoom/37749/winnie-the-pooh-127.jpg
