5 SVG-animaties om uw webdesign op te fleuren

Animaties kunnen ervoor zorgen dat een website glad en soepel aanvoelt, maar hoe kunt u deze functie in uw eigen werk opnemen? Doe met ons mee en leer hoe u uw webdesign kunt opfleuren met deze creatieve voorbeelden van SVG-animaties.

Werken met schaalbare vectorafbeeldingen

SVG is een bestandsindeling die lijnen gebruikt in plaats van pixels om afbeeldingen op te slaan en weer te geven. Zoals hun naam al doet vermoeden, kunnen schaalbare vectorafbeeldingen worden geschaald zonder kwaliteitsverlies.

Het is niet alleen geweldig om het formaat aan te passen, maar je kunt ook SVG-code gebruiken in HTML, en het zal werken als elk ander element. Dit betekent dat u kunt gebruiken CSS-regels, JavaScript-code, en, belangrijker nog, animaties met de SVG's van uw website.

U kunt SVG's maken met software zoals Adobe Illustrator en websites zoals SVGator, maar u kunt ze ook met de hand maken. Het SVG-formaat is een XML-taal zonder opmaak en lijkt een beetje op HTML.

Dit voorbeeld heeft vier knoppen met hun eigen pictogrammen en een blokgekleurde achtergrond. Wanneer u een knop selecteert, verandert deze van een cirkel in een afgeronde rechthoek, terwijl ook de achtergrondkleur van de pagina wordt aangepast aan de knop.

Een mix van JS en CSS levert deze resultaten op, en het begint allemaal met een lus die voegt gebeurtenislisteners toe naar elke knop.

voor (var ik = 0; i < menuItems.length; ik++) {
 menuItems[i].addEventListener('Klik', knopKlik);
}

Zodra er op een knop is geklikt, voert een functie genaamd buttonClick() verschillende acties uit. Het begint met het wijzigen van de achtergrondkleur van de pagina:

document.body.style.backgroundColor = `#${deze.getAttribute('data-achtergrond')}`;

Hierna voegt het een CSS-klasse toe aan de knop die is ingedrukt, waardoor een animatie wordt geactiveerd en de achtergrondkleur van de knop wordt gewijzigd.

menuItemActive.classList.remove('menu__item--actief');
deze.classList.add('menu__item--actief');
menuItemActive.classList.add('menu__item--animate');
deze.classList.add('menu__item--animate');
menuItemActive = deze;

Hoewel eenvoudig, biedt dit SVG-animatievoorbeeld een unieke manier om uw website aantrekkelijker te maken. Dit type ontwerpfunctie is perfect voor mobiele websites en op HTML gebaseerde apps.

U kunt zoveel knooppunten toevoegen als u wilt aan een SVG-pad, waardoor ze ideaal zijn voor het maken van tekst. Deze eenvoudige streekanimatie demonstreert de techniek perfect, waarbij de tekst van links naar rechts verschijnt alsof deze wordt geschreven.

De animatie heeft geen keyframes, maar past gewoon een nieuwe lijndikte toe naast de CSS-overgangseigenschap. Hierdoor trekt elke lijn zichzelf over het scherm zonder ingewikkelde animatie.

.path-1 {
 beroerte-dasharray: 1850 2000;
 slag-dashoffset: 1851;
 overgang: 5s lineair;
}

Een JS-functie voegt een unieke CSS-klasse toe aan elke sectie van de tekst met behulp van een enkele bovenliggende CSS-klasse om de dichtheid van de code verder te verlagen.

$(functie() {
functieanimatieStart() {
 $('#container').addClass('vin');
 }
setTimeout (animatieStart, 250);
});

Als een voorbeeld van alleen CSS is deze SVG-animatie geweldig voor iedereen die zijn tenen niet in JavaScript-code wil onderdompelen. Het idee is simpel: een knop begint met een onderstreping die verandert in een volledige rand als je erover beweegt.

CSS-sleutelframes creëren twee statussen voor de knop. De eerste staat heeft een dikkere lijn en bedekt alleen de onderkant van de SVG-vormknop, beginnend bij 0%. De andere staat is de volledige knop op 100% met een dunnere slag.

@keyframes tekenen {
 0% {
 slag-dasharray: 140 540;
 slag-dashoffset: -474;
 slagbreedte: 8px;
 }
100% {
 beroerte-dasharray: 760;
 slag-dashoffset: 0;
 slagbreedte: 2px;
 }
}

Deze keyframes worden alleen toegepast op de knopomtrek van de SVG-vorm wanneer de gebruiker de cursor over de knop beweegt. Het gebruikt de :hover CSS pseudo-klasse om dit te bereiken, wordt een regel geactiveerd die de animatiehoofdframes aan de knop toevoegt.

.svg-wrapper:zweven.vorm {
-webkit-animatie: 0.5stekenenlineairvoorwaarts;
animatie: 0.5stekenenlineairvoorwaarts;
}

Dit laat zien hoe je prachtige animaties kunt maken zonder ingewikkelde code te gebruiken. U kunt deze basisprincipes en uw creativiteit gebruiken om meer uitgebreide interactieve elementen voor uw eigen website te maken.

Met zoveel interessante technieken onder de motorkap, is het moeilijk om te beslissen wat je moet bespreken als je naar dit voorbeeld van een SVG-klok kijkt.

Om te beginnen gebruikt het de functie Date() om de huidige datum en tijd te verzamelen. Met deze waarde splitsen de functies getHours(), getMinutes() en getSeconds() de gegevens op in de relevante delen. De code berekent vervolgens de positie van elke wijzer op de klok.

var datum = nieuweDatum();
var uurHoek = 360 * datum.getHours() / 12 + datum.getMinutes() / 2;
var minuutAngle = 360 * datum.getMinutes() / 60;
var secAngle = 360 * datum.getSeconds() / 60;

Door elk van de handen in een array op te slaan, kunnen hun posities heel gemakkelijk worden ingesteld telkens wanneer de code wordt uitgevoerd.

handen[0].setAttribuut('van', shifter (secAngle));
handen[0].setAttribuut('tot', shifter (secAngle + 360));
handen[1].setAttribuut('van', shifter (minutenhoek));
handen[1].setAttribuut('tot', shifter (minutenhoek + 360));
handen[2].setAttribuut('van', shifter (urenhoek));
handen[2].setAttribuut('tot', shifter (urenhoek + 360));

Tijd heeft beperkte toepassingen op het gebied van webdesign, maar het is handig voor afteltimers, klokken en het opslaan van tijdstempels. Dit voorbeeld biedt ook inzicht in het maken van dynamische SVG-animaties met variabelen.

Deze CSS-gestuurde SVG-animatie biedt een handige manier om elke vorm er fantastisch uit te laten zien.

Als er niets is geselecteerd, heeft het formulier grijze lijnen onder elk veld. Er verschijnt een lijn wanneer een veld wordt geselecteerd, die van links naar binnen schuift met een vloeiende animatie. Als de gebruiker een ander veld selecteert, schuift de lijn in een vloeiende beweging naar zijn nieuwe positie.

Ten slotte, zodra de gebruiker op de drukt Log in knop, verandert de lijn in een cirkel die pulseert terwijl de pagina wordt geladen.

Dit SVG-voorbeeld is bijzonder indrukwekkend omdat het alleen op CSS vertrouwt om zo'n complex resultaat te produceren. Het gebruikt CSS-variabelen om gegevens op te slaan, waardoor het gemakkelijker wordt om elementen zoals de hoofdapp te bedienen.

$app-padding: 6vh;
$app-breedte: 50vh;
$app-hoogte: 90vh;
#app {
 breedte: $app-breedte;
 hoogte: $app-hoogte;
 opvulling: $app-opvulling;
 achtergrond: wit;
 doos-schaduw: 002rem rgba(zwart, 0.1);
}

U kunt dit voorbeeld op vrijwel elk webformulier gebruiken en uw gebruikers als nooit tevoren betrekken.

Uw eigen SVG-animaties maken met HTML, JS en CSS

Het maken van een geheel nieuwe SVG-animatie kan een moeilijk proces zijn wanneer u voor het eerst begint. Deze voorbeelden geven je de voorsprong die je nodig hebt om SVG-animaties te bouwen die je website laten schitteren.

9 geavanceerde CSS-trucs voor mediaquery's die u moet kennen

Lees volgende

Over de auteur