Criando um fundo de dois tons com uma linha diagonal

Para obter um fundo dividido em duas seções por uma linha diagonal usando CSS, siga estas etapas:

1. Crie dois divs:
Crie dois divs separados para representar as duas seções de fundo.

2. Estilize os Divs:
Aplique o seguinte CSS aos divs:

.solid-div {
  background-color: [solid color];
}

.textured-div {
  background-image: url([texture image URL]); /* Replace with actual image URL */
}

3. Posicione os Divs:
Use o posicionamento CSS (por exemplo, absoluto ou fixo) para colocar os dois divs lado a lado, garantindo que eles cubram a tela inteira.

4. Crie a linha diagonal:
Para criar a linha diagonal, você pode usar um gradiente CSS:

.background-container {
  background: -webkit-linear-gradient(30deg, [solid color] 50%, [textured-color] 50%);
}

5. Anime os Divs:
Utilize jQuery para controlar os tamanhos dos divs com base nos cliques do usuário, criando o "efeito cortina" que você deseja.