Cambié un poco los keyframes y ya se ve un poco más fluida la animación
Visión general y requisitos del curso
Hagamos un landing con super poderes CSS
Estructura del proyecto
Maquetación y animaciones con CSS
Maquetación del loader
Layout con CSS Grid
Navbar
Contenido principal
Contenido lateral
Footer
Maquetación con JavaScript
Cómo acceder al DOM con JavaScript
Modal: evento click con JavaScript
Slider
Continúa aprendiendo
¿Quieres aprender animaciones con JavaScript?
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aportes 17
Preguntas 5
Ordenar por:
HTML + CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height:100vh;
margin:0;
overflow:hidden; /* hace que lo que esta dentro del body no sobresalga */
}
.page {
position: relative;
height: 100vh;
}
.container{
z-index:1;
position: absolute;
}
.loader {
background: pink;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 3;
animation: loader 10s linear forwards;
}
@keyframes loader {
0%{
opacity: 1;
visibility: visible;
}
95%{
opacity: 1;
visibility: visible;
}
100%{
opacity: 0;
visibility: hidden;
}
}
.loader div {
background: yellowgreen;
width: 40px;
height: 40px;
border-radius: 50%;
margin: 20px;
transform: scale(0);
animation: scaling 1500ms ease-in-out infinite;
}
.loader div:nth-child(1){
animation-delay: 0.2s;
}
.loader div:nth-child(2){
animation-delay: 0.4s;
}
.loader div:nth-child(3){
animation-delay: 0.6s;
}
@keyframes scaling {
0%, 100%{
transform: scale(1.3);
}
50%{
transform: scale(.8);
}
}
</style>
</head>
<body>
<div class="page">
<!-- Main Content -->
<section class="container">
<nav class="navbar">
<div class="navbar__content">
<img src="" alt="">
<ul>
<li><a href="#">EXCLUSIVOS</a></li>
<li><a href="#">NUEVOS</a></li>
<li><a href="#">GIFT CARDS</a></li>
<li><a href="#">FIND A STORE</a></li>
</ul>
</div>
</nav>
<section class="main-content">
<!-- <p>Diseña tu</p>
<h1>Súper Héroe!</h1> -->
<h1><span>Diseña tu</span> Súper Héroe!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum alias molestiae illum pariatur itaque numquam, ab voluptates modi nisi cumque magni ad possimus voluptatibus repudiandae dicta laudantium natus fugiat laboriosam?</p>
</section>
<section class="side-content">
<p>Superman</p>
<img src="" alt="">
<div></div>
</section>
<section>
<div>
<img src="" alt="">
</div>
<div>
<img src="" alt="">
</div>
<div>
<img src="" alt="">
</div>
</section>
</section>
<!-- Loader -->
<section class="loader">
<div></div>
<div></div>
<div></div>
</section>
<!-- Modal -->
<section></section>
</div>
</body>
</html>
Sin necesidad de posicionar relativamente a los demás contenedores he colocado un position fixed con posición expandida al loader
.loader {
background-color: white;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left:0;
right:0;
bottom: 0;
z-index: 3;
}
Recomendación: Vean primero los cursos de programación básica o vengan con algo de conocimiento o si no se les va a dificultar entender este curso.
Antes de esta clase, no entendía mucho para que serviría el animation-delay pero ahora se me abrió la mente, gracias
me gusto la clase
Por si alguien le interesa así se vería con Sass, lo estoy aprendiendo se que se podrían mejorar algunas cosas.
$heigth : 100vh;
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
height: $heigth;
overflow: hidden;
}
.page {
position: relative;
height: $heigth;
}
.root {
position: absolute;
z-index: 1;
}
.loader {
background: white;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 3;
animation: loader 3s linear forwards;
gap: 15px;
div {
background-color: lightpink;
width: 40px;
height: 40px;
border-radius: 50%;
transform: scale(0);
animation: scaling 2s ease-in-out infinite;
&:nth-child(1) {
animation-delay: 0.1s;
}
&:nth-child(2) {
animation-delay: 0.3s;
}
&:nth-child(3) {
animation-delay: 0.5s;
}
}
}
@keyframes loader {
0% {
opacity: 1;
visibility: visible;
}
95% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
@keyframes scaling {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
100% {
transform: scale(0.2);
}
}
Como hacer una animación sencilla pero agradable, lo mejor sin librerias, genial!! 🤩🤩
Maquetación del loader
body {
height: 100vh;
margin: 0;
overflow: hidden;
}
.page {
position: relative;
height: 100vh;
}
.container {
position: absolute;
z-index: 1;
}
/* animacion del cargue de pantalla */
.loader {
background: aqua;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 3;
animation: loader 2.3s linear forwards;
}
@keyframes loader {
0% {
opacity: 1;
visibility: visible;
}
95% {
oppacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
/* Para crear esferas de cargar se ve genial */
.loader div {
background: white;
width: 40px;
height: 40px;
border-radius:50%;
margin: 10px;
transform: scale(0);
animation: scaling 2.3s ease-in-out infinite;
}
.loader div:nth-child(1) {
animation-delay: 0.2s;
}
.loader div:nth-child(2) {
animation-delay: 0.4s;
}
.loader div:nth-child(3) {
animation-delay: 0.6s;
}
@keyframes scaling {
0%, 100%, {
transform: scale(0.2);
}
40% {
transform: scale(1);
}
50% {
transform: scale(1);
}
}
Maquetación del Loader
Código: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/3-maquetacion-loader
Me gusto el método que útilizo la profesora para hacer la animacion del scaling. Utilizando keyframes, ya se empiezan a aplicar los conceptos de cursos anteriores 😄
Keyframes ayudan mucho.
Muy interesante era aprender con este clase como hacer un loader. No sabia que se puede hacerlo en una manera tan rapida.
Tambien informacion que se puede usar child y animation-delay para animaciones es muy util.
Profe, que crack estoy fascinado como algo simple puede dar una gran vista con la animación
Excelente clase ❤️
Estoy comenzando y aún me cuesta entender el por qué de cada cosa. Pero lo iré aprendiendo.
Está quedando suave
asi me queda
super!!
.loader div{
background: blue;
width: 40px;
height: 40px;
border-radius: 50%;
margin: 10px;
transform: scale(0);
animation: scaling 1s ease-in-out infinite;
}
/* La pseudo-clase :nth-child() de CSS coincide con uno o más elementos en función de su posición entre un grupo de hermanos. */
.loader div:nth-child(1){
animation-delay: 0.1s;
}
.loader div:nth-child(2){
animation-delay: 0.2s;
}
.loader div:nth-child(3){
animation-delay: 0.3s;
}
@keyframes scaling{
0%, 100%{
transform: scale(0.2);
}
40%{
transform: scale(1);
}
50%{
transform: scale(1);
}
}
Tan facil y uno buscando librerias para loaders jajajaj
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.