preload-image animation

Tutorials of (Preload-image animation) by Christophe barbier

<!DOCTYPE html>
<html >
<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/ */
/* Downloaded from https://www.codeseek.co/ */
$(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);
})

This awesome code ( preload-image animation ) is write by Christophe BARBIER, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Christophe BARBIER