FlyIn Rocket

by Bianca Kuehweidner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="flyin">  
   <img src="https://img.icons8.com/bubbles/344/rocket.png" width="172" />
</div>


<div id="message">
  <h1>130 Jahre</h1>
  <img src="https://www.karger.com/images/Karger_White.png" width="150" />
</div>

CSS

body { 
  background-color: #fff;
  font-family: 'Open Sans',Verdana,Arial,sans-serif;
}

#flyin  { 
  width:172px; 
  height:172px; 
  background:transparent; 
  position:absolute; 
  left:-172px;
  top: calc(100vh - 80px);
}

#message { 
  display: none;
  background-color: #004b4f;
  color: #fff;
  height: 180px;
  width: 300px;
  position:absolute; 
  top: calc(50vh - 90px);
  left: calc(50vw - 150px);
  text-align: center;
  box-shadow: 8px 8px 5px #bbb;
}

JavaScript

var currWidth = $(window).width();
var currHeight = $(window).height();

var startPos = -172;
var endPos = (currWidth / 2) + (startPos / 2);
var endPosTop = (currHeight) - (currHeight - 150);



$('#flyin').animate({left: endPos, top: endPosTop}, 1500).toggle('explode', { pieces: 850 }, 1600);


$('#message').delay(3400).fadeIn(2000);