Configurando fundos

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

Fundo CSS

Este é o caso de uso mais comum.

Uma cor de reserva quando sua imagem de fundo está carregando ou parte de sua imagem de fundo é 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 está se movendo 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 obter informações mais detalhadas

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á-lo diretamente. Como 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.

Fundos avançados

Isso se aplica a Page Slide Container. Você pode clicar em Fundo avançado e selecionar as seguintes opções.

Fundos de elementos de imagem - Configurando filtros na imagem de fundo

Clique em Fundo avançado e selecione imageElement. Isso criará um elemento HTML separado <div><img /></div> dentro do contêiner como o primeiro elemento.

Então você pode aplicar propriedades CSS como filtro 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.

Fundos animados

Clique em Fundo avançado e selecione animated.

Existem vários presets de fundo animado que você pode escolher.

Normalmente, você pode configurar o backgroundColor backgroundImage do fundo animado. Alguns presets também têm variáveis CSS que permitem configurar a cor, espaçamento ou duração da animação.

Fundos de padrão repetível

Clique em Fundo avançado e selecione pattern.

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

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 do YouTube

Clique em Fundo avançado e selecione youtubeElement. Isso criará um elemento HTML separado <div><iframe /></div> dentro para incorporar um vídeo do YouTube. Você pode colar seu link de URL do YouTube lá.

Atualmente, apenas elementos do YouTube são permitidos. Isso porque ele 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.