Hola espero me puedan ayudar, lo que quiero realizar es mostrar una animación mientras carga alguna pagina del sitio web, para ser mas especifico quiero que haga lo mismo que este sitio https://pixinvent.com/materialize-material-design-admin-template/html/collapsible-menu/, ya he buscado en Internet pero no logro dar con ningún tutorial que lo explique. Espero me puedan ayudar y de antemano gracias.
1 respuesta
<!DOCTYPE html>
<html lang="es">
<head>
<title>Correo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<h1 class="animated infinite bounce delay-2s">Example</h1>
</body>
</html>
hay muchos framework que permiten este tipo de creaciones y que son open source para crear animaciones con CSS te recomiendo Animate.css (https://daneden.github.io/animate.css/), es sencillo de usar y puedes generar animaciones cuando se ejecuta un refresh en su sitio web.
Te completo la información, el enlace que envias en efecto de carga preloader y es totalmente gratuito, con este tutorial puedes crearlo en tu sitio web.
https://ihatetomatoes.net/create-custom-preloading-screen/
Tambien puedes usar https://scrollrevealjs.org para hacer animaciones según el nivel de scroll.
-
como puedes obtener el evento cuando esta cargando y termine de cargar el sitio web? Commented el 31 ene. 2019 a las 20:52
-
Responde con solo enlaces se considera de baja calidad, edita tu aporte y coloca todo lo relevante aquí– user75901Commented el 31 ene. 2019 a las 20:53
-
Para usar Animate.css solo descargas el CSS y lo incluyes en tu carpeta de codumento y en tu HTML y en un agregas la clase animated y el nombre del efecto que quieres utilizar. Commented el 31 ene. 2019 a las 20:56
-
Completo la pregunta de como se usa Animate.css con un ejemplo y te dejo otra libreria con buenos usos de animaciones según el scroll. Commented el 31 ene. 2019 a las 21:04