Hoe een element op hover te schalen

Je kunt ook de vulling naar afbeeldingen wijzigen en zelfs de ene achtergrondafbeelding in de andere veranderen terwijl je zweeft, wat je bezoekers veel kan vermaken. Selecteer een vorm en voeg een afbeelding voor de achtergrond toe. Ga naar het gedeelte Animatie aan van het eigenschappenvenster en klik op Hover. Schakel het zweefeffect in en selecteer de afbeelding als het achtergrondgeluidstype. Kies de Hover-afbeelding. Test.

Voor afbeeldingen en vormen, groepen en rastercellen kunt u de straal bij zweven wijzigen. Elementen worden aantrekkelijk met deze eigenschap, die aanzetten tot actie (Koop nu, Lees meer-knoppen, etc.) en uw ontwerp uniek maken. Schakel in het gedeelte Zweven van het Eigenschappenpaneel de Zweefmodus in. Sleep de Radius-schuifregelaar om de waarde ervan in te stellen On Hover.

Het instellen van de elementkleur bij zweven helpt de aandacht van de bezoekers te vestigen op een element en geeft een indruk en concept van het gewenste idee over de betekenis ervan. U kunt de kleur van het element wijzigen met de muisaanwijzer. Selecteer daarvoor een element en ga in het eigenschappenvenster naar het gedeelte Animatie aan, klik op de koppeling Zweven en vervolgens op het selectievakje Zweven. Wijzig de kleur die moet worden toegepast bij het aanwijzen.

U kunt de eigenschap Shadow op Hover voor teksten en andere elementen wijzigen. Om de schaduw bij zweven in te stellen, voegt of selecteert u een element. Klik vervolgens op de Hover-link van het eigenschappenpaneel, vink het selectievakje Hover aan en wijzig de schaduw die op Hover moet worden toegepast. U kunt beginnen met een van de schaduwvoorinstellingen en deze indien nodig aanpassen.

De Rotation on Hover is het volgende belangrijke en complexe effect. Om een element tijdens de muisaanwijzer te roteren, voegt u een element toe of selecteert u het en gaat u naar het eigenschappenvenster. Ga naar en klik op de koppeling Zweven in het gedeelte Animatie aan en vink vervolgens het selectievakje Zweven aan. Gebruik de schuifregelaar om de rotatiehoek in te stellen of voer de waarde in het invoerveld in. De ondersteunde waarden voor de Rotatiehoek zijn van 0 tot 359.

De Element Border is ook belangrijk om de interactie van Elements te verbeteren en de aandacht van bezoekers te trekken. U kunt de zweefrand wijzigen voor elementen als pictogram, afbeelding, vorm, groep, raster, enz. Schakel in het gedeelte Zweven van het eigenschappenvenster het selectievakje Zweven in. Wijzig de rand die moet worden weergegeven terwijl u over een element zweeft.

U kunt de Elementtransparantie on Hover wijzigen om interactie en aantrekkelijkheid aan het website-ontwerp toe te voegen. Klik in het eigenschappenvenster op de koppeling Hover en vink het selectievakje Hover aan. Stel de transparantie in die op Hover moet worden toegepast. Klik ergens in het blok om het element te deselecteren. Beweeg over het element om de transparantiewijziging te testen.

Als u de zweefanimatie toevoegt aan een vorm met een achtergrond, wilt u misschien de effen vulling wijzigen in iets aantrekkelijks, zoals een verloop. Selecteer daarvoor een vorm en ga naar de Hover-link van het eigenschappenpaneel. Klik op de link Animation On - Hover en vink het selectievakje Hover aan. Selecteer het verlooptype voor het achtergrondgeluid en stel het verloop in.

U kunt hover-animaties beheren door de duur ervan in te stellen. Stel Duur in voor Animatie bij Hover, voeg een Element toe of selecteer een Element en ga naar het Eigenschappenpaneel. Selecteer de Hover-link van het gedeelte Animatie aan en selecteer het selectievakje Zweven. De ondersteunde waarden voor de schuifregelaar lopen van 10 tot 200, en u kunt indien nodig een groter getal in dit veld invoeren.

De hover-animatie-effecten die op moderne websites worden gebruikt, zijn geavanceerder geworden. Een van de effectvoorbeelden is het Element Move on Hover. U kunt de verplaatsing van een element toevoegen aan de muisaanwijzer. Voeg een element toe of selecteer een element en ga naar het eigenschappenvenster. Klik op de Hover-link en vink vervolgens het selectievakje Hover aan. Stel de waarden in voor de eigenschap Move X, Y.