19 de setembro de 2024

19 de setembro de 2024

19 de setembro de 2024

19 de setembro de 2024

Interatividade

Interatividade

Interatividade

Interatividade

Como Personalizar a Barra de Rolagem no Framer (Scrollbar)

Neste vídeo, vou te mostrar como personalizar a barra de rolagem (scrollbar) em poucos minutos no Framer. É só copiar o código e ajustar os valores para o estilo que quiser!

Tutorial por

Passo a passo

  1. Copie o código:

<style> 

    /* Chrome, Safari, Edge */

    ::-webkit-scrollbar {
        width: 6px; /* Largura da barra */
    }
    ::-webkit-scrollbar-track {
        background: #FFFFFF20; /* Cor do trilho da barra */
    }
    ::-webkit-scrollbar-thumb { 
        background: #98E705; /* Cor da parte móvel da barra */
        border-radius: 10px; /* Raio da borda da parte móvel da barra */
    }
    ::-webkit-scrollbar-thumb:hover { 
        background: #71AE00; /* Cor da parte móvel da barra no hover */
    }

    /* Firefox */
    @-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: #98E705 #FFFFFF20;
    }
}

</style


  1. Cole no início da tag <head>

Acesse as Configurações > aba General > role a página até Custom Code:


Dessa forma o código será aplicado em todo o site. Caso queira adicionar apenas em alguma página específica, acesse as configurações da página ao invés da aba "General".


  1. Assista o vídeo para aprender como editar as cores!

Domine o Framer e saia na frente do mercado.

Cadastre-se na lista de espera e garanta acesso antecipado para a próxima turma do Framer Bootcamp.

Domine o Framer e saia na frente do mercado.

Cadastre-se na lista de espera e garanta acesso antecipado para a próxima turma do Framer Bootcamp.

Domine o Framer e saia na frente do mercado.

Cadastre-se na lista de espera e garanta acesso antecipado para a próxima turma do Framer Bootcamp.

Domine o Framer e saia na frente do mercado.

Cadastre-se na lista de espera e garanta acesso antecipado para a próxima turma do Framer Bootcamp.