/* * Nuvens finas atravessando a linha do bloco da semana (.comnuvens). * * ATMOSFERA, NÃO INFORMAÇÃO: este efeito é INDEPENDENTE da condição do tempo - * vale sempre naquela linha, chova ou faça sol. É o oposto da chuva e do * relâmpago, que só existem quando o dado manda. Por isso ele não passa pela * estrutura de alvos daqueles dois (ver a nota no PHP): lá tudo gira em torno * de "qual NÍVEL vale aqui", e aqui não há nível nenhum. * * --------------------------------------------------------------------------- * SEM JAVASCRIPT, SEM IMAGEM * * As duas camadas são os pseudo-elementos ::before e ::after do próprio * elemento de degradê do WPBakery - nada é criado no DOM, nenhum script roda. * Isso só é possível porque o efeito não depende de dado: a chuva precisa de JS * porque a quantidade de gotas vem do PHP, gota a gota; aqui o desenho é fixo. * * A animação é só transform (composta na GPU, sem trabalho por quadro). * * --------------------------------------------------------------------------- * TEXTURA EM PNG, NÃO DEGRADÊ * * As duas camadas são IMAGENS geradas na bancada (scratch/nuvens-textura.html) * com ruído fractal do SVG. A versão anterior usava degradês radiais, que dão * mancha suave sem estrutura - nuvem alta tem FILAMENTO, e filamento é o que o * ruído fractal faz e o degradê não. * * As URLs das imagens NÃO estão neste arquivo: vêm por variável de CSS, que o * PHP injeta (ver IMAGENS_NUVENS em class-elo-clima-shortcodes.php). Assim * trocar a textura é trocar uma linha de PHP, e este arquivo não fica amarrado * ao domínio de um site. Sem a variável, o background-image simplesmente não * resolve e a camada fica invisível - degradação segura. * * O LADRILHO TEM LARGURA FIXA EM PIXELS (--elo-clima-nuvens-ladrilho), e é a * peça central do desenho: * * background-size: 100% - a LARGURA é constante e inteira; só a * ALTURA acompanha a linha. É o que resolve o problema de a linha do site ter * altura variável: se a largura fosse derivada da altura (background-size: * auto 100%), ela sairia fracionária, o navegador reamostraria a imagem em * cada repetição, e sobraria um fio claro em cada junção - foi exatamente * isso que apareceu na prévia da ferramenta e o que a correção de lá ensinou. * Com a largura fixa, a imagem sai em escala 1:1 na horizontal (nenhuma * reamostragem) e só estica na vertical, que é onde nuvem rala não tem * detalhe pra perder. * * A ANIMAÇÃO ANDA EXATAMENTE UM LADRILHO. Como o desenho se repete a cada * ladrilho, o quadro final é idêntico ao inicial - o laço fecha por * construção, sem depender de a largura da tela ser múltiplo de nada. * * --------------------------------------------------------------------------- * O QUE FAZ PARECER NUVEM E NÃO MANCHA * * - LENTIDÃO: 288s pra atravessar o ladrilho de trás (1600px) e 115s o da * frente (1000px). Movimento que se percebe como movimento está rápido * demais; a régua aqui é "quem olha fixo nota, quem passa não". * * A DURAÇÃO É POR LADRILHO, não por tela - então ela precisa acompanhar a * largura do ladrilho, senão trocar a imagem muda a velocidade aparente. A * conta é direta: velocidade = ladrilho / duração. A camada de trás rodava * 1000px em 180s (5,56 px/s); com 1600px, manter os mesmos 5,56 px/s pede * 1600 / 5,56 = 288s. A da frente segue em 1000px / 115s = 8,7 px/s, que é * o que mantém ela mais rápida que a de trás - a diferença de velocidade é * o que dá a profundidade. * - VELOCIDADES DIFERENTES entre as duas camadas (e sentidos ligeiramente * distintos de altura): é o que dá profundidade. Duas camadas na mesma * velocidade leem como uma textura só deslizando. * - TAMANHOS E ALTURAS VARIADOS, nunca repetição regular. * * INTENSIDADE: o pico de branco é 0,14 na camada de trás e 0,09 na da frente. * * O LIMITE QUE VALE AQUI É O CONTRASTE DO TEXTO DOS CARTÕES, não luminância * absoluta. As duas primeiras versões deste efeito foram calibradas contra o * limiar de 10% da WCAG 2.3.1 e saíram quase invisíveis - o critério estava * errado: aquele limiar é sobre FLASH (mudança rápida), e isto é uma deriva de * minutos. Movimento lento e contínuo não é flash; o que ele não pode fazer é * apagar o texto que passa por cima. * * Medido empilhando as camadas na ordem real (degradê da linha -> nuvem no * pico -> fundo translúcido do cartão -> texto), razão de contraste WCAG: * * sem nuvem 1 camada (0,14) as duas (0,23) * tema escuro 6,80:1 5,67:1 5,06:1 * tema claro 3,71:1 2,98:1 2,60:1 * * No tema escuro o texto principal fica acima do mínimo AA (4,5:1) mesmo no * encontro das duas manchas - é o tema que esta linha usa. O tema CLARO já * nasce abaixo de AA (3,71:1) por causa do fundo quase transparente do cartão * sobre o degradê: ali a nuvem piora um problema que é anterior a ela, e o * remédio é o cartão (fundo mais encorpado) ou tema="escuro", não baixar a * nuvem de novo. * * EM PIXEL, que é o que se enxerga: a variação horizontal de cor no fundo * passou de 3-8 níveis (versão anterior, praticamente invisível) para 6-21 * níveis de 255. */ .comnuvens .row-bg-overlay.row-bg-layer { /* LARGURA DO LADRILHO E DURAÇÃO NÃO SÃO DECLARADAS AQUI - só usadas, sempre com valor de reserva: var(--elo-clima-nuvens-ladrilho-tras, 1600px) Quem manda nelas é o PHP, que injeta as duas por camada a partir do que está no painel (ver css_nuvens_variaveis). Declará-las TAMBÉM neste arquivo seria pedir empate de especificidade com a regra injetada, resolvido por ordem de carregamento - e a ordem é frágil: basta um plugin de cache reorganizar ou embutir o CSS pra o valor do arquivo passar a ganhar do valor do painel, em silêncio. Achado real desta rodada: era exatamente assim, e trocar a largura no painel não mudava o ladrilho. Com valor de reserva, o injetado SEMPRE vence (não há nada pra empatar), e sem injeção nenhuma o efeito continua com os padrões de fábrica. Os valores de reserva abaixo precisam espelhar TEXTURAS_NUVENS_PADRAO no PHP. */ /* Intensidade de cada camada, aplicada por cima da opacidade que já está assada no PNG (ver a nota de INTENSIDADE no cabeçalho). Ficam aqui, e não no valor do alfa da imagem, pra dar pra calibrar sem regerar textura. */ --elo-clima-nuvens-op-tras: 0.85; --elo-clima-nuvens-op-frente: 0.75; /* As camadas são absolutas dentro deste elemento, e precisam ser cortadas por ele - senão a nuvem que sai pela lateral pintaria por cima da seção vizinha. O elemento já é posicionado pelo tema; o overflow é o que falta. */ overflow: hidden; } .comnuvens .row-bg-overlay.row-bg-layer::before, .comnuvens .row-bg-overlay.row-bg-layer::after { content: ''; position: absolute; top: 0; left: 0; /* Um ladrilho a mais que a linha: ao andar um ladrilho pra esquerda, a borda direita da camada chega exatamente na borda direita da linha - nunca aparece vão. --passo é o ladrilho DAQUELA camada, definido logo abaixo, e é o mesmo valor que o keyframe usa: largura, ladrilho e passo saem sempre do mesmo número, então não há como um sair do compasso do outro. */ width: calc(100% + var(--passo)); height: 100%; background-repeat: repeat-x; /* LARGURA CONSTANTE, altura acompanhando a linha - ver o cabeçalho. */ background-size: var(--passo) 100%; pointer-events: none; /* nunca rouba clique/seleção do conteúdo da linha */ /* DESVANECIMENTO EM CIMA E EMBAIXO. A máscara é VERTICAL de propósito, e a razão é geométrica: a máscara viaja junto com o elemento (transform move o elemento E a máscara dele), então uma máscara horizontal deslizaria pela linha, e o clarão da borda passearia pelo meio do fundo. A vertical é INVARIANTE a um movimento horizontal - fica parada onde deve. E AS BORDAS LATERAIS? Ficam por conta da amplitude, não de máscara. O recorte lateral existe (o overflow do elemento corta a mancha que entra), mas o degrau máximo possível ali é a própria amplitude do efeito: medido em navegador, a variação horizontal de cor no fundo vai de 3 a 8 níveis de 255 - um degrau desse tamanho, na borda extrema da tela, não se vê. Trocar transform por animação de background-position deixaria a máscara parada e permitiria as quatro bordas, mas ao custo de repintar a faixa inteira a cada quadro; num efeito de fundo que roda o tempo todo, e sobretudo no celular, o transform composto na GPU vale mais que a borda lateral. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 78%, transparent 100%); will-change: transform; } /* CAMADA DE TRÁS: textura de formas maiores e mais esparsas, mais lenta. */ .comnuvens .row-bg-overlay.row-bg-layer::before { --passo: var(--elo-clima-nuvens-ladrilho-tras, 1600px); background-image: var(--elo-clima-nuvens-img-tras); opacity: var(--elo-clima-nuvens-op-tras); /* 288s, e não 180s: a duração é por LADRILHO, então ela tem que acompanhar a largura dele pra a velocidade na TELA não mudar. 180s x (1600/1000) = 288s - os mesmos 5,6 px/s de antes. Ver a conta no cabeçalho. */ animation: elo-clima-nuvens-desliza var(--elo-clima-nuvens-dur-tras, 288s) linear infinite; } /* CAMADA DA FRENTE: textura de formas menores e mais numerosas, mais rápida - a diferença de velocidade entre as duas é o que cria a profundidade. */ .comnuvens .row-bg-overlay.row-bg-layer::after { --passo: var(--elo-clima-nuvens-ladrilho-frente, 1000px); background-image: var(--elo-clima-nuvens-img-frente); opacity: var(--elo-clima-nuvens-op-frente); animation: elo-clima-nuvens-desliza var(--elo-clima-nuvens-dur-frente, 115s) linear infinite; } /* Anda EXATAMENTE UM LADRILHO. Como a textura se repete a cada ladrilho, o quadro final é idêntico ao inicial: o laço fecha por construção, sem depender da largura da tela nem da altura da linha. */ @keyframes elo-clima-nuvens-desliza { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--passo)), 0, 0); } } /* ---- Acessibilidade ---- prefers-reduced-motion desliga POR COMPLETO: as camadas somem, em vez de ficarem paradas na tela. Mesma decisão da chuva - nuvem congelada é uma mancha, não um fundo. */ @media (prefers-reduced-motion: reduce) { .comnuvens .row-bg-overlay.row-bg-layer::before, .comnuvens .row-bg-overlay.row-bg-layer::after { display: none; } }