Jeg fik for nylig til opgave at oprette en mikroside for en af vores kunder på arbejdet. Denne særlige kunde ønskede et lille websted, der ville fremvise deres nye linje af chips og dip. Da det var min første kundeleverance hos AMP, var jeg ret spændt på at komme i gang og vise mit team, at jeg er mere end blot et smukt ansigt.
Så jeg mødes med min projektleder, og vi gennemgår designs og diskuterer den funktionalitet, som siden ville have bag de forskellige sektioner. Det var ret ligetil, en helt, et udvalg af produkter, en butiksfinder, en produktkarrusel og en sidefod. Det eneste er, at helten vil have en parallakse-effekt, hvor nogle chips ville poppe ud og bevæge sig op på siden, mens brugeren ruller ned. Selvom dette skulle kræve lidt arbejde, var en stor bonus for mig, at de fleste af de andre dele af webstedet allerede var bygget til mig takket være min kollega Ethan, som er en professionel i at skabe disse mikrosider for vores kunder . Så jeg trækker hans github-lager ned og opsætter mit lokale, vi bruger Zurbs Foundation-ramme til denne klient. Jeg begynder at sammensætte brikkerne og bygge siden ud efter designerens komp. Efter ca. 3 - 4 timer afslutter jeg, hvad jeg betragter som bunden af siden. Jeg har alle sektionerne på plads, og alle komponenterne fungerer som forventet. Det var på tide at komme til parallakseeffekten.
9 linjer JavaScript
Intet bullshit. Efter timers leg med forskellige parallaksebiblioteker for at prøve at skabe den effekt, jeg ønskede, glider min chef henkastet hen i stolen og siger "Det ser sjovt ud. Send det her til mig, lad mig prøve det". Så det gør jeg. 15 minutter senere sender han mig en JavaScript-fil og fortæller mig, at det hele er klar. Jeg kopierer hans kode ind i min JavaScript-fil, kompilerer den og åbner den i FireFox for at teste den. Det virkede. Det fungerede smukt. Jeg var så forbløffet, at jeg blev ved med at rulle frem og tilbage, så chipsene bevægede sig i, hvad der føltes som timer. Se koden nedenfor.
Ret cool. Og ondsindet også. Med denne version har du brug for jQuery for at den kan køre, men det er muligt at skabe det samme resultat i vanilla js.