Hoe maak ik een animatie als Alpha Tango?

En hoe kan ik het animeren in plaats van handmatig scrollen?

Er gaat een witte tekst over een oranje image heen, waardoor deze minder leesbaar wordt. Misschien kan je de tekst groter maker of een shadow eroverheen gooien. Wellicht een box met blur.

Voorbeeld van jouw pagina:

• Carousel animation that transitions like a moving wheel
• Animated header
• Glassmorphism, monochromatic boxes around the carousels
• Light and Dark mode for the website
• Paralax scroll on header
• slowly loaded in text when scrolling

Op mobiel is het font te groot waardoor het heel veel ruimte in beslag neemt voor andere content.

• Als je een aantrekkelijke scroll-animatie wilt maken, kun je Swiperjs gebruiken.

Je hebt een cool design. Ook erg leuk dat je al een werkende interactie er in hebt! Heel nice, lekker bezig :)

Je hebt een comment in je html gezet wat zichtbaar is op jouw website. Ik zou deze weghalen?

https://github.com/KaanKalmi/the-startup-responsive-interactieve-website/blob/bef3d2e96f3ef955b7c696b4410e7006664bfad7/index.html#L54

Probeer de tekst wat korter te maken zodat meer mensen het initiatief willen nemen om het te lezen.

Het is een idee om 2 carrousels te gebruiken i.p.v 1 carrousel op de pagina. Zo kan je meer informatie kwijt en zorgt het ervoor dat het er minder leeg uitziet.

• Wat voor content moet er allemaal in?

Tot nu toe weet ik dat er de volgende onderwerpen behandelt moet worden in de homepage: wat is caelor, support, contact, applicaties

• Hoe kan ik ervoor zorgen dat de site een echte attention grabber is?

Meer spelen met kleuren en wit ruimte, maak de site levendig en speels

• Hoe zorg ik ervoor dat je de overige apps nog kan zien in de background, maar dan kleiner en met vervaging?

Hiervoor kan ik kijken op youtube, heb op dit moment een slideshow inplaats van een echte carousel, Tobias en Krijn gaven me al een beter idee met wat ik kan gaan doen.

Het contrast tussen dit zwart en blauw is erg laag. Kijk of je dit kan verhogen.

Probeer consistent te blijven in css met de waarde die je gebruikt. Ik zie nog best veel verschillende waardes 'px, em. en ch'

• Je kunt Pika gebruiken om je contrast te controleren. Zoals je kunt zien, is het contrast momenteel niet optimaal. Op je pagina passen de 'Breath of Fire'-kleur en de 'Fresh Blue'-kleur niet goed bij de roze achtergrond.

• Voor de line-height op mobiele apparaten kun je vaak een iets grotere waarde overwegen dan op desktop, aangezien schermen kleiner zijn en de tekst beter leesbaar moet zijn. De bedoeling is om een line-height te kiezen tussen 1,4 en 1,6 keer de lettergrootte op mobiele apparaten.

Voor sommige img heb je best lange namen met spaties erin. Probeer overzichtelijke en korte namen te gebruiken zonder spaties.

https://github.com/KaanKalmi/the-startup-responsive-interactieve-website/blob/946462c1c56bed73e6d093329176aaf45186f19c/index.html#L27

Zorg dat je bij alle img's een alt heb, je hebt het nu bij sommige wel en sommige niet

Gebruik de css-functie font-display om ervoor te zorgen dat tekst zichtbaar is voor gebruikers terwijl weblettertypen worden geladen.

Het kan best chaotisch overkomen als je er naar kijkt. Het zijn notities, maar maak er geen boekwerk van. Ik zou af en toe een wat langere comment toevoegen, ipv achter elke regel.

JavaScript code

2nd carousel, space smaller between arrows, fix another animation the one of the carousel now looks mid add more details!

https://github.com/KaanKalmi/the-startup-responsive-interactieve-website/blob/946462c1c56bed73e6d093329176aaf45186f19c/index.html#L17

Hier heb je de classname "pink" gebruikt, dat zegt niet zoveel over wat het is.

Je html structuur is overzichtelijk en goed gestructueerd waardoor het makkelijk te begrijpen is. < Header>

https://github.com/KaanKalmi/the-startup-responsive-interactieve-website/blob/3784f959985c37cfac52fe870358faecff00a251/index.html#L33

Het is niet handig om een space te gebruiken tuseen de text.
Bron:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

https://github.com/KaanKalmi/the-startup-responsive-interactieve-website/blob/3784f959985c37cfac52fe870358faecff00a251/index.html#L14-L20

Ik heb gemerkt dat je slideup en slideup2 gebruikt voor classes names, je kan een andere naming convention gebruiken. Dit zorgt ervoor dat uw code leesbaar en onderhoudbaar blijft.

Bron:

https://dev.to/stakedesigner/best-practices-for-naming-classes-in-html-and-css-files-2kb5

Nice dat je al zo veel content heb in de pagina en leuk dat je gradients hebt gebruikt.

Om meer diepte te creëren in jouw design, kan je wellicht je text zetten in ''feature boxes''.
Dit is een voorbeeld:

Probeer iets meer diepte en contrast in jouw pagina te maken. Het is nu onder aan de pagina met alle tekst, best wel leeg en vlak. Leuk idee dat het icoontjes bevat, maar probeer iets uit met wat boxshadows en boxes en geef het iets meer kleur contrast.