Här samlar vi information som är användbar fö BERAS Developments webbplats webbredaktörer.
BERAS Developments egna block
Block anpassade och skapade för BERAS Development ligger i en katalog som heter ”BERAS Development”. Dessa block är även döpta med ”BERAS” i början av namnet, vilket gör dem enkla att söka fram.
Animationer
Sajten använder två bibliotek för Animationer.
- Animate.css (~80 KB) – ett rent CSS-bibliotek med massor av färdiga animationer (fadeIn, bounceIn, slideIn, etc.)
- AOS (Animate On Scroll) (~13 KB) – triggar animationer när element scrollas in i vyn
Implementera animationer:
För Animate.css läggs css klasser på objekt som grupper mm. Via inställningen Block/Avancerat/Ytterligare CSS-klass(er).
För AOS läggs in som Additional attributes
Hur du installerar och använder AOS (Animate On Scroll)
1. Installera pluginet Gå till WordPress Admin → Plugins → Lägg till nytt → sök på ”Attributes for Blocks” → Installera och aktivera.
2. Använd det i Gutenberg
- Markera ett block i redigeraren (t.ex. en rubrik, bild eller grupp)
- Gå till Avancerat-fliken i höger panel
- Du ser nu ett nytt fält: ”Additional attributes”
- Skriv in ditt attribut:
| Attribut | Värde |
|---|---|
data-aos | fade-up |
data-aos-delay | 200 |
data-aos-duration | 1200 |
Skillnad mellan animationerna:
animate__animated animate__fadeInUp (Animate.css) Animationen startar direkt när sidan laddas, oavsett om elementet syns på skärmen eller inte. Bra för saker som ska animeras direkt vid sidladdning, t.ex. en hero-rubrik högst upp.
data-aos="fade-up" (AOS) Animationen triggas när elementet scrollas in i vyn. Elementet är osynligt tills användaren scrollar ner till det. Bra för innehåll längre ner på sidan.
Själva rörelsen – en fadeIn underifrån – är i princip identisk. Skillnaden är alltså när animationen utlöses, inte hur den ser ut.
I praktiken är AOS det du vill använda för det mesta, eftersom det känns mer naturligt att saker animeras in när man scrollar till dem. Animate.css är mest användbart om du vill animera något direkt vid sidladdning, eller trigga animationer via JavaScript/CSS-klasser dynamiskt.
Populära animationer att testa
| Animate.css | AOS |
|---|---|
animate__fadeIn | fade-up |
animate__bounceIn | zoom-in |
animate__slideInLeft | flip-left |
animate__pulse | slide-right |
animate__zoomIn | fade-down |