Animationer på dit WordPress‑site giver liv og retning. Små bevægelser fanger blikket og får din side til at føles mere tydelig og rolig. De peger på det vigtige, som en knap du vil have klik på, og viser når noget er i gang med at indlæse.
Gå let til værks. Store eller mange effekter gør siden langsommere og stjæler fokus. De kan endda flytte elementer rundt, mens siden tegner sig, og det føles rodet.
Vælg teknikker, der spiller godt med Core Web Vitals. Animér transform eller opacity, ikke bredde eller højde. Så undgår du layout-hop og bevarer en hurtig, stabil oplevelse.
Tænk også på dem, som bliver trætte af bevægelse. Respektér deres indstillinger for reduceret motion via CSS, så animationer toner ned eller slås fra.
Senere i artiklen får du to måder at komme i gang på. Enten med et plugin som Superb Addons, eller ved selv at kode med CSS og HTML. Begge metoder gennemgås trin for trin.
Hvornår animationer giver mening, og hvordan du undgår performance-fald
Superb Addons gør det let at give dine WordPress-blokke liv med CSS-animationer uden kode. Det ligger direkte i Gutenberg, så du vælger og finjusterer effekter dér, hvor du bygger siden.
- Installer og aktiver Superb Addons i WordPress: Gå til Plugins > Tilføj ny, søg efter “Superb Addons”, klik på Installer og derefter Aktivér. Når det er på plads, vises en ny Animation-indstilling i blokpanelet.
- Åbn en Cover- eller Heading-blok i editoren, find Superb Addons-panelet, og vælg en effekt som Fade In Up. Sæt Duration til cirka 600 – 800 ms for naturlig bevægelse. Brug Delay på 150 – 300 ms for bedre timing. Sæt Iteration til 1 på indholdsblokke, så animationen ikke kører i ring.
- Slå Animate on scroll til. Animationen starter først, når elementet kommer ind i viewport, og det sparer kræfter. Vælg easing med omtanke. Ease-out føles blød ved indlæsning, mens ease-in passer til exit-effekter. Test valgene i preview og på mobil for en glidende oplevelse.
Superb Addons loader kun de CSS- og JS-filer, der faktisk bruges på siden. Det holder siden hurtig uden unødigt ekstra.
Sådan bruger du Superb Addons til CSS animationer i WordPress
Vil du lave animationer i WordPress uden plugin, er det ret ligetil med lidt CSS og en smule PHP. Opret først en fil: /wp-content/themes/dit-tema/assets/css/animate.css. Skriv dine @keyframes og klasser, som styrer animationerne. For eksempel:
css @keyframes fadeUp { from {opacity: 0; transform: translateY(16px);} to {opacity: 1; transform: translateY(0);} } .animate-fade-up { animation-name: fadeUp; animation-duration: .7s; animation-timing-function: ease-out; animation-fill-mode: both; } .delay-200 {animation-delay: .2s;} .slow {animation-duration: 1.2s;}
Når CSS-filen er klar, skal du loade den i dit tema. Tilføj funktionen her i dit child theme’s functions.php:
php function mytheme_animations() { wp_enqueue_style('my-animate', get_stylesheet_directory_uri() . '/assets/css/animate.css', [], null); } add_action('wp_enqueue_scripts', 'mytheme_animations');
Hvis du helst vil undgå at røre filerne direkte, kan du bruge Code Snippets til at indsætte PHP-koden.
Brug dine klasser i HTML eller Gutenberg-blokke ved at tilføje class på elementet. Eksempel:
“`html
Hej verden
“`
Det får overskriften til at glide roligt op efter et kort delay. Du kan også kombinere animationer ved at tilføje flere klasser:
css @keyframes glow { from {text-shadow: 0 0 0 rgba(255,200,0,0);} to {text-shadow: 0 0 12px rgba(255,200,0,.7);} } .animate-glow { animation: glow 2s ease-in-out 1s infinite alternate; }
Og i HTML:
“`html
Glødende tekst!
“`
Så får du både fade-up og glød på samme element. Husk tilgængelighed. Tilføj en media query, som respekterer “reduced motion”:
css @media (prefers-reduced-motion: reduce) { *[class^="animate-"] { animation: none !important; } }
Det slår animationer fra for brugere, som foretrækker mindre bevægelse. Om du vælger et plugin for hurtig start uden kode eller den manuelle metode for fuld kontrol, afhænger af dit behov. Begge tilgange virker, så vælg det, der passer bedst til dit site.