Ya obtuve una respuesta que me ayudo.
A pesarGracias 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 respuestaversión 3.7.1
, implementeaún tengo problemas con los cambios sugerido y sigue mostrando error yestilos, ya que no funcionaencuentro la animación del PopUpforma de hacer una caja uniforme para el modal. Hice varios cambios, siguiendo los consejos de @montes18295.
La consola Google muestra:Vean los nuevos cambios, que no son los que busco.
No entiendo porque no se puede crear un texto normal, realmente no entiendo nada.
Failed to load resource: net::ERR_FILE_NOT_FOUND
js:8 Uncaught ReferenceError: $ is not defined
for (var i = pieces - 1; i >= 0; i--) {
$('#popup').prepend('<div class="piece" style="width:'+pieceW+'px; height:'+pieceH+'px"></div>');
};
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;' + pieceW + 'px; height:'+pieceH+'px"><' + 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'h1, #popup h2, #popup h3, #popup h4'), 0.2, { opacity: 1, delay: speed });
});
return;
}
if (!from) {
TweenLite.to($('#popup h1'h1, #popup h2, #popup h3, #popup h4'), 0.2, { opacity: 0 });
} else {
TweenLite.from($('#popup h1'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'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: 300px;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: 50%;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>
<p>Disculpa<h3>Disculpa la espera </pp>h3>
<p>¡¡Nos<h4>¡¡Nos vemos pronto con muchas sorpresas!!</p>h4>
</div>
</div>
<script src="//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>div>
</div>
<script src="popup-vacaciones-copia3.js"></script>
</body>