1. marcação
Começaremos adicionando o plano de fundo e os elementos de saudação à página usando HTML:
1 |
|
2 |
|
3 |
|
Bem, isso foi fácil.
2. Estilizando com CSS
Para nosso estilo, definiremos nossa imagem de plano de fundo para ter a altura total da janela de visualização e colocaremos a saudação no centro. Também colocaremos uma sobreposição um pouco mais escura sobre o fundo para melhorar o contraste entre nosso texto e a imagem de fundo.
É assim que nosso CSS se parece:
1 |
#background { |
2 |
height: 100vh; |
3 |
background-size: cover; |
4 |
background-position: center; |
5 |
display: flex; |
6 |
align-items: center; |
7 |
justify-content: center; |
8 |
text-align: center; |
9 |
}
|
10 |
|
11 |
#background::before { |
12 |
content: ''; |
13 |
width: 100%; |
14 |
top: 0; |
15 |
height: 100%; |
16 |
left: 0; |
17 |
position: absolute; |
18 |
background-color: rgba(0, 0, 0, 0.1); |
19 |
}
|
20 |
|
21 |
#greeting { |
22 |
color: white; |
23 |
position: relative; |
24 |
padding: 16px; |
25 |
}
|
3. Configurando a Funcionalidade do JavaScript
Para nosso papel de parede dinâmico, precisaremos decidir a que horas queremos atualizar o plano de fundo. Neste tutorial, estes são os horários que usaremos:
- Horário inicial: 12h às 6h
- Manhã: 6h às 12h
- Tarde: 12h às 17h
- Tarde: 17h às 21h
- Noite: 21h às 24h
Queremos definir uma imagem de plano de fundo e uma saudação para cada um desses momentos, então criaremos um array para lidar com esses valores.
1 |
const fundos = [ |
2 |
{
|
3 |
min: 0, |
4 |
max: 6, |
5 |
src: "", |
6 |
greeting: "Quiet Hours 😴" |
7 |
},
|
8 |
{
|
9 |
min: 6, |
10 |
max: 12, |
11 |
src: "", |
12 |
greeting: "It's going to be a beautiful day 😊" |
13 |
},
|
14 |
{
|
15 |
min: 12, |
16 |
max: 17, |
17 |
src: "", |
18 |
greeting: "Good afternoon" |
19 |
},
|
20 |
{
|
21 |
min: 17, |
22 |
max: 21, |
23 |
src: "", |
24 |
greeting: "Good evening" |
25 |
},
|
26 |
{
|
27 |
min: 21, |
28 |
max: 24, |
29 |
src: "", |
30 |
greeting: "Good night" |
31 |
}
|
32 |
];
|
Em seguida, atribuiremos os elementos que atualizaremos às variáveis:
1 |
const backgroundEl = document.getElementById("background"); |
2 |
const greetingEl = document.getElementById("greeting"); |
Defina a Lógica
Agora precisamos definir a lógica para lidar com a exibição do plano de fundo e saudação ao usuário:
Primeiro, obteremos a hora atual do usuário usando o Date() construtor e o getHours() método:
1 |
const getCurrentHour = () => { |
2 |
const currentDate = new Date(); |
3 |
return currentDate.getHours(); |
4 |
};
|
O new Date() construtor retorna a hora atual com base no dispositivo do usuário e getHours() retorna a hora atual no formato de 24 horas.
Em seguida, precisaremos comparar os valores de tempo em nosso array backgrounds e retornar o objeto background que contém a hora atual em seu intervalo.
Usando o array.find() método, procuraremos o objeto de plano de fundo em que o tempo mínimo é menor ou igual à hora atual e o tempo máximo é maior que a hora atual.
1 |
const currentHour = getCurrentHour(); |
2 |
|
3 |
const currentBackground = backgrounds.find((background) => |
4 |
background.min <= currentHour && background.max > currentHour |
5 |
);
|
Por exemplo, se a hora atual for 11, queremos obter os valores para o objeto da manhã, que tem um mínimo de 6 e um máximo de 12.
Uma vez obtido o objeto de fundo correspondente, atualizaremos nossos elementos com os valores contidos no objeto. É assim que nossa função se parece:
1 |
const setBackground = () => { |
2 |
const currentHour = getCurrentHour(); |
3 |
|
4 |
const currentBackground = backgrounds.find((background) => |
5 |
background.min <= currentHour && background.max > currentHour |
6 |
);
|
7 |
|
8 |
backgroundEl.style.backgroundImage = `url(${currentBackground.src})`; |
9 |
greetingEl.innerHTML = currentBackground.greeting; |
10 |
};
|
Acionar com um ouvinte de evento
Podemos passar esta função para um load ouvinte de eventos para definir o plano de fundo quando um usuário acessa nosso site pela primeira vez.
1 |
window.addEventListener("load", () => { |
2 |
setBackground(); |
3 |
});
|
Adicionar intervalo
Finalmente, podemos criar um setInterval() método para atualizar o plano de fundo a cada hora – dessa forma, o plano de fundo e a saudação são atualizados sem que o usuário precise recarregar a página da web.
1 |
window.addEventListener("load", () => { |
2 |
setBackground(); |
3 |
|
4 |
const everyHour = 1000 * 60 * 60; |
5 |
setInterval(setBackground, everyHour); |
6 |
});
|
Conclusão
E com isso, criamos um papel de parede dinâmico com saudações personalizadas para o nosso site. Não se esqueça de voltar mais tarde para ver como mudou!
Gráficos de fundo no Envato Elements
Estas são algumas das ilustrações que usei para o papel de parede dinâmico—há literalmente ga-analytics#sendElementsClickEvent”>milhares de planos de fundo gráficos que você pode escolher no Envato Elements!
[ad_2]
