Fundos Rotativos no Blogue com CSS

E se no fundo do blogue, não houvesse uma imagem estática mas sim várias imagens em rotação?
Mas sem ser necessário nenhum javascript adicional, somente um pouco de CSS?

Pensava nisso enquanto pesquisava para actualizar o artigo Fundos Rotativos no Blogue com jQuery que republiquei há alguns dias e que se servia do jQuery em conjunto com um plugin para obter esse efeito.

As vantagens de utilizar somente CSS são óbvias:

1. A principal vantagem do CSS é que um estilo é aplicado em vários locais com a mesma designação ou class, o que é vantajoso.
2. Ao desenhar um Site ou Blogue, podemos escrever os estilos em poucas linhas para cada página, melhorando a velocidade de carregamento.
3. O CSS é importante tanto no desenvolvimento, como também simplifica a manutenção dum Blogue/Site.
4. É menos complicado do que o javascript.
5. Fácil até para um leigo de personalizar um Blogue ou página online.

Atenção: Esta é uma implementação de nível médio, que requere alguns conhecimentos do código do teu blogue.
Por isso RECOMENDO que teste primeiro num blogue de testes e mesmo assim, antes de tentar modificar o código do seu blogue, é recomendado que salve sempre o modelo actual!

No artigo/tutorial Fundos Rotativos no Blogue com jQuery utilizei um template Minima (dos modelos antigos) porque além de ser o mais comum na altura da publicação original, também era o mais fácil de modificar e utilizado pela maioria dos Bloggers que gostavam de personalizar a fundo o seu blogue.
Entretanto esse tipo de modelo foi descontinuado e substituído por modelos mais adequados aos tempos actuais onde damos uma maior importância aos dispositivos móveis.

Para este guia, vou utilizar uma das versões do modelo Emporio, que é o mesmo que utilizo aqui no blogue embora aqui já fortemente modificado por mim.
Caso não conheçam ainda e tenham curiosidade em ver ou experimentar os actuais Modelos do Blogger, podem ir ao Painel do Blogger Definições Tema:

Nesse local encontram todos os actuais Modelos do Blogger, bem como a opção de Editar HTML do Modelo em uso.

Como não vai ser necessário utilizar nenhum javascript desta vez, podemos começar por dar uma olhada no CSS do blogue...
E mais uma vez, para entenderem melhor como funcionam os estilos dum blogue: Entendendo o Blogger... Parte 1: CSS.

Como já tinha mencionado no artigo publicado há alguns dias, nestes modelos do tipo Emporio, o CSS apresenta-se da seguinte maneira ou similar:

ver código

imprimir?

1	<b:skin version='1.1.0'><![CDATA[/*! ....

2	....Restantes estilos CSS do blogue....

3	]]></b:skin>

4

5	<b:template-skin>

6

<![CDATA[

7	....Estilos CSS extra para o Esquema do template....

8

]]>

9	</b:template-skin>

Podemos acrescentar os nossos estilos personalizados em qualquer lugar dentro de <b:skin>...</b:skin> ( de preferência, no final dos restantes CSS do Modelo), ou então antes de <b:template-skin> ou </head>, desde que envoltos numa tag style da seguinte forma:

ver código

imprimir?

1

<style>

2	....Os nossos estilos CSS personalizados....

3

</style>

Neste caso, vamos utilizar a segunda opção e colocar os nossos estilos CSS ANTES DE </head> da seguinte maneira:

ver código

imprimir?

001	<style> /* abertura da tag style */

002	/* -----------------------------------------------

003	ESTILOS CSS PARA FUNDO ROTATIVO

004	----------------------------------------------- */

005	.content_wrapper { /* div que vai envolver conteúdo HTML do blogue */

006	position: relative;

007	z-index: 1;

008

009	border-radius: 3px;

010	float: none;

011	height: auto;

012	margin: 0 auto;

013	padding: 0px;

014	width: 80%;

015	background-color: rgba(0,0,0,0.8);

016

}

017	.ppsbtn { /* botão de Pausar/Avançar imagens em rotação */

018	align-items: center;

019	cursor: pointer;

020	color: transparent;

021	font-size: 0;

022	display: inline-flex;

023	user-select: none;

024	position: fixed;

025	top: 100px;

026	left: 20px;

027	z-index: 1;

028

}

029	#css_toggle + .ppsbtn::after { /* botão de Pausar/Avançar imagens em rotação */

030	content: "\23f8";

031	background: #09f;

032	line-height: 22px;

033	color: #bef;

034	text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;

035	font-size: 25px;

036	border: 1px solid #00f;

037	border-radius: 50%;

038	width: 25px;

039	height: 25px;

040

}

041	#css_toggle:checked + .ppsbtn:after {  /* botão de Pausar/Avançar imagens em rotação */

042	content: "\23f5";

043

}

044

045	.hidden { /* botão de Pausar/Avançar imagens em rotação */

046	clip: rect(1px 1px 1px 1px);

047	clip: rect(1px, 1px, 1px, 1px);

048	clip-path: inset(1px);

049	display: block;

050	height: 1px;

051	overflow: hidden;

052	white-space: nowrap;

053	width: 1px;

054	position: fixed;

055	top: 100px;

056	left: -200px;

057

}

058

059	.pic {  /* div que engloba TODAS as images */

060	position: fixed;

061	width: 100vw;

062	height: 100vh;

063

top: 0;

064

left: 0;

065	bottom: 0;

066

right: 0;

067	background-size: cover;

068	background-position: 50% 0;

069	background-repeat: no-repeat;

070

071	--animdur: 40s;

072	--animn: fade;

073	--animdir: normal;

074

075

}

076	[data-animation] {  /* estados da animação */

077	animation: var(--animn, none) var(--animdur, 0s) var(--animtf, linear) var(--animdel, 0s) var(--animic, infinite) var(--animdir, alternate) var(--animfm, none) var(--animps, running);

078

}

079

080	/* ESTADO DA ANIMAÇÃO: PAUSA */

081	[data-animation-pause]:checked ~ [data-animation] {

082	--animps: paused;

083

}

084	/* Cada imagem em rotação no fundo */

085

#pic1 {

086	background-image: url('url-imagem1');

087	animation-delay: 0s;

088

}

089

#pic2 {

090	background-image: url('url-imagem2');

091	animation-delay: 8s;

092

}

093

#pic3 {

094	background-image: url('url-imagem3');

095	animation-delay: 16s;

096

}

097

#pic4 {

098	background-image: url('url-imagem4');

099	animation-delay: 24s;

100

}

101

#pic5 {

102	background-image: url('url-imagem5');

103	animation-delay: 32s;

104

}

105	/* a magia que roda imagens no fundo */

106	@keyframes fade {

107

0% {

108	opacity: 1;

109

}

110

12.5% {

111	opacity: 1;

112

}

113

20% {

114	opacity: 0;

115

}

116

92.5% {

117	opacity: 0;

118

}

119

100% {

120	opacity: 1;

121

}

122

}

123	</style> /* fecho da tag style */

124	</head> /* Fecho da tag head JÁ PRESENTE NO MODELO, está presente aqui como referência de onde colocar o código acima */

Mostrar Mais

Ok. Algumas explicações de como a magia acontece.

Primeiro reparem onde diz --animdur: 40s; (linha 71).
É onde definimos o total de segundos que demora todas as imagens a passar de acordo com o número de imagens e os segundos que cada imagem fica em exposição.

A linha seguinte (--animn: fade; - linha 72), é o nome que damos à animação, neste caso: fade, e que deve ser o mesmo que está na animação na linha 106.
Na linha 73, --animdir: normal;, é onde definimos a direcção da animação, no caso normal para que as imagens rodem em círculo.

A seguir, temos que colocar o endereço das imagens: background-image: url('url-imagemnúmero'); (linhas 86, 90, 94, 98, 102)

Logo abaixo de onde se coloca as imagens, nas linhas 87, 91, 95, 99, 103 encontramos o seguinte: animation-delay: números;, que é onde definimos o intervalo em segundos dedicado a cada imagem, incluindo o tempo que demoram a mudar entre elas.
Neste exemplo, esse tempo é de 8 segundos que multiplicado por 5 imagens dá os 40 segundos que colocamos na linha 71.

Explicando o exemplo acima em poucos passos (e mais algumas fórmulas simples) para saberem como personalizar a coisa:

1. Imagens e Cronometragem

   Primeiro, precisamos decidir quantas imagens colocar.
   Este número será n nas fórmulas abaixo.

   Assim, para n imagens, precisamos definir:

   • a = tempo de apresentação de uma imagem
   • b = duração do desvanecimento entre imagens

   Portanto...

   • animation-duration (duração da animação) = t = (a + b) * n
   • animation-delay (atraso na animação) = t/n ou a + b

2. Cálculos da Animação (Keyframes)

   Não importa quantas imagens resolvam usar, sempre haverá 5 keyframes na animação de desvanecimento (fade) entre elas.
   Mas o valor percentual de cada keyframe deve mudar dependendo de quantas imagens estamos colocando (n), por quanto tempo queremos que cada imagem seja exibida (a) e por quanto tempo pretendemos que cada transição desvanecendo dure (b).

   Felizmente, as fórmulas de cada keyframe não mudam.
   E como o primeiro keyframe é sempre 0% e o quinto é sempre 100%, só precisamos calcular os valores dos três do meio:

   1. 0%
   2. a/t * 100%
   3. (a + b) /t * 100% = 1/n * 100%
   4. 100% - (b/t * 100%)
   5. 100%

3. Juntando tudo...

   Nesta etapa final vamos seguir as 2 etapas anteriores, para exemplificar como fazer.
   Utilizando o exemplo na demonstração deste artigo, temos 5 imagens e queremos que cada imagem seja exibida por 5 segundos, com a transição de cada desvanecimento entre elas a durar 3 segundos:

   • n = 5
   • a = 5
   • b = 3

   Com esses valores podemos descobrir rapidamente a duração total da animação (animation-duration = t) e qual deve ser o nosso atraso de animação (animation-delay):

   • t = (a + b) * n = (5 + 3) * 5 = 40 segundos
   • animation-delay (atraso na animação) = a + b = 5 + 3 = 8 segundos

   Com estes dados, já temos temos uma ideia sobre como será o nosso CSS.
   Como sabemos que teremos 5 imagens, e que a duração total da nossa animação é de 40 segundos e o atraso da animação é de 8 segundos, já podemos colocar esses valores tal como apresentado acima em --animdur: 40s; (linha 71) e nas linhas 87, 91, 95, 99, 103.

   

   Só o que falta é criar a animação com o nome fade, o que vamos fazer calculando as três keyframes do meio que precisaremos usando as fórmulas que mencionamos:

   1. 0%
   2. a/t * 100% = 5/40 * 100% = 12.5%
   3. (a + b) / t * 100% = 1/n * 100% = 1/5 * 100% = 20%
   4. 100% - (b/t * 100%) = 100% - (3/40 * 100%) = 100% - 7.5% = 92.5%
   5. 100%

   Portanto, tendo apurado esses valores já podemos aplicar isso na animação fade no nosso CSS (linhas 107, 110, 116, 119):

   

   Como sei bem como a matemática às vezes não é fácil, aqui está a calculadora online que utilizei para fazer os cálculos acima: Calculadora Científica

Com o CSS já tratado, agora vamos ao HTML e tal como no artigo que inspirou este, o passo seguinte é envolver o conteúdo do blogue numa div, mas com uma diferença.
Além de envolver o conteúdo do blogue numa div, vamos também colocar o controlo da animação (Pausar/Avançar) e o HTML onde vão ficar as imagens::

ver código

imprimir?

01	</head> <!-- // Fecho da tag head - Para Referência no código do blogue //-->

02

03	<body> <!-- // Abertura da tag body - Para Referência no código do blogue //-->

04	<div class='img_container'> <!-- // Abertura da tag que contêm as imagens + o controlo da animação //-->

05	<input class='hidden' data-animation-pause='running' id='css_toggle' type='checkbox'/>

06	<label class='ppsbtn' for='css_toggle'>Pausa/Avançar</label>

07

08	<div class='pic' data-animation='' id='pic5'/>

09	<div class='pic' data-animation='' id='pic4'/>

10	<div class='pic' data-animation='' id='pic3'/>

11	<div class='pic' data-animation='' id='pic2'/>

12	<div class='pic' data-animation='' id='pic1'/>

13	</div> <!-- // Fecho da tag que contêm as imagens + o controlo da animação //-->

14	<div class='content_wrapper'> <!-- // Abertura da tag que envolve o conteudo do blogue //-->

15

16	...Conteúdo HTML do blogue. CUIDADO, NÃO MEXER!....

17

18	</div> <!-- // Fecho da tag que envolve o conteudo do blogue //-->

19	</body> <!-- // Fecho da tag body - Para Referência no código do blogue //-->

20

</html>

Comentei no código acima as partes importantes a ter em conta, mas faltou uns pozinhos:
As linhas 5 e 6 são o que coloca a animação em Pausa (⏸) ou a faz Avançar (⏵)

Já nas linhas 8, 9, 10, 11 e 12 é referente a cada imagem, no caso são 5 mas poderiam ser mais...
Atenção, que as imagens devem ficar em ordem inversa à que desejam que apareçam tal como mostra nas ids.

E é só isso...
Pode ver como ficou no blogue que utilizei para o teste:

Caso prefiram ver no próprio blogue de teste (O exemplo acima não tem em conta os diversos aparelhos): DEMONSTRAÇÃO

Visto em
• How to make cross-fading images with CSS
• How to Play and Pause CSS Animations with CSS Custom Properties

E por hoje é tudo.

Até Breve.

Queres ler outro artigo ao calhas?