Achtergronden instellen
Hier zijn verschillende manieren om achtergronden in te stellen op slidde.co. CSS-achtergronden kunnen op elk element in slidde.co worden ingesteld.
CSS-achtergrond
Dit is het meest voorkomende gebruiksscenario.
Een fallback-kleur wanneer je achtergrondafbeelding aan het laden is of een deel van je achtergrondafbeelding transparant is:
backgroundColor: #000
De afbeeldings-URL kan worden geüpload met slidde.co. Je kunt hier ook CSS-gradients gebruiken, en slidde.co biedt enkele gradient-presets op een no-code manier:
backgroundImage: url("your_image_url")
Je kunt meestal "cover" gebruiken om ervoor te zorgen dat je achtergrond alle afbeeldingen bedekt:
backgroundSize: cover
Als backgroundSize: "cover" een belangrijk deel van je afbeelding verbergt, kun je hun posities aanpassen:
backgroundPosition: 50% 10px
Als je achtergrondafbeelding geen herhaalbaar patroon is, kun je dit instellen op no-repeat:
backgroundRepeat: no-repeat
Bepaalt of de achtergrondafbeelding beweegt wanneer je naar beneden scrolt op een pagina. Meestal heb je een statische foto nodig die niet meebeweegt met de scroll omdat deze de pagina bedekt:
backgroundAttachment: fixed
Je kunt de MDN-documentatie raadplegen voor meer diepgaande informatie.
Achtergronden animeren
Als je CSS backgroundImage gebruikt, kun je eenvoudig de backgroundPosition ervan animeren. Hier is een voorbeeld.
duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }
Je kunt ook andere CSS-eigenschappen animeren.
Echter, als je dingen zoals CSS opacity wilt animeren, kun je dit niet direct animeren. Aangezien opacity van toepassing is op het hele element. Je zou in plaats daarvan imageElement moeten gebruiken in Geavanceerde achtergrond en target instellen op &>*:first-child om dat alleen op het afbeeldings-element toe te passen.
Geavanceerde achtergronden
Dit geldt voor Page Slide Container. Je kunt op Geavanceerde achtergrond klikken en de volgende opties selecteren.
Achtergronden van afbeeldingelementen - Filters instellen op achtergrondafbeelding
Klik op Geavanceerde achtergrond en selecteer imageElement. Het zal een apart HTML <div><img /></div> element binnen de container creëren als het eerste element.
Daarna kun je CSS-eigenschappen zoals filter toepassen. Hier zijn bijvoorbeeld 3 manieren om meer contrast te creëren tussen de achtergrondafbeelding en de voorgrondtekst om de leesbaarheid te verbeteren.
filter: grayscale(0.5)
filter: brightness(0.5)
filter: blur(5px)
Bekijk de MDN-documentatie voor een diepgaandere introductie.
Geanimeerde achtergronden
Klik op Geavanceerde achtergrond en selecteer animated.
Er zijn verschillende geanimeerde achtergrondpresets waaruit je kunt kiezen.
Meestal kun je de backgroundColor backgroundImage van de geanimeerde achtergrond configureren. Sommige presets hebben ook css-variabelen waarmee je de kleur, afstand of animatieduur kunt configureren.
Herhaalbare patroonachtergronden
Klik op Geavanceerde achtergrond en selecteer pattern.
- Selecteer een patterntype
- Vervolgens kun je de opties van het patroon aanpassen. En je kunt proberen op de knop
Inspireer mete klikken om te zien welk willekeurig patroon het je geeft.
Het zal een apart HTML <div><svg width="100%" height="100%" .../></div> element binnenin creëren. Dat betekent dat je ook de css-eigenschappen kunt aanpassen, zoals opacity, filter, of zelfs backgroundImage om een verloopachtergrond toe te voegen aan het svg-ouderelement. En je kunt de SVG ook animeren.
YouTube video achtergronden
Klik op Geavanceerde achtergrond en selecteer youtubeElement. Het zal een apart HTML <div><iframe /></div> element binnenin creëren om een YouTube-video in te sluiten. Je kunt daar je YouTube-URL-link plakken.
Momenteel zijn alleen YouTube-elementen toegestaan. Aangezien het betere streamingoptimalisatie biedt dan het hosten van onze eigen video. Als je een aangepaste video-upload nodig hebt, laat het ons dan weten via de feedbackknop in de navigatiebalk.