2

He copiado el código de un Codepen para crear un PopUp animado.

La caja con el texto aparece y se forma, y cuando la tocamos, desaparece de nuevo con la misma animación que al aparecer.

El problema es que no se interpretarlo y cuando lo creo en local, no funciona la animación de la caja del PopUp. Quiero añadir a un sitio de WordPress me diente un bloque y no se muestra. Primeramente, estoy haciendo pruebas en un sitio web que estoy haciendo localmente en mi PC.

Pero en local no funciona, solo se muestra el texto del <h1>, el resto de texto lo muestra en el fondo, a otro nivel que el <h1>.

Pueden ejecutar el ejemplo, que parece funcionar, pero en Pantalla completa, no funciona.

He traído las mismas link que tiene el Codepen, pero no funciona de ningún modo. ¿que estoy haciendo mal? ¿como hacer que funcione todo el texto por igual?

Este el código exacto que tengo, únicamente he añadido el <h2>y también el contenido del <p> No logro entender por que no funciona la animación y porque no se muestra todos los textos al mismo nivel.

EDITO:

Ya obtuve una respuesta que me ayudo. Gracias al los comentarios de compañeros, he conseguido descubrir que estaba teniendo problemas con con jQuery. Tenia una versión antigua y daba errores. Corregido con la versión 3.7.1, aún tengo problemas con los estilos, ya que no encuentro la forma de hacer una caja uniforme para el modal. Hice varios cambios, siguiendo los consejos de @montes18295. Vean los nuevos cambios, que no son los que busco. No entiendo porque no se puede crear un texto normal, realmente no entiendo nada.

var pieces = 70,
  speed = 1,
  pieceW = 30,
  pieceH = 30;


for (var i = pieces - 1; i >= 0; i--) {
  $('#popup').prepend('<div class="piece" style="width:' + pieceW + 'px; height:' + pieceH + 'px"></div>');
};

function breakGlass(from) {
  if (from === "reverse") {
    $('.piece').each(function () {
      TweenLite.to($(this), speed, { x: 0, y: 0, rotationX: 0, rotationY: 0, opacity: 1, z: 0 });
      TweenLite.to($('#popup h1, #popup h2, #popup h3, #popup h4'), 0.2, { opacity: 1, delay: speed });
    });
    return;
  }

  if (!from) {
    TweenLite.to($('#popup h1, #popup h2, #popup h3, #popup h4'), 0.2, { opacity: 0 });
  } else {
    TweenLite.from($('#popup h1, #popup h2, #popup h3, #popup h4'), 0.5, { opacity: 0, delay: speed });
  }

  $('.piece').each(function () {
    var distX = getRandomArbitrary(-250, 250),
      distY = getRandomArbitrary(-250, 250),
      rotY = getRandomArbitrary(-720, 720),
      rotX = getRandomArbitrary(-720, 720),
      z = getRandomArbitrary(-500, 500);

    if (!from) {
      TweenLite.to($(this), speed, { x: distX, y: distY, rotationX: rotX, rotationY: rotY, opacity: 0, z: z });
    } else {
      TweenLite.from($(this), speed, { x: distX, y: distY, rotationX: rotX, rotationY: rotY, opacity: 0, z: z });
    }
  });
}

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}


$('.piece, h1, h2, h3, h4').click(function () {
  breakGlass();
});
$('.reverse').click(function () {
  breakGlass('reverse');
});

breakGlass(true);
#wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #333;
    overflow: hidden;
}

#popup {
    position: absolute;
    width: 500px;
    height: auto;
    top: 50%; left: 50%;
    margin-left: -150px; margin-top: -100px; 

    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 50px;
 perspective: 800px;
 perspective-origin: 50% 50px;    
}

.piece {
    background: rgba(95,144,222,0.5);
    float: left;
}

#popup h1 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 10%; margin-top: -20px;    
    font-family: 'Noto Sans', sans-serif;
    color: #ccc;
}

#popup h2 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 38%; margin-top: -20px;    
    font-family: 'Noto Sans', sans-serif;
    color: #ccc;
}
#popup h3 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 58%; margin-top: -20px;    
    font-family: 'Noto Sans', sans-serif;
    color: #ccc;
}
#popup h4 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 78%; margin-top: -20px;    
    font-family: 'Noto Sans', sans-serif;
    color: #ccc;
}
.reverse {
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -30px;
    font-family: 'Noto Sans', sans-serif;
    color: #ccc;
    cursor: pointer;
}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
  <link rel="stylesheet" href="popup-vacaciones-3.css">
</head>

<body>
  <div id="wrap">
    <div id="popup">
      <h1>Bienvenidos de nuevo</h1>
        <h2>Hoy traemos cosas nuevas</h2>
        <h3>Disculpa la espera </h3>
        <h4>¡¡Nos vemos pronto con muchas sorpresas!!</h4>
    </div>  
    </div>
  </div>
  <script src="popup-vacaciones-3.js"></script>
</body>

5
  • Para adaptar a todo tipo de dispositivos debes proporcionar al igual que en esta pregunta los problemas que se te presentan, me explico: No se debe poner un código al azar y comentar que el problema es que quieres que se adapte a todo tipo de dispositivos, si no más bien problemas que te has encontrado al intentar adaptarlo, errores etc. Otra cosa es que no sepas por donde empezar para adaptarlo, entonces podrías hacer otra pregunta con dudas sobre el responsive de css etc Commented el 19 jul. a las 11:10
  • Gracias, tienes toda la razón. Pero primero debería de corregir el problema que impide que se ejecute correctamente
    – Gema
    Commented el 19 jul. a las 11:14
  • Cuando hagas una pregunta ten en cuenta que debe ser dudas sobre errores o metodología pero no peticiones de realizar código, espero que esto te ayude: meta.stackexchange.com/help/how-to-ask Commented el 19 jul. a las 11:15
  • Si, la parte en la que pides ayuda con el código porque no sabes el por qué no esta funcionando está bien, era un apunte sobre la parte de adaptar a dispositivos móviles. Por otro lado, ten en cuenta que aunque creas que no puede afectar toda la info que des siempre será de ayuda, en este caso por ejemplo el html completo de tu código. Espero poder ayudarte. Commented el 19 jul. a las 11:17
  • 1
    Ya elimine esta parte de la pregunta. Efectivamente, no vine aqui a que realicen el trabajo para mi. Por lo tanto, tratare de descubrir con la ayuda de todos por que tengo esos errores. Luego ya haré los cambios para que se vea en todos los dispositivos. Gracias una vez más por sus valiosos consejos @montes18295
    – Gema
    Commented el 19 jul. a las 11:19

1 respuesta 1

1

Hay varios problemas. Primero, al h2 y p que has añadido no le has dado un position absolute, no le has dado tampoco el resto de estilos para que se vea igual que el h1 además de no proporcionar la separación de cada elemento respecto al top. He de decir que hay mejores formas de hacer esto pero así por lo menos se soluciona el problema de que se vea a otro nivel.

En cuanto a la funcionalidad, no has añadido los nuevos elementos para que sufran el mismo efecto que el h1.

Esto sería un ejemplo que funciona, ya solo tendrías que jugar con los márgenes de top para posicionar los distintos elementos y con el ancho y alto de la caja.

Si es para una aplicación de producción y se va a utilizar desde móvil, como consejo le daría un par de vueltas al css pero con esto lo que es el problema que presentas estaría solucionado.

var pieces = 70,
    speed = 1,
    pieceW = 30,
    pieceH = 30;


for (var i = pieces - 1; i >= 0; i--) {
  $('#popup').prepend('<div class="piece" style="width:'+pieceW+'px; height:'+pieceH+'px"></div>');
};

function breakGlass(from){
  if (from === "reverse"){
    $('.piece').each(function(){
      TweenLite.to($(this), speed, {x:0, y:0, rotationX:0, rotationY:0, opacity: 1, z: 0});
     TweenLite.to($('#popup h1'),0.2,{opacity:1, delay: speed});
     TweenLite.to($('#popup h2'),0.2,{opacity:1, delay: speed});
     TweenLite.to($('#popup p'),0.2,{opacity:1, delay: speed});
    });
    return;
  }

  if(!from){
TweenLite.to($('#popup h1'),0.2,{opacity:0});
TweenLite.to($('#popup h2'),0.2,{opacity:0});
TweenLite.to($('#popup p'),0.2,{opacity:0});
  } else {
TweenLite.from($('#popup h1'),0.5,{opacity:0, delay: speed});
TweenLite.from($('#popup h2'),0.5,{opacity:0, delay: speed});
TweenLite.from($('#popup p'),0.5,{opacity:0, delay: speed});
  }

  $('.piece').each(function(){
    var distX = getRandomArbitrary(-250, 250),  
        distY = getRandomArbitrary(-250, 250),
        rotY  = getRandomArbitrary(-720, 720),
        rotX  = getRandomArbitrary(-720, 720),
        z = getRandomArbitrary(-500, 500);

    if(!from){
      TweenLite.to($(this), speed, {x:distX, y:distY, rotationX:rotX, rotationY:rotY, opacity: 0, z: z});   
    } else {
      TweenLite.from($(this), speed, {x:distX, y:distY, rotationX:rotX, rotationY:rotY, opacity: 0, z: z}); 
    }               
  });   
}

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}


$('.piece, h1').click(function(){
  breakGlass(); 
}); 
$('.reverse').click(function(){
  breakGlass('reverse');    
}); 

breakGlass(true);
#wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #333;
    overflow: hidden;
}

#popup {
    position: absolute;
    width: 300px;
    height: auto;
    top: 50%; left: 50%;
    margin-left: -150px; margin-top: -100px; 

    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 50px;
   perspective: 800px;
   perspective-origin: 50% 50px;    
}

.piece {
    background: rgba(95,144,222,0.5);
    float: left;
}

#popup h1, #popup h2, #popup p {
position: absolute;
text-align: center;
width: 100%;
font-family: 'Noto Sans', sans-serif;
color: #ccc;
}
#popup h1 {
top: 10%; margin-top: -20px;
}
#popup h2 {
top: 20%; margin-top: 40px;
}
#popup p:nth-of-type(1) {
top: 0%; margin-top: 120px; 
}
#popup p:nth-of-type(2) {
top: 15%; margin-top: 120px;    
}

.reverse {
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -30px;
    font-family: 'Noto Sans', sans-serif;
    color: #ccc;
    cursor: pointer;
}
  <div id="wrap">
    <div id="popup">
        <h1>Bienvenidos de nuevo</h1>
        <h2>Hoy traemos cosas nuevas</h2>
        <p>Disculpa la espera </pp>
        <p>¡¡Nos vemos pronto con muchas sorpresas!!</p>
    </div>  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

11
  • 1
    Que error te muestra? Sería de ayuda que mostrases tu html entero, para ver cuando cargas el script y las librerias js Commented el 19 jul. a las 10:52
  • 1
    Si además del HTML completo puedes comentar la estructura de carpetas donde se encuentra tu archivo HTML y tu archivo JS mejor que mejor, a ver si damos con el problema Commented el 19 jul. a las 11:29
  • 1
    Actualiza entonces el HTML con todo el código porfa Commented el 19 jul. a las 11:33
  • 1
    Como esta enlazado entonces el CSS? Commented el 19 jul. a las 12:02
  • 1
    En el enlace de la librería de Jquery te falta el https: para enlazarlo correctamente Commented el 19 jul. a las 17:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.