<body>
<header>
<p class="desinks">www.alexandre-petit.com</p>
<p class="petit">Alexandre PETIT</p>
</header>
<div id="loader">
<div id="header"></div>
<div id="header2"></div>
<div id="header3"></div>
</div>
<div id="home">
<div id="cercle1"></div>
</div>
</body>@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
body {
margin: 0px;
background-color: #333;
font-family: 'Open Sans Condensed', sans-serif;
color:white;
text-align:center;
}
p {
font-weight:light;
font-size:20px;
color:white;
}
.petit {
font-size:15px;
margin-top:-20px;
}
#header {
position: fixed;
top: 50%;
margin-top:-50px;
height: 100px;
width: 100px;
left:50%;
margin-left:-50px;
background-color:white;
border-radius:50%;
}
#header2 {
position: fixed;
top: 50%;
margin-top:-50px;
height: 100px;
width: 100px;
left:50%;
margin-left:-50px;
background-color: #333;
-webkit-transform: rotate(45deg);
border-radius:50%;
}
#header3 {
position: fixed;
top: 50%;
margin-top:-50px;
height: 100px;
width: 100px;
left:50%;
margin-left:-50px;
background-color:#333;
border-radius:30%;
}
#cercle1 {
position: fixed;
top: 50%;
margin-top:-50px;
height: 100px;
width: 100px;
left:50%;
margin-left:-50px;
background-color:white;
border-radius:50%;
}
TweenMax.set($("#header2"), {scale:0.7});
TweenMax.set($("#header3"), {scale:0.8});
TweenMax.set($("#header"), {backgroundColor:"rgba(255,255,255,1)"});
TweenMax.set($("#cercle1"),{scale:0});
TweenMax.to($("#header"), 1, {scale:1,yoyo:true,repeat:-1,opacity:1});
TweenMax.to($("#header"), 5, {backgroundColor:"rgba(3,255,129,1)",yoyo:true, repeat:-1});
TweenMax.to($("#header2"), 1, {rotation:360,repeat:-1,opacity:1});
TweenMax.to($("#header2"), 2, {scale:1,yoyo:true,repeat:-1,});
TweenMax.to($("#header3"), 2, {rotation:720,repeat:-1,ease: Power0.easeNone, y: 0 });
TweenMax.to($("#header3"), 1, {scale:0.9,yoyo:true,repeat:-1,});
TweenMax.to($("#header3"), 2, {borderRadius:100,yoyo:true,repeat:-1,});
//TweenMax.to($("#header3"),2,{scale:0,delay:10},10);
//TweenMax.to($("#header2"),2,{scale:0,delay:10},10);
//TweenMax.to($("#header"),3,{scale:3,delay:11},10);
//TweenMax.to($("#header"),3,{width:200,x:-50,delay:11},10);
//TweenMax.to($("#home"),1,{display:block});
//TweenMax.to($("#cercle1"), 2, {scale:10});
TweenMax.set($(".desinks"), {x:-1000,color:"rgba(255,255,255,1)"});
TweenMax.set($(".petit"), {x:1000,color:"rgba(255,255,255,1)"});
TweenMax.to($(".desinks"), 5, {color:"rgba(3,255,129,1)",yoyo:true, repeat:-1});
TweenMax.to($(".petit"), 5, {color:"rgba(3,255,129,1)",yoyo:true, repeat:-1});
TweenMax.to($(".desinks"), 1, {delay:7,x:0,ease: Back.easeOut.config(0.7)});
TweenMax.to($(".petit"), 1, {delay:7.5,x:0,ease: Back.easeOut.config(0.7)});
External CSS
This Pen doesn't use any external CSS resources.