Como recriar o papel de parede dinâmico do Mac em seu site

Neste tutorial de JavaScript, implementaremos um papel de parede dinâmico para qualquer site para exibir uma imagem de plano de fundo diferente e uma saudação com base na hora do dia.

Papéis de parede dinâmicos (como você encontrará no MacOS) dão um aspecto de personalização ao seu site. Esse dinamismo pode ser qualquer coisa, desde alterar a imagem de fundo para corresponder ao clima ou exibir curiosidades sobre a localização atual do usuário.

1. marcação

Começaremos adicionando o plano de fundo e os elementos de saudação à página usando HTML:

1
 id="background">
2
   id="greeting">
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:

  1. Horário inicial: 12h às 6h
  2. Manhã: 6h às 12h
  3. Tarde: 12h às 17h
  4. Tarde: 17h às 21h
  5. 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!

Deixe uma resposta