Demi's Stage

Om dit te maken heb ik mezelf helemaal verdiept in HTML en CSS. Daar had ik hiervoor nog nooit mee gewerkt en ik snapte er eigenlijk ook helemaal niks van. Met behulp van Chat GPT om hier en daar wat uit te leggen ben ik tot het bovenstaande web resultaat gekomen.

Ik wist vooraf precies wat ik wilde; namelijk een carousel met afbeeldingen die mij insprireren binnen het creatieve vakgebied (maar daarover later meer). Ik had dus een doel en met dat in gedachten ben ik aan de slag gegaan. Maar wat is HTML uberhaupt en hoe werkt het?

Na ontzettend veel geklooi en gepruts had ik 4 stilstaande grijze plaatjes die niet bewogen. Het was iets, maar we waren nog lang niet bij mijn doel. Ik zal jullie het ondraagelijke proces besparen maar uiteindelijk heb ik dus een volledige HTML code geschreven waar Chat GPT ook wel een redelijke bijdragen aan gedaan heeft. Behalve dat Chat ongeloofelijk veel fouten maakte en meestal niet echt begreep wat ik bedoelde was het voor mij wel een manier om makkelijk te leren hoe je HTML moet lezen omdat het eigenlijk best logisch is.

< div class= “carousel-wrapper” >

  < !– Bovenste carousel (van rechts naar links) — >

  < div class=”carousel row-right-to-left” >

    < div class=”carousel-item” >

      < img src=”https://cdn.cosmos.so/8c32e579-0bb2-45c5-b4be-29e8abf84411?format=jpeg” alt=”art cells japan” >

  < /div >

Dit is bijvoorbeeld de HTML code voor de eerste afbeelding in het bovenste carousel. Zoals deze heb ik er dus nog 39 andere gemaakt. Ieder voor zijn eigen afbeelding en positie in het carousel. Je ziet hier dus best wel duidelijk wat alles doet alleen moet je even niet vergeten om tekens als ” = > overal goed voor te zetten want als je dat vergeet is je hele animatie in een keer kapot.

Met deze code heb je dan 40 stiltaande afbeeldingen op 2 rijen maar nu moeten ze nog bewegen en daar komt de echte crux. Het blijkt dat voor animatie’s je op een hele andere plek, (die ontzettend lijkt op 20 andere plekken op wordpress) een hele specifieke code moet invoeren. Het is een beetje alsof je in een doolhof bent, die helemaal vol met blaadjes ligt bent, waar elke gang precies lijkt op alle andere gangen, en waar er in elke individuele gang dan ook nog 10 luiken in de vloer zitten, maar er is precies 1 gang van de 200 waar er ergens onder de bladeren het specifieke miniluikje zit wat je zoekt, en daar moet je dan je CSS code schrijven.

Nou daar heb ik dus vervolgens deze code geschreven:

.carousel-wrapper {
display: flex;
flex-direction: column;
gap: 40px; /* Ruimte tussen de carousels / overflow: hidden; / Verberg alles buiten de container / width: 100%; / Breedte van de zichtbare ruimte */
}

.carousel {
display: flex;
gap: 20px; /* Ruimte tussen afbeeldingen / animation: scroll-right-to-left 70s linear infinite; / Langere animatie (70 seconden) / will-change: transform; / Optimalisatie voor animatie */
}

.carousel-item {
flex: 0 0 auto; /* Houd items op hun oorspronkelijke grootte */
}

.carousel-item img {
width: 210px; /* Breedte van de afbeelding / height: 297px; / Hoogte van de afbeelding / transition: transform 0.3s ease; / Smooth vergroting bij hover */
}

/* Hover-effect / .carousel-item:hover img { transform: scale(1.2); / Vergroot de afbeelding met 20% */
}

/* Keyframes voor buiten het zicht beginnen / @keyframes scroll-right-to-left { 0% { transform: translateX(100%); / Begin buiten het beeld aan de rechterkant / } 100% { transform: translateX(calc(-4200px – 100%)); / Beweeg volledig buiten het beeld aan de linkerkant */
}
}

De afbeeldingen die hierboven (en hieronder) zo gracieus over de pagina bewegen zijn allemaal voorbeelden die mij op een bepaalde manier in mijn werk stimuleren. Zo zie je fotografie stijlen die gebruikmaken van bepaalde gradients en structuren met een analoog randje, maar ook branding elementen, product verpakkingen, design richtlijnen die op een artistieke manier zijn weergegeven en poster ontwerpen met een maatschappelijk tintje.

Wat mij ook inspireert, zijn de meningen van andere artiesten die doorschemeren in hun werk. Zo zie je een poster die zegt “this is not design” die stuit op de werkelijke betekenis van ontwerp en het verschil met kunst daarin. Veel van deze afbeeldingen spreken voor zichzelf en hoef ik daarmee ook niet te beschrijven, voor mij gaat het hierin echt om een bepaald gevoel dat het in mij oproept waar ik vaak zelf ook zin van krijg om weer iets te gaan creëeren. Dat is in essentie wat inspiratie
voor mij betekent.

Vroeger, toen mijn interesse in het creatieve vakgebied in opkomst was, was ik er heilig van overtuigd dat de grootse daad van criminaliteit was om van andere artiesten te “stelen” dus dat deed ik dan ook absoluut nooit. Tijdens mijn stage heb ik geleerd dat het helemaal niet erg is om je door andere te laten inspireren en dat je niet elke keer het wiel opnieuw uit hoeft te vinden in elke opdracht. Ik heb daar ook een boek over gelezen waar ik veel uit heb gehaald namelijk “Steal like an Artist” van Austin Kleon.