Mouse-over met verticale verplaatsing
Door een mouse-over effect toe te passen op een button is de kans groter dat een gebruiker op de button klikt. Een mouse-over effect maakt duidelijk dat op de button geklikt kan worden. Vaak worden button mouse-over effecten gemaakt door de achtergrondkleur te wijzigen voor de mouse-over status.
In De SMART Webbuilder kun je prachtige mouse-over effecten maken zonder enige technische kennis. Probeer eens een mouse-over effect door gebruik te maken van een verticale verplaatsing. Onderstaand stappenplan legt uit hoe dit werkt.
Stappenplan
- Sleep een blok met button in het scherm
- Ga met de cursor over het blok en klik op het lipje dat rechts van het blok verschijnt.
- Klik vervolgens op de button waar je het mouse-over effect voor wilt instellen
- De functiebalk voor de button verschijnt rechts.
- Klik op tabblad mouse-over
- Scroll vervolgens helemaal naar beneden tot je bij de functie verticale verplaatsing komt. Stel hier 10 pixels in. Dit betekent dat bij mouse-over de button 10 pixels naar beneden verschuift.
- Preview de pagina en bekijk het mouse-over effect. Het effect is nog weinig subtiel en verspringt ineens zonder overgang. Volg de stappen hieronder om het effect te voorzien van een subtiele overgang.
- Selecteer de button nogmaals (stap 2 en 3) en klik in de functiebalk rechts op het plus-icoon achter overgangen
- Er verschijnt een pop-in waarmee je een nieuwe overgang kunt instellen.
- Selecteer bij eigenschap het laatste item schaal/rotatie/verplaatsing.
- Geef bij duur de tijd die de overgang moet duren op in milliseconden. Bijvoorbeeld: 1000 milliseconden
- Klik vervolgens op opslaan
- Jouw mouse-over effect is nu gereed en voorzien van een subtiele overgang. Preview de pagina om het resultaat te bekijken.
