GTA IV Loading screen

gta-iv-loading-screen.markdown

GTA IV Loading screen

A Pen by Ilya Issakin on CodePen.

License.

index.html

<div id="container">
  <div id="nico"><img src="https://rsgames.hs.llnwd.net/o10/ZTM1MTNmMmVjYjRhNWViNWQ3ZmZhOGUyMDI2OGJlYzY=/images/shadows/char_nico.png" /></div>
  <div id="roman"><img src="https://rsgames.hs.llnwd.net/o10/ZTM1MTNmMmVjYjRhNWViNWQ3ZmZhOGUyMDI2OGJlYzY=/images/shadows/char_roman.png"/></div>
  <div id="dmitriy"><img src="https://rsgames.hs.llnwd.net/o10/ZTM1MTNmMmVjYjRhNWViNWQ3ZmZhOGUyMDI2OGJlYzY=/images/shadows/char_dmitri.png"/></div>
</div>

script.js

/* Wath this in fullsize :)
  Im noob, I know it.
 */

$(document).ready(function(){
  $("#container").fadeIn(300);
  $("#nico").delay(300).fadeIn(300).animate({
    bottom:'-40', left:'27%'
  }, 5000, 'linear').fadeOut(300);
  
  $("#roman").delay(5800).fadeIn(300).animate({
    bottom:'-30', left:'57%'
    }, 5000, 'linear').fadeOut(300);
  
  $("#dmitriy").delay(11400).fadeIn(300).animate({
    bottom:'-80', left:'43%'
    }, 5000, 'linear').fadeOut(300);  
  $("#container").delay(17000).fadeOut(300);
  });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

* {
  height:100%;
  width:100%;
  padding:0px;
}
body {
  background:#000;
  overflow:hidden;
  margin:0;
}

#container {
  display:none;
  overflow:hidden;
  position:relative;
  background-image:url(https://rsgames.hs.llnwd.net/o10/ZTM1MTNmMmVjYjRhNWViNWQ3ZmZhOGUyMDI2OGJlYzY=/imgs/Brooklyn-Bridge-Cityscape_2560.jpg);
  -webkit-animation: bgmove 18s infinite linear;
}

#nico, #roman, #dmitriy {
  width:auto;
  height:auto;
  position:absolute;
  display:none;
}

#nico {
  bottom:-70px;
  left:30%;
}
#roman {
  bottom:-60px;
  left:60%;
}
#dmitriy {
  bottom:-110px;
  left:40%;
}

@-webkit-keyframes bgmove {
  0% {background-position:100% 50%;}
  100% {background-position:70% 30%;}
}