Vad du bygger
Du skapar en webbsida med två levande element: en knapp som mjukt skiftar färg när man pekar på den, och en bild som glider in naturligt när besökaren scrollar. Resultatet är en professionell hemsida där effekterna känns diskreta och självklara.
Innan du börjar
- Ett kostnadsfritt konto på Framer.
- Ett påbörjat projekt där du har lagt till en bild och en knapp som du vill ge liv.
- Inga förkunskaper om kod – vi jobbar helt visuellt.
Steg för steg
-
Välj din knapp – Klicka på den knapp på din arbetsyta i Framer som du vill ska reagera när besökaren håller muspekaren över den.
-
Lägg till en hover-effekt – Gå till den högra menypanelen och leta upp sektionen som heter Effects. Klicka på plusikonen bredvid rubriken och välj Hover i listan som dyker upp.
-
Justera mjukheten – Klicka på rutan för Transition under dina nya hover-inställningar i högerpanelen. Ändra kurvan (Curve) till Spring. Dra ner farten (Speed) och öka dämpningen (Damping) så att färgskiftet flyter fram istället för att bara blinka till.
-
Markera bilden för scroll – Klicka nu på den bild på din sida som du vill ska glida in när besökaren scrollar neråt på sajten.
-
Koppla på en scroll-effekt – Klicka på plusikonen bredvid Effects i högra panelen igen. Denna gång väljer du Scroll Animation och ser till att inställningen är satt till In View (så att rörelsen startar när bilden faktiskt dyker upp på skärmen).
-
Konfigurera rörelsen – Under inställningarna för din scroll-animation, titta under rubriken From (varifrån effekten startar). Sätt Y-axeln till 50px och sänk opaciteten (Opacity) till 0. Det gör att bilden mjukt stiger uppåt nerifrån samtidigt som den tonas in när man scrollar.
-
Testa ditt verk – Klicka på den lilla spela-knappen (Preview) i det övre högra hörnet för att se hur dina animationer reagerar i webbläsaren.
Byggloftets tips
- Bygges favoritregel: Håll dig till samma typ av rörelse på hela din hemsida. Om bilder glider uppåt på en sida, låt dem göra det på nästa sida också. Det skapar ett lugnt helhetsintryck.
- Mindre är nästan alltid mer. Om du känner dig osäker på en rörelse, halvera sträckan (antal pixlar den flyttar sig) och gör rörelsen lite långsammare. Då upplevs den ofta som mer premium.
- Tänk på mobilen. Scroll-effekter kan ibland hacka på äldre telefoner. Du kan enkelt stänga av effekter för mindre skärmar genom att klicka på de tre prickarna bredvid din effekt i högerpanelen och bocka ur mobil-ikonen.
Vanliga fel
- "Effekten syns inte i förhandsgranskningen": Kontrollera att ditt element inte ligger dolt under ett annat lager (Layer). Om ett annat element ligger "framför" din knapp kan muspekaren inte registrera att du pekar på den.
- "Bilden glider in alldeles för sent": Detta beror ofta på att utlösaren är för snäv. Gå till din scroll-effekt och justera värdet för Trigger så att animationen startar lite tidigare, till exempel när bildens topp når 20% från botten av skärmen.
Du är klar när…
Du kan hålla muspekaren över din knapp och se den skifta färg utan ryckighet, samtidigt som din bild tonas in och glider på plats med en mjuk rörelse när du scrollar ner på sidan.
