post
Box flutuante de “arraste para ver mais” apontando para a direita com CSS e JS
Publicado em: 12/03/2025 / Atualizado em: 12/03/2025
Neste post eu vou lhe fornecer um código CSS e JavaScript para você adicionar um box flutuante em cima de algum conteúdo que tem que ser arrastado para a direita onde esse box vai ter a mensagem arraste para ver mais e com o efeito de animação.
<div class="scroll-hint" id="scrollHint">
<span>Arraste para ver mais</span> ->
</div>
<style>
.scroll-hint {
position: absolute;
bottom: 600px;
left: 50%;
transform: translate(-50%, -50%);
background: rgb(250, 181, 66);
color: rgba(93, 36, 219);
font-weight: 700;
padding: 24px 40px;
border-radius: 100px;
font-size: 24px;
display: flex;
align-items: center;
gap: 10px;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
animation: moveRight 1s infinite ease-in-out;
}
@keyframes moveRight {
0% { transform: translate(-50%, -50%) translateX(0); }
50% { transform: translate(-50%, -50%) translateX(20px); }
100% { transform: translate(-50%, -50%) translateX(0); }
}
</style>
<script>
const scrollContainer = document.getElementById('ID_DO_CONTAINER_MASTER');
const scrollHint = document.getElementById('scrollHint');
scrollContainer.addEventListener('mousedown', () => {
scrollHint.style.opacity = '0';
setTimeout(() => {
scrollHint.style.display = 'none';
}, 300);
});
scrollContainer.addEventListener('touchstart', () => {
scrollHint.style.opacity = '0';
setTimeout(() => {
scrollHint.style.display = 'none';
}, 300);
});
</script>Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/6110
ID de Referência: 6110
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.