Skip to main content
He añadido una descripción de los cambios y el nuevo código
Origen Enlace
Gema
  • 31
  • 5

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>

Ya obtuve una respuesta que me ayudo. A pesar de la respuesta, implemente los cambios sugerido y sigue mostrando error y no funciona la animación del PopUp. La consola Google muestra:

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; 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});
    });
    return;
  }

  if(!from){
    TweenLite.to($('#popup h1'),0.2,{opacity:0});
  } else {
    TweenLite.from($('#popup h1'),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 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 50%; 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;
}
<body>
<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="//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>
     <script src="popup-vacaciones-copia.js"></script>
     </body>

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>
se eliminaron 80 caracteres en el cuerpo
Origen Enlace
Gema
  • 31
  • 5

Ya obtuve una respuesta que me ayudo. debo añadir que seria necesario adaptar el código a todo tipo de dispositivos. A pesar de la respuesta, implemente los cambios sugerido y sigue mostrando error y no funciona la animación del PopUp. La consola Google muestra:

Ya obtuve una respuesta que me ayudo. debo añadir que seria necesario adaptar el código a todo tipo de dispositivos. A pesar de la respuesta, implemente los cambios sugerido y sigue mostrando error y no funciona la animación del PopUp. La consola Google muestra:

Ya obtuve una respuesta que me ayudo. A pesar de la respuesta, implemente los cambios sugerido y sigue mostrando error y no funciona la animación del PopUp. La consola Google muestra:

Añado código y nuevos detalles
Origen Enlace
Gema
  • 31
  • 5

EDITO:

Ya obtuve una respuesta que me ayudo. debo añadir que seria necesario adaptar el código a todo tipo de dispositivos. A pesar de la respuesta, implemente los cambios sugerido y sigue mostrando error y no funciona la animación del PopUp. La consola Google muestra:

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; 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});
    });
    return;
  }

  if(!from){
    TweenLite.to($('#popup h1'),0.2,{opacity:0});
  } else {
    TweenLite.from($('#popup h1'),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 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 50%; 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;
}
  <body>
<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="//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>
     <script src="popup-vacaciones-copia.js"></script>
     </body>

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});
    });
    return;
  }

  if(!from){
    TweenLite.to($('#popup h1'),0.2,{opacity:0});
  } else {
    TweenLite.from($('#popup h1'),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 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 50%; 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;
}
  <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="//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>

EDITO:

Ya obtuve una respuesta que me ayudo. debo añadir que seria necesario adaptar el código a todo tipo de dispositivos. A pesar de la respuesta, implemente los cambios sugerido y sigue mostrando error y no funciona la animación del PopUp. La consola Google muestra:

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; 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});
    });
    return;
  }

  if(!from){
    TweenLite.to($('#popup h1'),0.2,{opacity:0});
  } else {
    TweenLite.from($('#popup h1'),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 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 50%; 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;
}
<body>
<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="//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>
     <script src="popup-vacaciones-copia.js"></script>
     </body>
Origen Enlace
Gema
  • 31
  • 5
Loading