In de Tutorial Level weken mogen wij zelf een onderwerp uitzoeken wat wij willen gaan leren. Erg leuk en het geeft je de mogelijkheid je zelfstandigheid ook aan te scherpen mocht dit nodig zijn. Het is uiteraard wel belangrijk om voor de juiste hoeveelheid motivatie te zorgen om bezig te gaan.
Hetgeen wat ik erg mooi vind om te zien is hoe bijvoorbeeld op de website van Apple hetgeen wat op de website staat beweegt als je scrolt. Dit fenomeen valt onder Parallax scrolling / Parallax-video of scrolling animations. Dit heb ik dan ook opgepakt om hier een begin van te leren tijdens de Tutorial Level week.
Om te beginnen wilde ik de betekenis van deze termen even duidelijk hebben om zo een wat betere basis te vormen voor het zoeken naar de Tutorials.
Parallax: Beelverschuiving waarbij het gaat om de verschillende bewegingen van voorwerpen en of de achtergrond. Het is dus een optisch verschijnsel dat dus onder andere bij websites toegepast wordt.
Ik ben begonnen met het zoeken naar voorbeelden. Oftewel op zoek gaan naar van die leuke bewegende animaties in websites. Zo kwam ik uit bij een aantal websites waaronder https://dogstudio.co/ . Echt goede shit to be honest. Ik wist sowieso dat ik dat soort next level shit niet kon maken in een week maar toch leuk om te zien.
Vanuit een aantal video's heb ik vernomen dat er een aantal categorieën binnen deze animaties zijn. Een aantal van deze heb ik even genoteerd (DevTips):
- Fixed background + Scrolling Body
- Slow Elements
- Landing Elements (TopTip -> WowJS)
- Multiple Directional Elements
- Mouse Movement
- Tumbnailing
- Folow the Rabbit
- Zooming Elements (TopTip -> NY Times Article)
Uiteindelijk ben ik verder gegaan met het klaar zetten van een basis in HTML en CSS. Eventjes weer beginnen met de basis. Vanuit hier ga ik beginnen met wat Parallax animaties.
Om te beginnen met de Parallax animaties ben ik gaan zoeken naar een foto waarbij ik de voorgrond kon bewegen ten opzichte van de achtergrond (Fixed Background + Scrolling Body). Zo heb ik vanuit de eerste foto hier links de hand gehaald (Zie foto 3) en de tweede foto erbij gepakt als achtergrond.
Met deze foto's ga ik proberen door middel van de gevonden tutorials over dit type Parallax Animations een animatie te maken. Hierbij zijn er meerdere mogelijkheden maar ik probeer dit eerst bij HTML en CSS talen te houden om het voor mijzelf niet te moeilijk te maken.
Door het volgen van de stappen in onder andere de tutorial "Parallax Scrolling Effect with Fixed Background Using HTML & CSS" van W3newbie heb ik de animatie hier op rechts kunnen realiseren. Deze heb ik uiteindelijk nog verder uit kunnen werken naar de webpagina zoals die hieronder verwerkt staat.
Bij dit project heb ik ook gelijk mijn HTML en CSS skillz kunnen opfrissen en heb ik daarnaast door het uitwerken een aantal mogelijkheden binnen HTML en CSS geleerd die ik nog niet wist.
Dan nog even kort over deze week. Ik vond het wel erg leuk en uitdagend om zo een week in mijn eentje wat te gaan leren.
Daarnaast heb ik weer in de gaten hoe de koffieautomaat op school werkt dus dat is een bonus. Woensdagochtend heb ik op school gewerkt aan mijn project. Het is toch wel apart zo tijdens corona. Er staat een gozer van de handhaving buiten op zijn fiets te leunen, die, toen ik weg ging, 2 uur nadat ik binnen kwam, volgens mij nog exact op dezelfde manier op zijn fiets stond te leunen. Daarnaast allemaal pijlen op de
grond. Ik snap dat het nodig is maar vind het soms alsnog raar dat dit op de grond moet. Sommige mensen kijken niet altijd naar beneden als ze lopen.
Daarnaast nog eens die ongemakkelijke situaties als je ergens langs wil op hetzelfde moment als dat er iemand anders langs gaat. Ik hoop hier sowieso iets voor te kunnen vinden bij die TGIF opdracht over de Eerste Hulp Bij Ongemakkelijkheden. Daarover gesproken, morgen TGIF presentaties.
PS. die GIF afbeeldingen zijn niet allebeide even lang, Genieten met een hoofdletter G!