Configurando fundos

Aqui estão várias maneiras de configurar fundos no slidde.co. Fundos em CSS podem ser definidos em qualquer elemento no slidde.co.

Fundo de foto estática

Este é o caso de uso mais comum.

Uma cor de fallback quando sua imagem de fundo está carregando ou parte dela é transparente:

backgroundColor: #000

A URL da imagem pode ser carregada usando o slidde.co. Você também pode usar gradientes CSS aqui, e o slidde.co fornece alguns presets de gradiente de forma sem código:

backgroundImage: url("your_image_url")

Você pode usar "cover" na maioria das vezes para garantir que seu fundo cubra todas as imagens:

backgroundSize: cover

Se backgroundSize: "cover" esconder alguma parte importante da sua imagem, você pode ajustar suas posições:

backgroundPosition: 50% 10px

Se sua imagem de fundo não for um padrão repetível, você pode definir isso como no-repeat:

backgroundRepeat: no-repeat

Controla se a imagem de fundo se move quando você rola a página. Normalmente, você precisaria de uma foto estática que não siga a rolagem porque cobre a página:

backgroundAttachment: fixed

Você pode verificar a documentação do MDN para informações mais detalhadas.

Configurando filtros na imagem de fundo

Isso se aplica a Page Slide Container. Você pode clicar em Fundo avançado e selecionar imageElement. Isso criará um elemento HTML <div><img /></div> separado dentro do container como o primeiro elemento.

Então, você pode aplicar propriedades CSS como filter a ele. Por exemplo, aqui estão 3 maneiras de criar mais contraste entre a imagem de fundo e o texto em primeiro plano para melhorar a legibilidade.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Confira a documentação do MDN para uma introdução mais detalhada.

Padrões de Fundo Repetíveis

Isso se aplica a Page Slide Container. Você pode clicar em Fundo avançado e selecionar um padrão.

1. Selecione um tipo de padrão.
2. Depois, você pode personalizar as opções do padrão. E pode tentar clicar no botão Inspire-me para ver qual padrão aleatório ele gera para você.

Isso criará um elemento HTML separado <div><svg width="100%" height="100%" .../></div> dentro. Isso significa que você pode ajustar suas propriedades CSS também, como opacity, filter, ou até mesmo backgroundImage para adicionar um fundo gradiente ao elemento pai do SVG. E você também pode animar o SVG.

Fundos de Vídeo

Isso se aplica a Page Slide Container. Você pode clicar em Fundo avançado e selecionar YouTube. Isso criará um elemento HTML separado <div><iframe /></div> dentro para incorporar um vídeo do YouTube. Você pode colar o link do URL do YouTube lá.

Atualmente, apenas elementos do YouTube são permitidos. Isso porque oferece melhor otimização de streaming do que hospedar nosso próprio vídeo. Se você precisar de upload de vídeo personalizado, por favor, nos avise através do botão de feedback na barra de navegação.

Animando Fundos

Se você estiver usando backgroundImage em CSS, então você pode facilmente animar sua backgroundPosition. Aqui está um exemplo.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

Você também pode animar outras propriedades CSS.

No entanto, se você precisar animar coisas como opacity em CSS, você não pode animá-la diretamente. Já que opacity se aplica a todo o elemento. Você deve usar imageElement em Fundo avançado em vez disso, e definir target para &>*:first-child para aplicar isso apenas ao elemento de imagem.