⚡
✌️
Criação de um efeito de fixação
Nosso objetivo é aplicar a fixação a dois objetos, de modo que o primeiro se fixe imediatamente no meio da página, enquanto o segundo congela no momento em que toca o primeiro. Algo parecido com isso:
1
Visão geral das configurações
FIXAÇÃO
Isso define a área de fixação do objeto. Refere-se à á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 à configuração selecionada: Parte superior da janela / Centro da janela / Parte inferior da janela.
DISTÂNCIA
Refere-se à distância em pixels que o objeto deve percorrer em um modo fixo.
Como criar o efeito
1
Configuração dos parâmetros do elemento
1. Adicione um Zero Block à página a partir da biblioteca de blocos e vá para as configurações do bloco. 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 - WINDOW CENTER, no nosso caso. Ambos os objetos permanecerão fixos no meio da tela.
3. É melhor escolher o tamanho final de todos os elementos e a distância entre eles de uma só vez. O tamanho de cada elemento afetará os parâmetros de animação.
O tamanho das formas é 100x100 px. A distância entre elas é de 300px. Distância = Recuo do segundo objeto - Altura do primeiro
Dica: se você não tiver uma meta clara de tamanho, use valores inteiros ou decimais ao inserir o tamanho e o espaçamento de um elemento para simplificar os cálculos.
2
Configuração dos parâmetros de animação
1. Vamos começar definindo o Trigger offset / Ponto de início da animação.
O ponto é contado em relação à área escolhida, Window Center.
Comece pelo objeto superior, pois isso facilitará o cálculo dos pontos de início da animação das formas restantes. Seu ponto inicial é 0px, o que significa que o primeiro objeto ficará exatamente no centro da tela.
O objeto inferior deve congelar quando tocar o objeto superior. Isso significa que seu ponto inicial de animação será menor exatamente na altura do primeiro objeto. Vamos definir o recuo aqui para 100px.
O ponto é contado em relação à área escolhida, Window Center.
Comece pelo objeto superior, pois isso facilitará o cálculo dos pontos de início da animação das formas restantes. Seu ponto inicial é 0px, o que significa que o primeiro objeto ficará exatamente no centro da tela.
O objeto inferior deve congelar quando tocar o objeto superior. Isso significa que seu ponto inicial de animação será menor exatamente na altura do primeiro objeto. Vamos definir o recuo aqui para 100px.
2. Vamos definir a distância.
Essa é a distância que o objeto deve percorrer no modo fixo. Ajuste as configurações de animação começando pelo objeto inferior. Isso facilitará o cálculo da distância de "aderência".
Essa é a distância que o objeto deve percorrer no modo fixo. Ajuste as configurações de animação começando pelo objeto inferior. Isso facilitará o cálculo da distância de "aderência".
Quadrado. Se você der outra olhada no exemplo, perceberá que o quadrado não cobre nenhuma distância no modo fixo - ele permanece congelado sob o círculo. Isso significa que precisamos definir a distância como 0px.
Círculo. O círculo cobre a distância até o quadrado no modo fixo. O efeito de fixação desaparece depois disso e ambas as formas continuam a rolagem normalmente.
Essencialmente, o círculo precisa chegar à posição do quadrado e parar mais alto para congelar ao lado dele.
Isso significa 400px - 100px (altura do quadrado) = 300px
Essencialmente, o círculo precisa chegar à posição do quadrado e parar mais alto para congelar ao lado dele.
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.
Este guia foi útil para entender como funciona o efeito sticky?
