Hoe verander ik de kleur bij zweven voor een website-element

Schalen kan eruitzien als de meest natuurlijke reactie op uw cursor. Daarom kan het erg populair zijn. De Scale On Hover voeg je eenvoudig toe aan je website. Voeg daarvoor een Element toe of selecteer een Element en ga dan naar het Eigenschappenpaneel. Klik op de link Zweven in het gedeelte Animatie aan en vink het selectievakje Zweven aan. Scrol omlaag naar de eigenschappen Schalen, Roteren en Verplaatsen. De werkelijke grootte is gelijk aan 100.

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.

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.

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 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.

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.

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.

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.

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.

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.