Pixel Fórum
Bem vindo ao Pixel Fórum. Se registre-se.
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Conectar-se

Esqueci minha senha

Últimos assuntos
» [Tutorial] Sing Animada
Ter Jan 08, 2013 5:32 pm por Dener

» [Tutorial] Efeito C4D
Ter Jan 08, 2013 5:29 pm por Dener

» [Abertura] - Pixel !
Ter Jan 08, 2013 4:56 pm por Dener

» Quebrando as Regras
Ter Jan 08, 2013 4:07 pm por Dener

» [Servidor] Mu - Walkman
Ter Jan 08, 2013 3:57 pm por Dener

» [Distração] O que gosta de fazer
Ter Jan 08, 2013 3:19 pm por VictorV.

» [Servidor] DDtank TB
Ter Jan 08, 2013 2:27 pm por Dener

» Fun.: We Are Young ft. Janelle Monáe
Ter Jan 08, 2013 2:25 pm por Dener

» Validação Inline De Formulário
Ter Jan 08, 2013 10:48 am por 

Top dos mais postadores
VictorV.
 
Dener
 
Kreitos
 
,Burn
 

Os membros mais ativos da semana

Os membros mais ativos do mês


Barras De Rolagem Estilizadas Com jScrollBar

Ir em baixo

Barras De Rolagem Estilizadas Com jScrollBar

Mensagem por  em Ter Jan 08, 2013 10:47 am


Não é exagero dizer que é um verdadeiro sonho para os webdesigners poderem contar com barras de rolagem estilizadas no site (estou falando sem utilizar flash). Um dos eternos “entraves” para que aquele que mexe com design para web considerar o site como de qualidade, é não apresentar barras de rolagem mais condizentes com a identidade visual do site, mas sim aquele cinza-padrão sem nenhuma questão de ser interessante…

Mas agora essa insatisfação pode acabar, já que é possível estilizar e fazer das barras de rolagem mais bonitas e interessantes utilizando jScrollBar!

Com jScrollBar, você pode mudar o estilo padrão das barras de rolagem do site, podendo fazer aparecer imagens e, usando CSS, estilizar das mais variadas formas possíveis. Tudo de maneira simples e fácil de se implementar.

Usando jScrollBar

Quando você baixar o jScrollBar, vai encontrar no .zip os javascripts e css necessários para fazer tudo funcionar – também há algumas imagens de exemplo para se ter melhor noção de como é o funcionamento do plugin. Insira esses javascripts e css no cabeçalho de seu documento.

É preciso que seus elementos que irão apresentar a barra de rolagem personalizada sigam uma estrutura como essa:

Código:
<!-- Container principal -->
<div class="jScrollbar">

        <!-- Container do conteúdo do scroll -->
        <div class="jScrollbar_mask">
                <p>
                        <!-- Conteúdo -->
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...
                </p>
        </div>

        <!-- Container do slider -->
        <div class="jScrollbar_draggable">
                <!-- Slider -->
                <a href="#" class="draggable"></a>
        </div>
     
        <!-- Lembre-se de dar o clear nos floats -->
        <div class="clr"></div>
</div>

Então, basta inicializar o jScrollBar:

Código:
<script type="text/javascript">                                         
        $(document).ready(function(){
                $('.jScrollbar').jScrollbar();
        });                                       
</script>

Opções do jScrollBar

Existem 2 opções no jScrollBar:

° allowMouseWheel. Permite rolar com a roda do mouse (default ‘true’).
° scrollStep. Velocidade da rolagem quando allowMouseWheel é “true” (default ’10′).

Então, por exemplo, se quiséssemos uma velocidade de rolagem 15 para nosso elemento, teríamos:

Código:
 $(document).ready(function(){
                $('.jScrollbar').jScrollbar({
                scrollStep: 15
                });
        });         

Conclusão sobre o jScrollBar

Utilizando o jScrollBar, é possível fazer com que as barras de rolagem de seu site fiquem com a aparência diferente, podendo, ao usar sua criatividade, dar qualquer visual a suas scrollbars.

Certamente esta é uma excelente maneira para incrementar o design do site e fazer com que as coisas fiquem mais coincidentes com a identidade visual do projeto. Certamente é uma excelente pedida!

Fonte : WebMaster


Pontos Pontos : 0
Data de inscrição Data de inscrição : 01/01/1970

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum