Autor Tema: ¿Cómo crear una animación al entrar a una página web? Lenguajes HTML - CSS - JS  (Leído 298 veces)

Guz

  • Sin experiencia
  • *
  • Mensajes: 3
    • Ver Perfil
Hola a todos, buen día, me gustaria saber si la animación de la página que les mostraré a continuación es posible hacerla solo con html, css y js, o si  requiere otros componentes. La página es esta: https://www.portal.uda.cl/   y es de una universidad si no me equivoco.

Lo que quiero hacer es esa animación que tienes cuando entras y se ve por unos momentos el nombre y el logo de la universidad.

Sí es posible hacerla me podrian decir como por favor o pasarme una guía o tutorial.

Gracias :D
« Última modificación: 03 de Mayo 2021, 19:01 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2635
    • Ver Perfil
Buenas, no parece una animación difícil. Da la impresión de que para una persona con conocimientos se puede hacer con JavaScript sin demasiado problema. Pero obviamente no puedes manejar JavaScript si no conoces CSS, y no puedes manejar CSS si no conoces HTML. El orden recomendado para el aprendizaje sería HTML primero, luego CSS y luego JavaScript. Y luego un lenguaje del lado del servidor como PHP. Pero aprender todo esto puede llevar mucho tiempo, si simplemente quieres una animación hay muchos códigos disponibles en internet sin necesidad de seguir toda la línea de aprendizaje.

Tienes tutoriales de HTML, CSS, JavaScript y otros lenguajes en https://aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86

En este caso, para esta animación posiblemente puedas lograr el efecto simplemente tomando el código y cambiándolo para poner los textos o imágenes que a tí te interese. Aquí lo he hecho en cinco minutos poniéndole otros textos:

Código: [Seleccionar]
<!DOCTYPE html>
<head>

  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <title>Ejemplo aprenderaprogramar.com</title>

  <link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/fullpage/fullpage-4de243a40619a967c0bf13b95e1ac6f8de89d943b7fc8710de33f681fe287604.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic,900,900italic&display=swap" rel="stylesheet" />

  <style>
    html { font-size: 15px; }
    html, body { margin: 0; padding: 0; min-height: 100%; }
    body { height:100%; display: flex; flex-direction: column; }
    .referer-warning {
      background: black;
      box-shadow: 0 2px 5px rgba(0,0,0, 0.5);
      padding: 0.75em;
      color: white;
      text-align: center;
      font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
      line-height: 1.2;
      font-size: 1rem;
      position: relative;
      z-index: 2;
    }
    .referer-warning h1 { font-size: 1.2rem; margin: 0; }
    .referer-warning a { color: #56bcf9; } /* $linkColorOnBlack */
  </style>
</head>

<body onLoad="talk()" >


<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

 
 
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
body {
  background-color: #fff
}

.home {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url(https://aprenderaprogramar.com/images/stories/Humor/cabecerahumorreducida.jpg);

  background-position: center center;
}


/* ====================================
Navigation
==================================== */

.overlay-navigation {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.2);
  display: none;
  opacity: 0;
}

nav,
nav ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  flex-basis: 20%;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  display: none;
}

nav li a {
  position: relative;
  top: 46%;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Work sans', sans-serif;
  font-weight: 300;
  letter-spacing: 4px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 1.9rem;
  opacity: 0;
}

nav li a:before {
  content: '';
  width: 70px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 100;
  transform: translateX(-100%);
  opacity: 0;
  transition: all .2s linear;
}

nav li a:after {
  content: attr(data-content);
  font-size: 1.2rem;
  transition: all .2s linear;
  opacity: 0;
  position: absolute;
  z-index: 100;
  color: #fff;
  display: block;
  margin-right: auto;
  margin-left: auto;
  left: 10;
  right: 10;
  bottom: -150px;
  text-transform: none;
  font-family: 'Open sans', sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
}

nav li a:hover:before {
  transform: translateX(0);
  opacity: 1;
}

nav li a:hover:after {
  transform: translateY(15px);
  opacity: 1;
}

nav li:nth-of-type(1) {
  background-color: #1ABC9C
}

nav li:nth-of-type(2) {
  background-color: #3498DB
}

nav li:nth-of-type(3) {
  background-color: #9B59B6
}

nav li:nth-of-type(4) {
  background-color: #f6c23e
}

nav li:nth-of-type(5) {
  background-color: #E74C3C
}


/* ====================================
Burger king
==================================== */

.open-overlay {
  position: absolute;
  right: 5rem;
  top: 3.2rem;
  z-index: 100;
  width: 34px;
  display: block;
  cursor: pointer;
}

.open-overlay span {
  display: block;
  height: 1px;
  background-color: #fff;
  cursor: pointer;
  margin-top: 8px;
}

.animate-top-bar {
  -webkit-animation: animate-top-bar .6s linear 1 both;
  animation: animate-top-bar .6s linear 1 both
}

.animate-bottom-bar {
  -webkit-animation: animate-bottom-bar .6s linear 1 both;
  animation: animate-bottom-bar .6s linear 1 both
}

.animate-middle-bar {
  -webkit-animation: animate-middle-bar .6s linear 1 both;
  animation: animate-middle-bar .6s linear 1 both
}

.animate-out-top-bar {
  -webkit-animation: animate-out-top-bar .6s linear 1 both;
  animation: animate-out-top-bar .6s linear 1 both
}

.animate-out-bottom-bar {
  -webkit-animation: animate-out-bottom-bar .6s linear 1 both;
  animation: animate-out-bottom-bar .6s linear 1 both
}

.animate-out-middle-bar {
  -webkit-animation: animate-out-middle-bar .6s linear 1 both;
  animation: animate-out-middle-bar .6s linear 1 both
}


/* ====================================
Animation keyframes
==================================== */

@-webkit-keyframes animate-top-bar {
  0% {
    background-color: #fff;
  }
  50% {
    transform: translateY(9px)
  }
  80% {
    transform: translateY(5px);
    background-color: #fff
  }
  100% {
    transform: translateY(0);
    background-color: #34548B;
  }
}

@keyframes animate-top-bar {
  0% {
    background-color: #fff;
  }
  50% {
    transform: translateY(9px)
  }
  80% {
    transform: translateY(5px);
    background-color: #fff
  }
  100% {
    transform: translateY(0);
    background-color: #34548B;
  }
}

@-webkit-keyframes animate-bottom-bar {
  0% {
    background-color: #fff;
  }
  50% {
    transform: translateY(-9px)
  }
  80% {
    transform: translateY(-5px);
    background-color: #fff;
  }
  100% {
    transform: translateY(0);
    background-color: #34548B;
  }
}

@keyframes animate-bottom-bar {
  0% {
    background-color: #fff;
  }
  50% {
    transform: translateY(-9px)
  }
  80% {
    transform: translateY(-5px);
    background-color: #fff;
  }
  100% {
    transform: translateY(0);
    background-color: #34548B;
  }
}

@-webkit-keyframes animate-middle-bar {
  0% {
    background-color: #fff;
  }
  80% {
    background-color: #fff;
  }
  100% {
    background-color: #34548B;
  }
}

@keyframes animate-middle-bar {
  0% {
    background-color: #fff;
  }
  80% {
    background-color: #fff;
  }
  100% {
    background-color: #34548B;
  }
}

@-webkit-keyframes animate-out-top-bar {
  0% {
    background-color: #34548B
  }
  50% {
    transform: translateY(9px)
  }
  80% {
    transform: translateY(5px);
    background-color: #34548B
  }
  100% {
    transform: translateY(0);
    background-color: #FFF;
  }
}

@keyframes animate-out-top-bar {
  0% {
    background-color: #34548B
  }
  50% {
    transform: translateY(9px)
  }
  80% {
    transform: translateY(5px);
    background-color: #34548B
  }
  100% {
    transform: translateY(0);
    background-color: #FFF;
  }
}

@-webkit-keyframes animate-out-bottom-bar {
  0% {
    background-color: #34548B
  }
  50% {
    transform: translateY(-9px)
  }
  80% {
    transform: translateY(-5px);
    background-color: #34548B;
  }
  100% {
    transform: translateY(0);
    background-color: #FFF;
  }
}

@keyframes animate-out-bottom-bar {
  0% {
    background-color: #34548B
  }
  50% {
    transform: translateY(-9px)
  }
  80% {
    transform: translateY(-5px);
    background-color: #34548B;
  }
  100% {
    transform: translateY(0);
    background-color: #FFF;
  }
}

@-webkit-keyframes animate-out-middle-bar {
  0% {
    background-color: #34548B
  }
  80% {
    background-color: #34548B;
  }
  100% {
    background-color: #fff;
  }
}

@keyframes animate-out-middle-bar {
  0% {
    background-color: #34548B
  }
  80% {
    background-color: #34548B;
  }
  100% {
    background-color: #fff;
  }
}

.home a {
  font-family: "Work Sans", sans-serif;
  color: #222;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  position: absolute;
  z-index: 10;
  top: 50px;
  left: 50px;
  padding-bottom: 3px;
  border-bottom: 1px solid #222;
}

@media (max-width: 640px) {
  nav ul {
    flex-direction: column;
  }
  nav ul li {
    height: 20%;
  }
  nav ul li a {
    font-size: 18px;
  }
  nav li a:after {
    font-size: 0.6rem;
    bottom: -25px;
  }
  nav li a:hover:after {
    transform: translateY(0);
  }
  .open-overlay {
    right: 1rem;
  }
  nav li a:before {
    width: 25px;
  }
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>$("#open-overlay").trigger('click');</script>
  <div class="overlay-navigation">
  <nav role="navigation">
    <ul>
      <li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192" data-content="Si no persigues lo que quieres, nunca lo tendrás. Si no vas hacia delante, siempre estarás en el mismo lugar... Nora Roberts.">APRENDER</a></li>
      <li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203" data-content="El éxito no es un accidente, es trabajo duro, perseverancia, aprendizaje, estudio y lo más importante de todo, amor por lo que estás haciendo o aprendiendo a hacer... Edson Arantes do Nascimento.">A</a></li>
      <li><a href="#" data-content="A partir del segundo semestre 2021">PROGRAMAR</a></li>
      <li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193" data-content="Acepta la responsabilidad en tu vida. Se consciente de que serás tú quien te llevará a donde quieres ir, nadie más... Les Brown.">PUNTO</a></li>
      <li><a href="https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206" data-content="Si deseas conocer el estado actual de tu deuda puedes ingresar a esta opción, cabe destacar que no debes ser Egresado o Estudiante, si eres estos últimos ingrese a su correspondiente menú.">COM</a></li>
    </ul>
  </nav>
</div>

<section class="home">
   
  <div id="open-overlay" class="open-overlay">
   
  </div>
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js'></script>
<script id="rendered-js" >
function talk() {
  $('.open-overlay').css('pointer-events', 'none');
  var overlay_navigation = $('.overlay-navigation'),
  top_bar = $('.bar-top'),
  middle_bar = $('.bar-middle'),
  bottom_bar = $('.bar-bottom');

  overlay_navigation.toggleClass('overlay-active');
  if (overlay_navigation.hasClass('overlay-active')) {

    top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
    middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
    bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
    overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
    overlay_navigation.velocity('transition.slideLeftIn', {
      duration: 300,
      delay: 0,
      begin: function () {
        $('nav ul li').velocity('transition.perspectiveLeftIn', {
          stagger: 150,
          delay: 0,
          complete: function () {
            $('nav ul li a').velocity({
              opacity: [1, 0] },
            {
              delay: 10,
              duration: 140 });

            $('.open-overlay').css('pointer-events', 'auto');
          } });

      } });


  } else {
    top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
    middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
    bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
    overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
    overlay_navigation.velocity('transition.slideLeftIn', {
      duration: 300,
      delay: 0,
      begin: function () {
        $('nav ul li').velocity('transition.perspectiveLeftIn', {
          stagger: 150,
          delay: 0,
          complete: function () {
            $('nav ul li a').velocity({
              opacity: [1, 0] },
            {
              delay: 10,
              duration: 140 });

            $('.open-overlay').css('pointer-events', 'auto');
          } });

      } });


  }
};
    </script>

 

  </div>
</body>
</html>

Salu2

Guz

  • Sin experiencia
  • *
  • Mensajes: 3
    • Ver Perfil
Muchas gracias
« Última modificación: 03 de Mayo 2021, 21:46 por Ogramar »

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".