Lek med bakgrundseffekter

I denna utmaning får du testa på att skapae en Parallax Scroll – en teknik där bakgrunden rör sig i långsammare takt än förgrunden vilket skapar en cool effekt med känsla av djup. Tekniken sägs kommit runt 2011 och blev snabbt populär, vi vågar påstå att den är här för att stanna!

Det här behöver du

Du behöver en kodeditor, vi rekommenderar Visual Studio code som är helt gratis att använda och går att ladda ned här.

Få hjälp

Gå med i vår Slack kanal och få hjälp av hela vårt community och hjälp coacher. Gå med här.

1. Så här startar du

Ladda ned kodfilerna här till din email och öppna i din kodeditor. Inuti filerna hittar du vidare instruktioner och kommentarer om hur du går tillväga för att lösa utmaningen, i nästa stycke hittar du dessutom grymma tips och trix!

2. Tips & trix

Läs på om DOM och eventlyssnare inom JavaScript.
För att läsa mer om olika CSS-egenskaper (properties), gå in på antingen W3Schools eller CSS-Tricks och sök!
Förstå hur gradient-bakgrunder fungerar här.
Här kan du läsa om lite andra CSS-egenskaper som har med bakgrunder att göra.
Hitta gratis bildmaterial hos freepik.com , unsplash.com eller pixabay.com.

3. Inspiration

Från sjuksköterska till programmerare med drivkraften att ändra sjukvården

Sofia började som sjuksköterska, men bestämde sig för att byta spår till programmerare. Hon vill fortfarande hjälpa till att ändra sjukvården, men från ett annat håll. Läs om Sofia och hennes karriärsbyte, och om hur alla kan använda sin bakgrund till sin fördel i programmering.

👉 Läs hela intervjun med Sofia här

4. Dela din lösning

Självklart vill vi se din lösning, dela den gärna på vår Instagram under hashtaggen #kodutmaningen. Och du, passa på att utmana din vän – dela kodutmaningen 💪.