Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Personalizar la barra de desplazamiento con jQuery





Ya hablemos de personalizar la barra de desplazamiento solamente con CSS pero está vez lo haremos con una librería jQuery, que se denomina Nicescroll, la mejora será sustancial, porque el efecto que te proporciona dicha librería, es la siguiente: la barra de desplazamiento baja y sube suavemente, y cuando el usuario deja de usar la rueda del mouse o ratón, desaparece por arte de magia. Es totalmente personalizable en cuanto a colores se refiere, podrás cambiar el fondo del scroll y el botón de desplazamiento, al color deseado. No me adentro en más florituras porque una demo vale más que mil palabras. Seguidamente, la demo:



Demo!



La barra cómo habéis podido observar está en la parte derecha, de mi página web de Juegos Online sí os gusta el efecto y lo queréis para vuestra web o blog, no esperéis más y añadirla, para darle un toque de elegancia y sofisticación, y sobretodo de originalidad. Deberéis de colocar dicha barra antes del tag o etiqueta que verás:


</head>

<script src='https://dl.dropboxusercontent.com/u/48457927/nicescrollaizumblog.js'/>
<script>
 $(document).ready(
  function() { 
    $(&quot;html&quot;).niceScroll({background:&quot;#ffffff&quot;,cursorcolor:&quot;#7e0686&quot;,cursorwidth:&quot;10px&quot;,scrollspeed:&quot;90&quot;,cursorborder:&quot;0px solid #fff&quot;});
  }
);
</script>



  • Si tienes instalado o puesto Prototype, Scriptaculous o Mootools, en tu plantilla, te generará conflictos con las librerías de jQuery y no se verá el efecto, entonces omite el código anterior, y coloca en su lugar el siguiente código que visualizas:


<script src='https://dl.dropboxusercontent.com/u/48457927/nicescrollaizumblog.js'/>
<script>
jQuery.noConflict(); 
jQuery(document).ready(
  function() { 
    jQuery(&quot;html&quot;).niceScroll({background:&quot;#ffffff&quot;,cursorcolor:&quot;#7e0686&quot;,cursorwidth:&quot;10px&quot;,scrollspeed:&quot;90&quot;,cursorborder:&quot;0px solid #fff&quot;});
  }
);
</script>


  • Por último sólo te queda personalizar la barra de desplazamiento o el scroll a tu gusto, cambiando los colores hexadecimales del fondo de la barra, el botón de desplazamiento, y también el borde. Bueno, espero que os haya gustado este efecto con jQuery.



Aizum Blog, miércoles, mayo 08, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9