Hoe de animatie-effecten op websites te gebruiken

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.

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.

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.

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.

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.

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

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.

Uitzoomen is het gekoppelde zoomeffect dat ook populair is voor afbeeldingsachtergronden of afbeeldingengalerijen. Terwijl u over een afbeelding zweeft, kunt u deze als alternatief gebruiken om uw webpagina's interessant te maken. Om het uitzoomeffect in te schakelen, voegt u een groep of een afbeeldingengalerij toe of selecteert u deze. Ga naar het eigenschappenvenster om deze eigenschap in te stellen.

Het inzoomeffect is het meest elementaire animatie-effect voor afbeeldingsachtergronden of afbeeldingengalerijen. Het is de meest verwachte reactie die kan optreden als u over een afbeelding zweeft. Om het inzoomeffect in te schakelen, voegt of selecteert u een afbeeldingengalerij of een groep en wijzigt u de zweefeigenschappen in het eigenschappenvenster.

De grootte van de achtergrond wijzigen maakt het duidelijk wanneer u de muisaanwijzer op de achtergrond van de groepsafbeelding of de galerijafbeeldingen houdt. Om het effect Formaat wijzigen te gebruiken, voegt u een afbeeldingengalerij of een groep toe of selecteert u deze. Ga naar het eigenschappenvenster, klik op de link Image Hover. Selecteer de Resize Preset en wijzig deze indien nodig.

Het dia-animatie-effect zorgt voor interessante interactie terwijl u over galerijafbeeldingen of afbeeldingsachtergrond van een groep zweeft. Om het dia-animatie-effect in te schakelen, voegt u een groep of afbeeldingengalerij toe of selecteert u deze. Ga naar het eigenschappenpaneel en selecteer de diavoorinstelling in de eigenschappen van de afbeelding Achtergrond zweven.

Terwijl je over een groep zweeft, kun je een element laten groeien vanaf het centrale denkbare punt. U kunt de startpositie vanaf het punt instellen voor een element op Group Hover. Klik op de koppeling Startpositie van de sectie Animatie op in het eigenschappenvenster. Selecteer een van de From Point-presets en pas desgewenst de eigenschappen ervan aan.

Terwijl u over een groep zweeft, wilt u misschien de startpositie voor de animatie wijzigen. U kunt bijvoorbeeld een element in groep of rastercel vanaf de onderkant animeren, wat erg populair is. Om de startpositie van het element bij groepshover te wijzigen, klikt u op de link Startpositie en de voorinstelling Van onder of stelt u de eigenschappen handmatig in.

Door over een groep te zweven, kan een element groeien met de extra effecten. U kunt de Fade and Grow Preset gebruiken om een element te laten groeien met gelijktijdig fading. U kunt de voorinstelling voor de startpositie voor vervagen en groeien kiezen in het gedeelte Animatie op startpositie van het eigenschappenvenster.

Draaien en groeien terwijl u over een groep zweeft, is een interessant gedrag, dat steeds populairder is geworden in site-animaties. Je kunt de Turn and Grow voor een Element specificeren terwijl je een Groep hebt waarin het is geplaatst. U kunt het Turn and Grow-effect voor de startpositie kiezen in het gedeelte Startpositie van het eigenschappenvenster.

U kunt de aandacht van uw websitebezoeker trekken door het Wobble-effect dat wordt gebruikt voor de Hover Slider. Om het effect te gebruiken, gaat u naar de Hover Slider-link van het eigenschappenpaneel en selecteert u de Wobble-voorinstelling. Bovendien kunt u Transparantie, Duur en Richting verfijnen.

De Hover Slider toont meestal de verschillende Elementen op Hover. U kunt het Slide Over-effect toevoegen als u naar het eigenschappenvenster gaat en de eigenschappen van de zweefschuifregelaar voor de geselecteerde groep bewerkt. Je voegt het Hover Slider Element toe vanuit het Add Menu. U kunt indien nodig ook de richting en duur wijzigen.

Elke animatiebibliotheek begint met Fade. De Hover Slider heeft ook de Fade Preset, die je kunt toevoegen voor de overgang van de standaard slide van de Hover naar de Hover Slider. U kunt de Fade-eigenschappen wijzigen in het eigenschappenvenster, klik op de koppeling Hover Slide. U kunt de Hover-schuifregelaar ook als een element toevoegen vanuit het menu Toevoegen.

Het Slide-effect voor de Hover Slider toont de natuurlijke diabeweging die live interactie toevoegt aan uw ontwerp. Pas het Slide Effect voor het Hover Slider Element toe in de Hover Slider eigenschappen. Test door de Hover Slider in de Editor te selecteren en over het Element te bewegen.

Flippen heeft ook een interessante impact op de interactie op webpagina's. Het gebruik van Flip Effect on the Hover kan de aandacht trekken en uw bezoekers verbazen. Om het spiegeleffect voor de zweefschuifregelaar in te stellen, gaat u naar het gedeelte Zweefschuifregelaar van het eigenschappenvenster en selecteert u de voorinstelling voor spiegelen.

Zoomen is ook heel natuurlijk, omdat we overal in het oor van camera's leven, en je kunt het zoomeffect op de Hover-schuifregelaar gebruiken. Ga naar het eigenschappenpaneel en kies de zoomvoorinstelling voor het zweefschuifelement. Wijzig de eigenschappen indien nodig.