FIXAÇÃO DE TEXTO NA ROLAGEM

Faça experiências com tipografia grande e crie mensagens interativas

Criação de um efeito de fixação

Nosso objetivo é aplicar a fixação a dois objetos de modo que o primeiro fique imediatamente "grudado" no meio da página, enquanto o segundo pare no ponto em que se encontra com o primeiro. Assim:

Configurações necessárias

FIXAÇÃO

Definição da área de fixação do objeto. Isso se refere à área da tela (superior, central ou inferior) em relação à qual o efeito de fixação começa. Observe que as formas no exemplo são fixadas no centro da tela.

DESLOCAMENTO DO ACIONADOR

Esse é o ponto inicial da fixação do objeto em relação à opção de seleção: Parte superior da janela / Centro da janela / Parte inferior da janela.

DISTÂNCIA

Essa é a distância em pixels que o objeto precisa ultrapassar no modo fixo.

Como configurá-lo

Configuração dos parâmetros do objeto

1. Adicione um Zero Block da Block Library à página e vá para o editor de blocos. Coloque dois objetos no espaço de trabalho, verticalmente, um após o outro.

2. Defina os objetos para que tenham a mesma área de fixação. Definimos WINDOW CENTER como exemplo - ambos os objetos são fixados no meio da tela.

3. É melhor escolher o tamanho final de todos os elementos e a distância entre eles no início. O tamanho de cada elemento afetará os parâmetros da animação.

O tamanho das formas é 100x100 px. A distância entre as figuras é de 300px. Distância = Recuo do segundo objeto - Altura do primeiro

Dica: se você não tiver um tamanho-alvo claro em mente, use valores inteiros ou decimais ao definir os tamanhos e o espaçamento dos elementos para facilitar os cálculos.

Configuração dos parâmetros de animação

1. Vamos começar definindo o deslocamento do acionador/ponto inicial da animação.

O ponto é contado em relação à área escolhida - centro da janela.

Comece pelo objeto localizado na parte superior. Isso facilita o cálculo dos pontos de partida para a animação dos objetos restantes. O objeto superior tem 0px definido como o ponto inicial da animação. Isso significa que ele ficará exatamente no centro da tela.

O objeto inferior deve ficar preso quando tocar o objeto superior. Isso significa que seu ponto inicial de animação será inferior à altura do primeiro objeto. Vamos definir um recuo de 100px.

2. Defina a distância.

Essa é a distância que o objeto deve percorrer enquanto estiver no modo fixo. Comece a configurar a animação a partir do objeto inferior. Dessa forma, você se sentirá mais confortável para calcular a distância de "aderência".

Quadrado. Se você observar o exemplo novamente, verá que o quadrado não cobre nenhuma distância no modo fixo - ele simplesmente permanece fixo sob o círculo. Isso significa que precisamos definir a distância como 0px.

Círculo. O círculo no modo fixo percorre a distância para alcançar o quadrado. O efeito de fixação desaparece depois disso, e ambas as figuras podem ser roladas normalmente.

Essencialmente, o círculo precisa chegar à posição do quadrado, mas ele para um pouco mais alto para se fixar nele.

Isso significa 400px - 100px (altura do quadrado) = 300px

Salve as configurações e publique a página. As alterações ficarão visíveis no modo de visualização ou depois que a página for publicada.