preload-image animation

In this example below you will see how to do a preload-image animation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kri2sis, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kri2sis ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>preload-image animation</title>
  
  
  
  
  
</head>

<body>

  <div id="wrapper">
    <div id="preloader">
    <div id="preloader2">
    <div id="preloader3"></div>	
    </div>
    </div>
     <div id="annonce">Bienvenue sur Nympheae.fr</div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kri2sis/preload-image-animation-aBCsv */
$(document).ready(function(){
var wrapper = $('#wrapper');
var loader = $('#preloader');
var loader2 = $('#preloader2');
var loader3 = $('#preloader3');
var sentence = $('#annonce');
sentence.html(sentence.text().replace(/()\w/g, '<span>$&</span>'));
var tableLoder = [loader,loader2,loader3];
var wrapperWdth = (document.body.clientWidth);
var wrapperheight = (document.body.clientHeight);
var tl = new TimelineMax();
$(wrapper).width(wrapperWdth);
$(wrapper).height(wrapperheight);
$('body').css({padding:0,margin:0,backgroundColor:'#000'});
$('#annonce > span').css('display','inline-block');

tl.set(wrapper,{css:{position:'absolute',width:'100%',height:'100%',backgroundColor:'whitesmoke',zIndex:'4500',opacity:'0.9'}})
.set(loader,{css:{borderTop:'5px solid #c0b688',width:'150px',height:'150px',position:'absolute',left:'50%',marginLeft:'-75px',top:'50%',marginTop:'-75px',borderRadius:'50%',zIndex:'5000'}})
.set(loader2,{css:{borderTop:'4px solid #a7a8aa',width:'130px',height:'130px',position:'absolute',left:'50%',marginLeft:'-65px',top:'50%',marginTop:'-65px',borderRadius:'50%',zIndex:'5000'}})
.set(loader3,{css:{borderTop:'3px solid #dfd49d',width:'110px',height:'110px',position:'absolute',left:'50%',marginLeft:'-55px',top:'50%',marginTop:'-55px',borderRadius:'50%',zIndex:'5000'}})
.set(sentence,{css:{width:'900px',height:'50px',position:'absolute',left:'50%',marginLeft:'-350px',top:'50%',marginTop:'-125px',zIndex:'5000',textTransform:'uppercase',fontSize:'42px',color:'#c0b688'}})



	tl.to(tableLoder,2,{rotation:360,repeat:1,opacity:1},'here')
	.staggerFrom($('#annonce > span'), 0.3,{autoAlpha:0,rotation:-90},0.1,'here')
	.staggerTo([tableLoder,wrapper],2,{opacity:0},0.2);
})

Comments