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>