Box flutuante de “arraste para ver mais” apontando para a direita com CSS e JS - Bruno Devx - BR Criativus

post #6110

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

Categorias: BlogCSSJavaScript (JS)JS

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:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=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.

Clique aqui e entre em contato