/* * Deslizamento horizontal da imagem de fundo do hero em telas estreitas. * * O PROBLEMA: a foto do hero é alinhada à esquerda. No desktop ela cabe quase * inteira e funciona; no tablet e sobretudo no celular o recorte de `cover` * mostra só a faixa esquerda, e o assunto da foto (as Cataratas) está no * centro. Quem abre no celular vê mato, não cachoeira. * * A CORREÇÃO: depois da animação de entrada, a janela visível caminha da * esquerda em direção ao centro, muito devagar, e para. Uma vez só, sem laço. * Vale pra TODAS as cenas (são todas fotos do mesmo lugar, variando só a * condição do tempo), por isso o seletor é a linha marcada inteira e não uma * cena específica. * * --------------------------------------------------------------------------- * POR QUE background-position-x, E NÃO transform * * O mesmo `.row-bg` já é disputado por dois efeitos do tema, e os dois usam * transform. Confirmado lendo a fonte do Salient 17.0.7, não por dedução: * * ENTRADA (o zoom lento) - CSS do tema, em `.row-bg-wrap[data-bg-animation] * .inner-wrap.using-image`: `transform: scale(1.25)` com transição de 2,5s * (data-bg-animation="zoom-out"), ou o keyframe `row_bg_zoom_out` quando o * body está com data-ajax-transitions="false", que é o caso deste site. É no * .inner-wrap, o PAI do .row-bg. * * PARALLAX (a rolagem) - JavaScript, NectarParallaxScroll (js/src/init.js): * escreve `style.transform = translate3d(0, Ypx, 0) scale(1.005)` direto no * `.row-bg.using-image`, dentro de um requestAnimationFrame, A CADA QUADRO. * Estilo inline reescrito 60 vezes por segundo: não há CSS que sobreviva * disputando transform com isso. * * Ou seja: transform está ocupado nos dois elementos, e no .row-bg de forma * inegociável. background-position estava livre - as únicas escritas de * background-position no JS do tema são de fundo de megamenu e do rodapé em * full-page-rows; nenhuma toca .row-bg (o nectar-liquid só LÊ, e é outro tipo * de bloco). O que o WPBakery põe ali é um valor ESTÁTICO no style inline * (background-position: 0% 0%), que ninguém atualiza depois. * * DOIS GANHOS INESPERADOS de não usar transform: * * 1. A CHUVA DO HERO É FILHA DO .row-bg (ver SELETOR_CHUVA_HERO no PHP). * transform arrastaria as gotas junto com a foto; background-position * move só a imagem de fundo, e a chuva fica onde está. * 2. O parallax já promove o .row-bg a camada própria (`will-change: * transform`), então o repintar do fundo fica confinado a essa camada em * vez de sujar a página inteira - que era a objeção natural a animar uma * propriedade que não compõe na GPU. * * E É `background-position-x`, o longhand, NÃO o atalho: o eixo Y é * configuração da linha no WPBakery (pode ser top, center, um valor qualquer) * e não é assunto deste efeito. Mexer no atalho apagaria o Y junto. * * --------------------------------------------------------------------------- * POR QUE ANIMAÇÃO, E NÃO TRANSIÇÃO * * O valor de partida é um estilo INLINE (`background-position: 0% 0%`, escrito * pelo WPBakery no HTML). Estilo inline vence qualquer folha de estilo normal, * então uma transição nunca sairia do lugar. Declaração de @keyframes está * acima do inline na cascata - a animação vence, a transição não. * * E o keyframe TEM SÓ O `to`, de propósito. Sem o `from`, o quadro inicial é o * valor que o elemento já tem - qualquer que seja o alinhamento configurado na * linha. Se o `from` fosse fixo em 0%, uma linha configurada com outro * alinhamento daria um salto pra esquerda antes de começar a deslizar. * * --------------------------------------------------------------------------- * O !important É OBRIGATÓRIO, E ISSO TEM CAUSA * * O Salient tem uma opção de linha ("disable bg image animation on mobile") * que injeta, exatamente abaixo de 999px: * * .mobile-disable-bg-image-animation .row-bg { animation: none!important; } * * (class-nectar-element-styles.php). É um matador de `animation` no .row-bg na * mesma faixa de tela que este efeito precisa. Se a linha do hero tiver essa * opção ligada, sem !important o deslizamento simplesmente não roda justamente * onde ele existe pra rodar. * * O seletor daqui tem TRÊS classes (. .row-bg-wrap .row-bg) contra * duas do tema, então vence por especificidade e não por ordem de * carregamento - que seria frágil (um plugin de cache reorganiza e o efeito * some em silêncio; foi assim com a largura do ladrilho das nuvens). * * ISSO NÃO RESSUSCITA O ZOOM DE ENTRADA no celular: aquele mora no * .inner-wrap, que este arquivo não toca. Redeclarar `animation` no .row-bg * traz de volta só a animação daqui. * * --------------------------------------------------------------------------- * OS NÚMEROS * * ESPERA 3s. A entrada configurada nas linhas deste site é * data-bg-animation="zoom-out", 2,5s. Com a opção de desligar animação no * mobile ligada, não há entrada nenhuma abaixo de 999px e a espera é só um * respiro. 3s cobre os dois casos. * * DURAÇÃO 180s. Num celular de 390px de largura com o hero em 600px de * altura e uma foto 3:2, `cover` deixa a imagem com 900px: sobram 510px fora * da tela, e caminhar 60% disso são 307px. Em 180s a média é 1,7 px/s. * * CURVA cubic-bezier(0.37, 0, 0.63, 1) - a aproximação em bezier do * ease-in-out de SENO. Parte do repouso, acelera, desacelera e para no * repouso: velocidade zero nos dois extremos, sem partida nem parada seca. * * E É A CURVA DE SENO, não o `ease-in-out` padrão do CSS, porque aqui o que * limita é a VELOCIDADE DE PICO, não a média - e entre as curvas in-out * clássicas a de seno é a mais mansa. Medido varrendo a derivada de cada * uma (pico dividido pela média): seno 1,59x; ease-in-out padrão * (0.42, 0, 0.58, 1) 1,72x; (0.45, 0, 0.55, 1) 1,82x. Quanto mais "in-out" a * curva, mais rápido o meio do percurso precisa ser pra compensar as pontas * lentas - e é justamente o meio que não pode chamar atenção. * * O QUE ISSO DÁ, contra a versão linear de 60s que veio antes: * * média pico * antes (60s linear) 5,1 px/s 5,1 px/s * agora (180s seno) 1,7 px/s 2,7 px/s (47% abaixo do pico antigo) * * O ponto mais rápido do percurso novo é quase metade da velocidade * CONSTANTE da versão anterior - a curva encareceu o meio em 59%, e a * duração três vezes maior pagou isso com folga. * * O PREÇO, dito por inteiro: em 180s o reenquadramento chega devagar. Ao * fim do primeiro minuto a imagem andou 25% do caminho (77px); a metade do * percurso passa aos 90s. Quem abrir e sair em menos de um minuto vê pouca * diferença. É a troca deliberada por imperceptibilidade - e é o número mais * fácil de calibrar depois, pela variável de duração. * * DESTINO 60% da largura. Não 50%: `cover` já corta as bordas, e 60% põe o * centro geométrico da foto um pouco à direita do centro da tela, que é onde * o assunto costuma estar nestas fotos. * * Os quatro saem de variáveis com valor de reserva, então dá pra calibrar * qualquer um deles pelo CSS adicional do WordPress, sem tocar no plugin: * * .elo-clima-hero-bg { * --elo-clima-hero-deslize-duracao: 240s; * --elo-clima-hero-deslize-curva: cubic-bezier(0.3, 0, 0.7, 1); * } * * --------------------------------------------------------------------------- * ACESSIBILIDADE * * prefers-reduced-motion desliga o MOVIMENTO, e entrega o RESULTADO: a imagem * nasce já no destino, sem deslizar. Desligar e deixar em 0% devolveria a essa * pessoa exatamente o enquadramento ruim que motivou o efeito - reduzir * movimento não é abrir mão do enquadramento. */ /* =========================================================================== * DESATIVADO EM 18/08/2026 - O CÓDIGO FICA, O EFEITO NÃO RODA * =========================================================================== * * O deslizamento foi SUBSTITUÍDO por imagens próprias em formato RETRATO * (1080x1920) no celular, centralizadas - ver elo-clima-hero-alinhamento.css e * SUFIXO_MOBILE em class-elo-clima-cena.php. Resolvido na origem: com uma foto * feita pra tela alta, o assunto já nasce no enquadramento certo, e não há mais * o que corrigir com movimento. * * FICA AQUI, e não foi apagado, por escolha do Robson: se um dia uma cena não * tiver versão em retrato, ou se o efeito voltar a ser desejado noutro bloco, * o desenho inteiro (a investigação de qual propriedade estava livre, a * calibragem de velocidade, a curva de seno, o !important que vence a regra do * tema) está preservado acima e nas duas regras abaixo. * * PARA REATIVAR: descomente os dois blocos @media no fim deste arquivo. Não há * mais nada a fazer - o arquivo continua sendo enfileirado normalmente pelo * PHP (Elo_Clima_Cena::enqueue_estilo_deslize), justamente pra reativar ser * uma edição só, num lugar só. * * ATENÇÃO AO REATIVAR: hoje o celular recebe imagem em retrato e * background-position-x: 50% (centralizado) do arquivo de alinhamento. O * deslizamento anima essa mesma propriedade e venceria a regra de lá (animação * está acima de declaração normal na cascata), então os dois efeitos não * convivem sem uma decisão: ou o deslizamento passa a valer só onde não há * retrato, ou o alinhamento do celular sai. Não é conflito silencioso - é * escolha, e precisa ser feita na hora de religar. * =========================================================================== */ /* ---- CÓDIGO INATIVO, PRESERVADO (ver o aviso acima) ---- (* Sem quadro inicial (só o `to`): o ponto de partida é o alinhamento que a linha já tem. Ver a nota sobre isso no cabeçalho. Fica no topo do arquivo, e não dentro da media query, porque nome de animação é global - declarar aqui é o lugar previsível de procurar. *) @keyframes elo-clima-hero-desliza { to { background-position-x: var(--elo-clima-hero-deslize-ate, 60%); } } (* 999px é o limite de tablet do próprio Salient (o mais usado no style.css do tema, e o mesmo da regra de desligar animação no mobile citada no cabeçalho) - acompanhar o tema evita uma faixa de largura com metade de cada comportamento. Acima disso a foto aparece inteira e nada muda. *) @media only screen and (max-width: 999px) { .elo-clima-hero-bg .row-bg-wrap .row-bg { animation: elo-clima-hero-desliza var(--elo-clima-hero-deslize-duracao, 180s) var(--elo-clima-hero-deslize-curva, cubic-bezier(0.37, 0, 0.63, 1)) var(--elo-clima-hero-deslize-espera, 3s) 1 normal forwards !important; } } (* Movimento desligado, resultado entregue: a imagem nasce no destino. *) @media only screen and (max-width: 999px) and (prefers-reduced-motion: reduce) { .elo-clima-hero-bg .row-bg-wrap .row-bg { animation: none !important; (* !important aqui também, e pelo mesmo motivo do resto do arquivo: o valor de partida é estilo inline do WPBakery. *) background-position-x: var(--elo-clima-hero-deslize-ate, 60%) !important; } } */