<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="myModal" class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><img src="http://www.jnvs.in/images/rope.png" alt="rope"></span></button> <div class="modal-content"> <div class="hotAirBalloonMovement"> <div class="animatedBalloon"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri2"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri3"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri3"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri4"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri5"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri6"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri7"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri8"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri9"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri10"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri11"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri12"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri13"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri14"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> <div class="animatedBalloon meri15"> <img alt="" class="horizontalMove" src="http://www.jnvs.in/images/meri-gold.png"> </div> </div> <div class="left-animation"> </div> <div class="right-animation"> </div> <div class="welcome"> Welcome To <br> Jawahar Navodaya Vidyalaya Samiti <br> Inaugurated by Honourable Minister <br> <b>Shri Prakash Javadekar </b><br> <button type="button" class="close btn btn-primary enter" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"> Enter Website</button> </div> </div> </div> </div>

.modal { display:block;} .modal-lg button.close { z-index: 999; background: transparent; position:absolute; top: 0px; right: 30px; opacity:0.8; } .modal-lg { position:relative; width:100%; height:100%; margin:0 !important; } .modal-open .modal { background:#fff; } .modal-content { width:100%; height:100%; box-shadow:none; border:none; text-align:center; } .welcome { color:#073881; text-align:center; font-size:20px; padding-top:15%; } .left-animation, .right-animation { position:absolute; top:0; left:0; background: url(http://www.jnvs.in/images/intro.jpg) no-repeat center center; background-size: cover; width:50%; height:100%; animation: left-animation 3s 3s ease-in forwards; } .right-animation { left:auto; right:0; animation: right-animation 3s 3s ease-in forwards; } @keyframes left-animation { 0%{ width:50%; } 100%{ width:10%; } } @keyframes right-animation { 0%{ width:50%; } 100%{ width:10%; } } .hotAirBalloonMovement { width: 100%; height: 100%; position: absolute; bottom: 0; overflow:hidden; } .hotAirBalloonMovement .animatedBalloon, .hotAirBalloonMovement .meri2, .hotAirBalloonMovement .meri3, .hotAirBalloonMovement .meri4, .hotAirBalloonMovement .meri5, .hotAirBalloonMovement .meri6, .hotAirBalloonMovement .meri7, .hotAirBalloonMovement .meri8, .hotAirBalloonMovement .meri9, .hotAirBalloonMovement .meri10, .hotAirBalloonMovement .meri11, .hotAirBalloonMovement .meri12, .hotAirBalloonMovement .meri13, .hotAirBalloonMovement .meri14, .hotAirBalloonMovement .meri15 { display:inline-block; position:absolute; top:-10%; -webkit-animation:hotAirBalloonMovement 25s linear 1s infinite; animation:hotAirBalloonMovement 25s linear 1s infinite; } .hotAirBalloonMovement .meri2 { left:10%; -webkit-animation:meri2 25s linear 8s infinite; animation:meri2 25s linear 8s infinite; } .hotAirBalloonMovement .meri3 { left:17%; -webkit-animation:meri2 25s linear 18s infinite; animation:meri2 25s linear 18s infinite; } .hotAirBalloonMovement .meri4 { left:24%; -webkit-animation:meri2 25s linear 3s infinite; animation:meri2 25s linear 3s infinite; } .hotAirBalloonMovement .meri5 { left:30%; -webkit-animation:meri2 25s linear 3s infinite; animation:meri2 25s linear 3s infinite; } .hotAirBalloonMovement .meri6 { left:37%; -webkit-animation:meri2 25s linear 4s infinite; animation:meri2 25s linear 4s infinite; } .hotAirBalloonMovement .meri7 { left:44%; -webkit-animation:meri2 25s linear 9s infinite; animation:meri2 25s linear 9s infinite; } .hotAirBalloonMovement .meri8 { left:50%; -webkit-animation:meri2 25s linear 15s infinite; animation:meri2 25s linear 15s infinite; } .hotAirBalloonMovement .meri9 { left:57%; } .hotAirBalloonMovement .meri10 { left:64%; -webkit-animation:meri2 25s linear 10s infinite; animation:meri2 25s linear 10s infinite; } .hotAirBalloonMovement .meri11 { left:71%; } .hotAirBalloonMovement .meri12 { left:78%; -webkit-animation:meri2 25s linear 7s infinite; animation:meri2 25s linear 7s infinite; } .hotAirBalloonMovement .meri13 { left:85%; } .hotAirBalloonMovement .meri14 { left:40%; -webkit-animation:meri2 25s linear 17s infinite; animation:meri2 25s linear 17s infinite; } .hotAirBalloonMovement .meri15 { left:60%; -webkit-animation:meri2 25s linear 16s infinite; animation:meri2 25s linear 16s infinite; } @-webkit-keyframes hotAirBalloonMovement { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @-moz-keyframes hotAirBalloonMovement { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @keyframes hotAirBalloonMovement { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @-webkit-keyframes meri2 { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @-moz-keyframes meri2 { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } @keyframes meri2 { 0% { top:0; opacity:0;} 10% {top:10%; opacity:1;} 20% {top:20%; opacity:1;} 30% {top:30%; opacity:1;} 40% {top:40%; opacity:1;} 50% {top:50%; opacity:1;} 60% {top:60%; opacity:1;} 70% {top:70%; opacity:1;} 80% {top:80%; opacity:1;} 90% {top:90%; opacity:1;} 100% { top:100%; opacity:0;} } .enter { color: #f33 !important; position: absolute !important; top: 85% !important; left: 50%; z-index: 1 !important; width: 120px; margin-left: -67px; }