Interesante página de error 404

  • Autor Autor ultracobra
  • Fecha de inicio Fecha de inicio
ultracobra

ultracobra

Ni
Verificado por Whatsapp
Tengo un modelo de interesante página de error 404 que quiero replicar

404

Si alguien puede darme una directriz para replicarla, si conocen una librería particular o una manera de extraer el código. Yo lo he intentado.

también es interesante que el menú principal de whatsapp web está envuelto en esa misma página de error.

 
Replicar una página de error 404 de otra página web puede requerir ciertos conocimientos de desarrollo web. JavaScript, CSS y HTML serán tus principales herramientas.

Para el diseño de la página puedes usar técnicas de CSS y/o bibliotecas como Bootstrap, tanto para el diseño general como para el menú envolvente.

Para la interactividad y funcionalidad, JavaScript será imprescindible. Sin embargo, a menos que la página original esté usando una biblioteca JavaScript identificable, como jQuery, será difícil saber qué código específico están utilizando.

Intenta examinar el código de la página (puedes hacer clic derecho y seleccionar "Inspeccionar" en la mayoría de los navegadores) para obtener ideas sobre la estructura y las técnicas utilizadas.

Además, hay numerosos tutoriales y recursos disponibles en línea que pueden ayudarte a crear una página de error 404 efectiva y agradable a la vista.
 
En html y usando keyframes, etc, ¿como hago un <div> id 'cont' y que adentro aparesca de abajo izquierda hacia arriba un pequeño <div> id 'uno' a los 2 seg y que no se vea al principio y que antes de llegar arriba se vea de poco a poco tipo efecto 'fade in'. Y en 2 seg después de adentro de <div> id 'cont' aparesca otro pequeño <div> id 'dos' de abajo derecha hacia arriba y que se vea de poco a poco tipo efecto 'fade in'.?
 
Puko dijo:
En html y usando keyframes, etc, ¿como hago un <div> id 'cont' y que adentro aparesca de abajo izquierda hacia arriba un pequeño <div> id 'uno' a los 2 seg y que no se vea al principio y que antes de llegar arriba se vea de poco a poco tipo efecto 'fade in'. Y en 2 seg después de adentro de <div> id 'cont' aparesca otro pequeño <div> id 'dos' de abajo derecha hacia arriba y que se vea de poco a poco tipo efecto 'fade in'.?
Hacer clic para expandir...
Puedes lograr esto utilizando @keyframes en CSS para crear tus propios efectos de animación. Aquí te dejo un ejemplo de cómo podría ser:

HTML: 
<div id="cont">
  <div id="uno"></div>
  <div id="dos"></div>
</div>

CSS: 
#cont {
  position: relative;
  height: 200px; // Ajusta este valor como necesites
}

#uno, #dos {
  width: 50px;  // Ajusta este valor como necesites
  height: 50px;  // Ajusta este valor como necesites
  opacity: 0;
  position: absolute;
  bottom: 0;
}

#uno {
  background-color: red;  // Ajusta este valor como necesites
  animation: aparecer 2s forwards, mover1 2s 2s forwards;
}

#dos {
  background-color: blue;  // Ajusta este valor como necesites
  animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;
}

@keyframes aparecer {
  100% { opacity: 1; }
}

@keyframes mover1 {
  100% { transform: translateY(-150px); }  // Ajusta este valor como necesites
}

@keyframes mover2 {
  100% { right: 0; transform: translateY(-150px); }  // Ajusta este valor como necesites
}

Asegúrate de ajustar los valores según tus necesidades. En este ejemplo, ambos div comienzan invisibles y se van haciendo visibles gracias al efecto fade in (aparecer). Luego, se mueven hacia arriba, uno desde la izquierda y el otro desde la derecha.
 
BotBeta dijo:
Puedes lograr esto utilizando @keyframes en CSS para crear tus propios efectos de animación. Aquí te dejo un ejemplo de cómo podría ser:

HTML: 
<div id="cont">
  <div id="uno"></div>
  <div id="dos"></div>
</div>

CSS: 
#cont {
  position: relative;
  height: 200px; // Ajusta este valor como necesites
}

#uno, #dos {
  width: 50px;  // Ajusta este valor como necesites
  height: 50px;  // Ajusta este valor como necesites
  opacity: 0;
  position: absolute;
  bottom: 0;
}

#uno {
  background-color: red;  // Ajusta este valor como necesites
  animation: aparecer 2s forwards, mover1 2s 2s forwards;
}

#dos {
  background-color: blue;  // Ajusta este valor como necesites
  animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;
}

@keyframes aparecer {
  100% { opacity: 1; }
}

@keyframes mover1 {
  100% { transform: translateY(-150px); }  // Ajusta este valor como necesites
}

@keyframes mover2 {
  100% { right: 0; transform: translateY(-150px); }  // Ajusta este valor como necesites
}

Asegúrate de ajustar los valores según tus necesidades. En este ejemplo, ambos div comienzan invisibles y se van haciendo visibles gracias al efecto fade in (aparecer). Luego, se mueven hacia arriba, uno desde la izquierda y el otro desde la derecha.
Hacer clic para expandir...
Le pusiste en el css los comentarios como si fuera js
 
Puko dijo:
Le pusiste en el css los comentarios como si fuera js
Hacer clic para expandir...
Tienes razón, los comentarios en CSS deben ser del estilo /* comentario */. Mis disculpas por el error, aquí está la corrección:

CSS: 
#cont {
  position: relative;
  height: 200px; /* Ajusta este valor como necesites */
}

#uno, #dos {
  width: 50px;  /* Ajusta este valor como necesites */
  height: 50px;  /* Ajusta este valor como necesites */
  opacity: 0;
  position: absolute;
  bottom: 0;
}

#uno {
  background-color: red;  /* Ajusta este valor como necesites */
  animation: aparecer 2s forwards, mover1 2s 2s forwards;
}

#dos {
  background-color: blue;  /* Ajusta este valor como necesites */
  animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;
}

@keyframes aparecer {
  100% { opacity: 1; }
}

@keyframes mover1 {
  100% { transform: translateY(-150px); }  /* Ajusta este valor como necesites */
}

@keyframes mover2 {
  100% { right: 0; transform: translateY(-150px); }  /* Ajusta este valor como necesites */
}
 
BotBeta dijo:
Tienes razón, los comentarios en CSS deben ser del estilo /* comentario */. Mis disculpas por el error, aquí está la corrección:

CSS: 
#cont {
  position: relative;
  height: 200px; /* Ajusta este valor como necesites */
}

#uno, #dos {
  width: 50px;  /* Ajusta este valor como necesites */
  height: 50px;  /* Ajusta este valor como necesites */
  opacity: 0;
  position: absolute;
  bottom: 0;
}

#uno {
  background-color: red;  /* Ajusta este valor como necesites */
  animation: aparecer 2s forwards, mover1 2s 2s forwards;
}

#dos {
  background-color: blue;  /* Ajusta este valor como necesites */
  animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;
}

@keyframes aparecer {
  100% { opacity: 1; }
}

@keyframes mover1 {
  100% { transform: translateY(-150px); }  /* Ajusta este valor como necesites */
}

@keyframes mover2 {
  100% { right: 0; transform: translateY(-150px); }  /* Ajusta este valor como necesites */
}
Hacer clic para expandir...
al <div> id 'dos' te falto : left:0, aparece igual que el id 'uno' a la izquierda
 
Puko dijo:
al <div> id 'dos' te falto : left:0, aparece igual que el id 'uno' a la izquierda
Hacer clic para expandir...
Mis disculpas por el error anterior. Deberíamos poner right: 0; para el <div id="dos"> para que comience desde la derecha. Aquí está el CSS corregido:

CSS: 
#dos {
  background-color: blue;  /* Ajusta este valor como necesites */
  right: 0;
  animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;
}

Con right: 0;, el div 'dos' aparecerá desde la parte inferior derecha de su contenedor.
 
Se ve increible el error 404. Tambien se ve muy curioso un Bot pidiendo disculpas dos veces... hay sentimientos.
 
Puko dijo:
¿qué hace cada parte de : animation: aparecer 2s 2s forwards, mover2 2s 4s forwards; ?
Hacer clic para expandir...
En "animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;":

1. "animation" es una propiedad abreviada que permite definir varios detalles de la animación en una sola línea.

2. "aparecer" y "mover2" son los nombres de las animaciones que se definen con la regla @keyframes.

3. Los dos primeros "2s" después de "aparecer" y "mover2" son la duración de cada animación, es decir, cada animación tardará 2 segundos en completarse.

4. El segundo par de "2s" es el retraso antes de que comience cada animación. Así, "aparecer" comenzará de inmediato, pero "mover2" no comenzará hasta después de 4 segundos.

5. Por último, "forwards" especifica que el estado final de la animación (como se define en el 100% en las reglas @keyframes) debe mantenerse después de que la animación se haya completado.
 
¿cómo le hago para que 'aparesca' invisible y cuando ya que se mueva se vaya viendo, divido el @keyframes aparecer en 0%, 50% y 100% ?
 
Puko dijo:
¿cómo le hago para que 'aparesca' invisible y cuando ya que se mueva se vaya viendo, divido el @keyframes aparecer en 0%, 50% y 100% ?
Hacer clic para expandir...
Sí, para lograr un efecto de fade-in durante la animación, puedes modificar la regla @keyframes de la siguiente manera:

CSS: 
@keyframes aparecer {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
De esta forma, el elemento comenzará invisible (0% de opacidad), a la mitad del tiempo de la animación estará a la mitad de su opacidad (50% de opacidad), y al final de la animación, estará completamente visible (100% de opacidad).
 
Nos salio igualito ...

*darle click al boton de abajo 'rerun' para que se vea/recarge

 
Puko dijo:
Nos salio igualito ...

Hacer clic para expandir...

¡Excelente trabajo! Se ve muy bien. Es gratificante ver que el código funciona como se esperaba. Si necesitas ayuda con algo más, no dudes en preguntar.
 
Según dicen las páginas 404 deben ser muy funcionales, dar posibilidades de interacción al usuario, ser amigables y lo que se puede, ser atractivas y graciosas...
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

B
Cómo detectar el error 404 en enlaces externos desde mi página
Respuestas
7
Visitas
434
ramones33
R
BdvDesigner
Tutorial: Cómo direccionar Error 404 a Homepage (Wordpress)
Respuestas
9
Visitas
418
BdvDesigner
BdvDesigner
Karasu
Tutorial: Cómo agregar un error 404 personalizado en Blogger
Respuestas
6
Visitas
988
Karasu
Karasu
L
"Error 404", un nombre sin sentido
Respuestas
12
Visitas
603
marjuanm
marjuanm
R
Personaliza tu página de error 404 con Colorlib
Respuestas
1
Visitas
232
Carlos Arreola
C
Atrás
Arriba