RSS

Preloader al entrar a una sección

29 Oct

Con unas cuantas líneas de código se puede hacer un efecto bastante agradable para el usuario y con algunos ajustes puedes hacer algo muy elegante que le da un toque a tus sitios al entrar a cada sección de tu sitio web. En mi sitio huguidugui.com se puede ver este efecto. Claro, no soy diseñador xD pero me gustó como quedó. Ademas, la facilidad con la que se puede cambiar el CSS y cambiar la apariencia es genial.

preloader

Lo primero que se debe poner es


<div class="preloader">


<div class="preloader_image">
    </div>


</div>




El div con clase preloader ocupará todo el espacio en pantalla y tendrá algún color y/o/con transparencia y el div de clase preloader_image mostrará la imagen o gif centrada.

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #229fbc;
  z-index: 13000;
  height: 100%;
}

.preloader_image {
  width: 169px;
  height: 124px;
  position: absolute;
  left: 45%;
  top: 50%;
  background: url(ruta/a/tu/imagen.gif) no-repeat 50% 50% transparent;
  margin: -50px 0 0 -50px;
}

Ahora, teniendo cargado jquery, las líneas para mostrar, desvanecer y quitar ambos div es:

jQuery(document).ready(function(){
    jQuery(".preloader").delay(1000).fadeOut("slow").delay(1000, function(){
	  jQuery(this).remove();
    });
});

Solo con estas pocas líneas, este efecto se puede modificar con muchas opciones y queda muy agradale. Espero que sea de utilidad en sus sitios😀

Agradeceré tus comentarios a righugos@gmail.com

 
Deja un comentario

Publicado por en 29 octubre, 2016 en HTML, CSS, JQUERY

 

Etiquetas: , , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: