artspider designerhttps://www.youtube.com/channel/UCD10SZSEyZCFAR4DFx_uNyg
How To Make A Website Using HTML CSS & JavaScript | Planets Website Design Full Video
SOURCE CODE
HTML SOURCE_CODE:-
index .html
👇
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>PlanetBook Home Page</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style2.css'>
</head>
<body>
<div class="header">
<a href="#" class="logo">
<img src="img/planetbooklogo.png" alt="">
</a>
<div class="loc">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PLANETS</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
</div>
<div class="header2">
<a href="#" class="logo">
<img src="img/planetbooklogo.png" alt="">
</a>
<div class="container">
<div class="bars"></div>
</div>
</div>
<nav>
<h2 class="logo2">
<img src="img/planetbooklogo.png" alt="">
</h2>
<div class="close">
<div></div>
</div>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">planets</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<div class="contain">
<section class="main">
<div class="planet">
<img src="img/venus-trans-1024.png" alt="" id="venus" class="planetbook">
<img src="img/mercury-trans-1024.png" alt="" id="mercury" class="planetbook">
<img src="img/earth-trans-1024.png" alt="" id="earth" class="planetbook">
<img src="img/31_earth_moon.png" alt="" id="moon" class="planetbook">
<img src="img/mars-trans-1024.png" alt="" id="mars" class="planetbook">
<img src="img/jupiter-trans-1024.png" alt="" id="jupiter" class="planetbook">
<img src="img/saturn-trans-1024.png" alt="" id="saturn" class="planetbook">
<img src="img/uranus-trans-1024.png" alt="" id="uranus" class="planetbook">
<img src="img/neptune-trans-1024.png" alt="" id="neptune" class="planetbook">
</div>
<div class="texts">
<div class="text1 text"><h6>PLANET</h6>
<h1>MERCURY</h1><br>
<p class="pag1">Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets in the Solar System.</p><br>
<div class="butt" id="more1">MORE..</div></div>
<div class="text2 text"><h6>PLANET</h6>
<h1>VENUS </h1><p class="pag2">Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. As the second-brightest natural object in the night sky after ...</p><br>
<div class="butt" id="more2">MORE..</div></div>
<div class="text3 text"><h6>PLANET</h6>
<h1>EARTH </h1><p class="pag3">Earth is the third planet from the Sun and the only astronomical object known to harbor life. According to radiometric dating estimation and other evidence, Earth ...</p><br>
<div class="butt" id="more3">MORE..</div></div>
<div class="text4 text"><h6>PLANET</h6>
<h1>MARS</h1><br>
<p class="pag4">Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being only larger than Mercury. In English, Mars carries the name of the Roman god of war and is often referred to as the "Red Planet".</p><br>
<div class="butt" id="more4">MORE..</div></div>
<div class="text5 text"><h6>PLANET</h6>
<h1>JUPITER</h1><br>
<p class="pag5">Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass one-thousandth that of the Sun, but two-and-a-half times that of all the other planets in the Solar System combined.</p><br>
<div class="butt" id="more5">MORE..</div></div>
<div class="text6 text"><h6>PLANET</h6>
<h1>SATURN</h1><br>
<p class="pag6">Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius of about nine times that of Earth. It only has one-eighth the average density of Earth; however, with its larger volume, Saturn is over 95 times more massive.</p><br>
<div class="butt" id="more6">MORE..</div></div>
<div class="text7 text"><h6>PLANET</h6>
<h1>URANUS</h1><br>
<p class="pag7">Uranus is the seventh planet from the Sun. Its name is a reference to the Greek god of the sky, Uranus, who, according to Greek mythology, was the grandfather ...</p><br>
<div class="butt" id="more7">MORE..</div></div>
<div class="text8 text"><h6>PLANET</h6>
<h1>NEPTUNE</h1><br>
<p class="pag8">Neptune is the eighth and farthest-known planet from the Sun. In the Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet, and the densest giant planet. It is 17 times the mass of Earth, slightly more massive than its near-twin Uranus.</p><br>
<div class="butt" id="more8">MORE..</div></div>
<div class="text9 text"><h6>PLANET</h6><h2> EARTH-</h2>
<h1>MOON</h1><br>
<p class="pag9">The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits.</p><br>
<div class="butt" id="more9">MORE..</div></div>
</div>
</section>
<section class="main2">
<div class="planet2">
<img src="img/venus-trans-1024.png" alt="" id="venus2" class="planetbook">
<img src="img/mercury-trans-1024.png" alt="" id="mercury2" class="planetbook">
<img src="img/earth-trans-1024.png" alt="" id="earth2" class="planetbook">
<img src="img/31_earth_moon.png" alt="" id="moon2" class="planetbook">
<img src="img/mars-trans-1024.png" alt="" id="mars2" class="planetbook">
<img src="img/jupiter-trans-1024.png" alt="" id="jupiter2" class="planetbook">
<img src="img/saturn-trans-1024.png" alt="" id="saturn2" class="planetbook">
<img src="img/uranus-trans-1024.png" alt="" id="uranus2" class="planetbook">
<img src="img/neptune-trans-1024.png" alt="" id="neptune2" class="planetbook">
</div>
<div class="texts">
<div class="MERCURYtext1 text2"><h6>PLANET</h6>
<h1>MERCURY</h1><br>
<p class="pag1">Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets in the Solar System.</p><br>
<div class="butt" id="more1">MORE..</div></div>
<div class="VENUStext2 text2"><h6>PLANET</h6>
<h1>VENUS </h1><br>
<p class="pag2">Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. As the second-brightest natural object in the night sky after ...</p><br>
<div class="butt" id="more2">MORE..</div></div>
<div class="EARTHtext3 text2"><h6>PLANET</h6>
<h1>EARTH </h1><br>
<p class="pag3">Earth is the third planet from the Sun and the only astronomical object known to harbor life. According to radiometric dating estimation and other evidence, Earth ...</p><br>
<div class="butt" id="more3">MORE..</div></div>
<div class="MARStext4 text2"><h6>PLANET</h6>
<h1>MARS</h1><br>
<p class="pag4">Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being only larger than Mercury. In English, Mars carries the name of the Roman god of war and is often referred to as the "Red Planet".</p><br>
<div class="butt" id="more4">MORE..</div></div>
<div class="JUPITERtext5 text2"><h6>PLANET</h6>
<h1>JUPITER</h1><br>
<p class="pag5">Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass one-thousandth that of the Sun, but two-and-a-half times that of all the other planets in the Solar System combined.</p><br>
<div class="butt" id="more5">MORE..</div></div>
<div class="SATURNtext6 text2"><h6>PLANET</h6>
<h1>SATURN</h1><br>
<p class="pag6">Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius of about nine times that of Earth. It only has one-eighth the average density of Earth; however, with its larger volume, Saturn is over 95 times more massive.</p><br>
<div class="butt" id="more6">MORE..</div></div>
<div class="URANUStext7 text2"><h6>PLANET</h6>
<h1>URANUS</h1><br>
<p class="pag7">Uranus is the seventh planet from the Sun. Its name is a reference to the Greek god of the sky, Uranus, who, according to Greek mythology, was the grandfather ...</p><br>
<div class="butt" id="more7">MORE..</div></div>
<div class="NEPTUNEtext8 text2"><h6>PLANET</h6>
<h1>NEPTUNE</h1><br>
<p class="pag8">Neptune is the eighth and farthest-known planet from the Sun. In the Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet, and the densest giant planet. It is 17 times the mass of Earth, slightly more massive than its near-twin Uranus.</p><br>
<div class="butt" id="more8">MORE..</div></div>
<div class="MOONtext9 text2"><h6>PLANET</h6><h2> EARTH-</h2>
<h1>MOON</h1><br>
<p class="pag9">The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits.</p><br>
<div class="butt" id="more9">MORE..</div></div>
</div>
</section>
<section class="main3">
<div class="planet3">
<img src="img/venus-trans-1024.png" alt="" id="venus3" class="planetbook">
<img src="img/mercury-trans-1024.png" alt="" id="mercury3" class="planetbook">
<img src="img/earth-trans-1024.png" alt="" id="earth3" class="planetbook">
<img src="img/31_earth_moon.png" alt="" id="moon3" class="planetbook">
<img src="img/mars-trans-1024.png" alt="" id="mars3" class="planetbook">
<img src="img/jupiter-trans-1024.png" alt="" id="jupiter3" class="planetbook">
<img src="img/saturn-trans-1024.png" alt="" id="saturn3" class="planetbook">
<img src="img/uranus-trans-1024.png" alt="" id="uranus3" class="planetbook">
<img src="img/neptune-trans-1024.png" alt="" id="neptune3" class="planetbook">
</div>
<div class="texts">
<div class="MERCURY3text1 text2"><h6>PLANET</h6>
<h1>MERCURY</h1><br>
<p class="pag1">Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets in the Solar System.</p><br>
<div class="butt" id="more1">MORE..</div></div>
<div class="VENUS3text2 text2"><h6>PLANET</h6>
<h1>VENUS </h1><br>
<p class="pag2">Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. As the second-brightest natural object in the night sky after ...</p><br>
<div class="butt" id="more2">MORE..</div></div>
<div class="EARTH3text3 text2"><h6>PLANET</h6>
<h1>EARTH </h1><br>
<p class="pag3">Earth is the third planet from the Sun and the only astronomical object known to harbor life. According to radiometric dating estimation and other evidence, Earth ...</p><br>
<div class="butt" id="more3">MORE..</div></div>
<div class="MARS3text4 text2"><h6>PLANET</h6>
<h1>MARS</h1><br>
<p class="pag4">Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being only larger than Mercury. In English, Mars carries the name of the Roman god of war and is often referred to as the "Red Planet".</p><br>
<div class="butt" id="more4">MORE..</div></div>
<div class="JUPITER3text5 text2"><h6>PLANET</h6>
<h1>JUPITER</h1><br>
<p class="pag5">Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass one-thousandth that of the Sun, but two-and-a-half times that of all the other planets in the Solar System combined.</p><br>
<div class="butt" id="more5">MORE..</div></div>
<div class="SATURN3text6 text2"><h6>PLANET</h6>
<h1>SATURN</h1><br>
<p class="pag6">Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius of about nine times that of Earth. It only has one-eighth the average density of Earth; however, with its larger volume, Saturn is over 95 times more massive.</p><br>
<div class="butt" id="more6">MORE..</div></div>
<div class="URANUS3text7 text2"><h6>PLANET</h6>
<h1>URANUS</h1><br>
<p class="pag7">Uranus is the seventh planet from the Sun. Its name is a reference to the Greek god of the sky, Uranus, who, according to Greek mythology, was the grandfather ...</p><br>
<div class="butt" id="more7">MORE..</div></div>
<div class="NEPTUNE3text8 text2"><h6>PLANET</h6>
<h1>NEPTUNE</h1><br>
<p class="pag8">Neptune is the eighth and farthest-known planet from the Sun. In the Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet, and the densest giant planet. It is 17 times the mass of Earth, slightly more massive than its near-twin Uranus.</p><br>
<div class="butt" id="more8">MORE..</div></div>
<div class="MOON3text9 text2"><h6>PLANET</h6><h2> EARTH-</h2>
<h1>MOON</h1><br>
<p class="pag9">The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits.</p><br>
<div class="butt" id="more9">MORE..</div></div>
</div>
</section>
</div>
<div class="footer"><!-- <div id="footer"> -->
<div id="copyright">
Copyright CurrentCopyrightYear © <a target="_blank" href="#" class="not-animated">PlanetBook</a><br />
All Rights Reserved ||
Designed by <a href="#">Artspider Designer</a>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js" integrity="sha512-JO6JyFPJupQKZf7icgZkHwuq/rAQxH7COqvEd4WdK52AtHPedwHog05T69pIelI69jVN/zZbW6TuHfH2mS8j/Q==" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/CSSRulePlugin.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/EaselPlugin.min.js"></script>
<script src='main1.js'></script>
</html>
CSS SOURCE_CODE:-
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
position: absolute;
top: 0;
width: 100%;
padding:6px 100px;
display: flex;
justify-content:space-around;
align-items: center;
z-index: 400;
border-bottom: solid .1px #FFFF99;
transition: .5s;
}
.logo img{
position: relative;
left: 0px;
width: 30%;
height: 30%;
padding: 5px 10px;
transition: .5s;
}
.header ul{
position: relative;
display: flex;
}
.header ul li{
list-style: none;
}
.header ul li a{
display: inline-block;
color: rgb(255, 255, 255);
font-weight: 400;
margin-left: 40px;
text-decoration: none;
font-size: 12px;
font-family:'Neuropolitical';
transition: .5s;
}
.header ul li a:hover{
color: #FFFF99;
text-decoration: line-through;
}
.main{
background-image: url("img/planethgf.jpg");
width: 100%;
height: 100vh;
background-attachment: fixed;
background-size: cover;
display:flex;
}
.contain {
width: 100%;
text-align: center;
height: 100vh;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.planet img{
width: 500px;
position: absolute;
opacity: 0;
top: 60px;
cursor: pointer;
}
/*-----------------------planettext--------------------------*/
.texts{
overflow: hidden;
height: 100vh;
width: 100%;
padding: 100px;
margin: 102px;
text-align: center;
}
.text{
position:absolute;
left:290px;
top:30%;
font-size:10px;
color:#FFFF99;
height: 40%;
opacity: 0;
width: 290px;
text-align: center;
font-family:'Neuropolitical';
z-index: 2;
}
.text h1{
font-family:'Neuropolitical';
font-size: 42px;
color: #ffffff;
font: small;
padding: 5px 16px;
}
.butt {
color: #ffffff;
font-size: 15px;
cursor: pointer;
position: absolute;
padding: 8px;
left: 70%;
font-family:'Neuropolitical';
}
.butt:after {
content: "";
height: 100%;
left: 0;
top: 0;
width: 5px;
position: absolute;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
z-index: -1;
background-color: #FFFF99;
}
.butt:hover:after{ width: 100%;
}
.butt:hover{
color: rgb(46, 45, 45);
}
.text h6{
font-family:'Neuropolitical';
font-size: 21px;
color:#FFFF99;
font: small;
}
.footer{
background-color: #FFFF99;
position:relative;
z-index: 1 ;
top: 90%;
width: 100%;
color: #020d24;
display: block;
padding: 15px;
font-size: 12px;
font-family:'Neuropolitical';
}
.main2{
display: none;
}
nav{
display: none;
}
.header2{
display: none;
}
.main3{
display: none;
}
@media screen and (max-width: 1350px) {
.main2{
display: block;
background-image: url("img/planethgf.jpg");
width: 100%;
height: 100vh;
background-attachment: fixed;
background-size: cover;
}
.planet2 img{
width: 500px;
position: absolute;
opacity: 0;
top: 60px;
cursor: pointer;
}
.main{
display: none;
}
.header{
display: none;
}
.header2{
top: 0px;
}
.header2{
position: absolute;
top: 0;
width: 100%;
padding:6px 100px;
display: flex;
justify-content:space-around;
align-items: center;
z-index: 400;
border-bottom: solid .1px #FFFF99;
transition: .5s;
}
.bars{
position: relative;
width: 30px;
height:3px;
background: rgb(236, 234, 234);
transition: .5s;
top: -10px;
}
.bars:hover,
.bars:hover::before,
.bars:hover:after{
background: #FFFF99;
}
.bars:before,
.bars:after{
content: '';
position: absolute;
width: 30px;
height: 3px;
background: rgb(245, 245, 245);
transition: .5s;
}
.bars:before{
margin-top: 6px;
width: 30px;
}
.bars:after{
margin-top: 12px;
width: 30px;
}
.texts{
overflow: hidden;
height: 100vh;
width: 100%;
padding: 100px;
margin: 102px;
text-align: center;
}
.text2{
position:absolute;
left:290px;
top:30%;
font-size:10px;
color:#FFFF99;
height: 40%;
opacity: 0;
width: 290px;
text-align: center;
font-family:'Neuropolitical';
z-index: 2;
}
.text2 h1{
font-family:'Neuropolitical';
font-size: 42px;
color: #ffffff;
font: small;
padding: 5px 16px;
}
.butt {
color: #ffffff;
font-size: 15px;
cursor: pointer;
position: absolute;
padding: 8px;
left: 70%;
font-family:'Neuropolitical';
}
.butt:after {
content: "";
height: 100%;
left: 0;
top: 0;
width: 5px;
position: absolute;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
z-index: -1;
background-color: #FFFF99;
}
.butt:hover:after{ width: 100%;
}
.butt:hover{
color: rgb(46, 45, 45);
}
.text2 h6{
font-family:'Neuropolitical';
font-size: 21px;
color:#FFFF99;
font: small;
}
nav{
position: absolute;
width: 100%;
height: 30px;
background: rgb(41, 40, 40);
display: flex;
justify-content: center;
align-items: center;
top: -500px;
border-radius: 0px 0px 50% 50% ;
overflow: hidden;
z-index: 1000;
font-family:'Neuropolitical';
}
nav ul {
list-style: none;
}
nav ul li{
margin: 50px 0;
}
nav ul li a{
color: #fafafa;
font-size: 2em;
text-decoration: none;
font-weight: 500;
position: relative;
opacity: 0;
pointer-events: none;
}
nav ul li a:after{
content: '';
width: 100%;
position: absolute;
height: 3px;
border-radius: 5px;
background: #fff;
bottom: -10px;
left: 0;
transform-origin: left;
transition: transform .5s ease;
transform: scaleX(0);
}
nav ul li a:hover:after{
transform: scaleX(1);
}
nav .close {
width: 30px;
height: 30px;
position: absolute;
top: 6%;
right: 5%;
cursor: pointer;
opacity: 0;
pointer-events: none;
}
nav h2 img{
position: absolute;
top:5%;
left: 5%;
opacity: 0;
pointer-events: none;
color: #fff;
width: 200px;
}
nav .close div::before,
nav .close div::after{
content: '';
position: absolute;
width: 30px;
height: 4px;
background: #fff;
transition: background .5s ease;
}
nav .close div::before{
transform: rotate(-45deg);
}
nav .close div::after{
transform: rotate(45deg);
}
nav .close:hover div::before,
nav .close:hover div::after{
background: rgb(255, 68, 68);
}
.main3{
display: none;
}
.logo img{
position: relative;
left:0px;
width: 30%;
height: 30%;
padding: 5px 10px;
transition: .5s;
}
}
@media screen and (max-width: 780px) {
.main2{
display: none;
}
.main3{
display: block;
background-image: url("img/planethgf.jpg");
width: 100%;
height: 100vh;
background-attachment: fixed;
background-size: cover;
}
.planet3 img{
width: 500px;
position: absolute;
opacity: 0;
top: 60px;
cursor: pointer;
}
.logo img{
position: relative;
left: 0px;
width: 50%;
height: 50%;
padding: 5px 10px;
transition: .5s;
}
.texts{
overflow: hidden;
height: 100vh;
width: 100%;
padding: 100px;
margin: 102px;
text-align: center;
}
.text2{
position:absolute;
left:290px;
top:30%;
font-size:10px;
color:#FFFF99;
text-shadow: #000000 2px 2px 10px;
height: 40%;
opacity: 0;
width: 290px;
text-align: center;
font-family:'Neuropolitical';
z-index: 2;
}
.text2 h1{
font-family:'Neuropolitical';
font-size: 30px;
color: #ffffff;
font: small;
padding: 5px 16px;
}
.butt {
color: #ffffff;
font-size: 15px;
cursor: pointer;
position: absolute;
padding: 8px;
left: 70%;
text-shadow:none;
font-family:'Neuropolitical';
}
.butt:after {
content: "";
height: 100%;
left: 0;
top: 0;
width: 5px;
position: absolute;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
z-index: -1;
background-color: #FFFF99;
}
.butt:hover:after{ width: 100%;
}
.butt:hover{
color: rgb(46, 45, 45);
}
.text2 h6{
font-family:'Neuropolitical';
font-size: 21px;
color:#FFFF99;
font: small;
}
}
Javascript (.js file) SOURCE_CODE:-
$(".planetbook").click(function() {
$('.contain').attr("planet-center", this.id);
if (this.id == "mercury") centerPlanet1();
if (this.id == "venus") centerPlanet2();
if (this.id == "earth") centerPlanet3();
if (this.id == "mars") centerPlanet4();
if (this.id == "jupiter") centerPlanet5();
if (this.id == "saturn") centerPlanet6();
if (this.id == "uranus") centerPlanet7();
if (this.id == "neptune") centerPlanet8();
if (this.id == "moon") centerPlanet9();
if (this.id == "mercury2") centerPlanet1();
if (this.id == "venus2") centerPlanet2();
if (this.id == "earth2") centerPlanet3();
if (this.id == "mars2") centerPlanet4();
if (this.id == "jupiter2") centerPlanet5();
if (this.id == "saturn2") centerPlanet6();
if (this.id == "uranus2") centerPlanet7();
if (this.id == "neptune2") centerPlanet8();
if (this.id == "moon2") centerPlanet9();
if (this.id == "mercury3") centerPlanet1();
if (this.id == "venus3") centerPlanet2();
if (this.id == "earth3") centerPlanet3();
if (this.id == "mars3") centerPlanet4();
if (this.id == "jupiter3") centerPlanet5();
if (this.id == "saturn3") centerPlanet6();
if (this.id == "uranus3") centerPlanet7();
if (this.id == "neptune3") centerPlanet8();
if (this.id == "moon3") centerPlanet9();
});
function centerPlanet1() {
var tl = new TimelineMax()
.to('#mercury', 1, { z: 1,left:"600px",width: "500px",top:"15%",opacity:"1"}, 0)
.to('#venus', 1, { z: 1,left:"1250px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#earth', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#moon', 1, { z: 1,left:"1600px", width: "50px",top:"40%",opacity:"0"}, 0)
.to('#mars', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#jupiter', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#saturn', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#uranus', 1, { z: 1,left:"-600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#neptune', 1, { z: 1,left:"-90px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('.text1', 1, { z: 1,top:"35%" ,left:"290px",opacity:"1"}, 0)
.to('.text2', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text3', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text4', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text5', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text6', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text7', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text8', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text9', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('#mercury2', 1, { z: 1,left:"45%",width: "400px",top:"20%",opacity:"1"}, 0)
.to('#venus2', 1, { z: 1,left:"90%",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#earth2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#moon2', 1, { z: 1,left:"1600px", width: "50px",top:"50%",opacity:"0"}, 0)
.to('#mars2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#jupiter2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#saturn2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#uranus2', 1, { z: 1,left:"-500px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#neptune2', 1, { z: 1,left:"-90px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('.MERCURYtext1', 1, { z: 1,top:"35%" ,left:"15%",opacity:"1"}, 0)
.to('.VENUStext2', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.EARTHtext3', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MARStext4', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.JUPITERtext5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.SATURNtext6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.URANUStext7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.NEPTUNEtext8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MOONtext9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('#mercury3', 1, { z: 1,left:"15%",width: "80%",top:"15%",opacity:"1"}, 0)
.to('#venus3', 1, { z: 1,left:"80%",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#earth3', 1, { z: 1,left:"1600px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#moon3', 1, { z: 1,left:"1600px", width: "10%",top:"70%",opacity:"0"}, 0)
.to('#mars3', 1, { z: 1,left:"1600px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#jupiter3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#saturn3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#uranus3', 1, { z: 1,left:"-600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#neptune3', 1, { z: 1,left:"-40px",width: "40%",top:"70%",opacity:"1"}, 0)
.to('.VENUS3text2', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MERCURY3text1', 1, { z: 1,top:"25%" ,left:"30%",opacity:"1",width: "50%",}, 0)
.to('.EARTH3text3', 1, { z: 1,top:"100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.MARS3text4', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.JUPITER3text5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.SATURN3text6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.URANUS3text7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.NEPTUNE3text8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MOON3text9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
}
function centerPlanet2() {
var tl = new TimelineMax()
.to('#mercury', 1, { z: 1,left:"-90px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#venus', 1, { z: 1,left:"600px",width: "500px",top:"15%",opacity:"1"}, 0)
.to('#earth', 1, { z: 1,left:"1250px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#moon', 1, { z: 1,left:"1210px", width: "50px",top:"40%",opacity:"1"}, 0)
.to('#mars', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#jupiter', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#saturn', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#uranus', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#neptune', 1, { z: 1,left:"-200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('.text1', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text2', 1, { z: 1,top:"35%" ,left:"290px",opacity:"1"}, 0)
.to('.text3', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text4', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text5', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text6', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text7', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text8', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text9', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('#mercury2', 1, { z: 1,left:"-90px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#venus2', 1, { z: 1,left:"45%",width: "400px",top:"20%",opacity:"1"}, 0)
.to('#earth2', 1, { z: 1,left:"90%",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#moon2', 1, { z: 1,left:"90%", width: "50px",top:"50%",opacity:"1"}, 0)
.to('#mars2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#jupiter2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#saturn2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#uranus2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#neptune2', 1, { z: 1,left:"-560px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('.MERCURYtext1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.VENUStext2', 1, { z: 1,top:"35%" ,left:"15%",opacity:"1"}, 0)
.to('.EARTHtext3', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MARStext4', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.JUPITERtext5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.SATURNtext6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.URANUStext7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.NEPTUNEtext8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MOONtext9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('#mercury3', 1, { z: 1,left:"-40px",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#venus3', 1, { z: 1,left:"15%",width: "80%",top:"15%",opacity:"1"}, 0)
.to('#earth3', 1, { z: 1,left:"80%",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#moon3', 1, { z: 1,left:"80%", width: "10%",top:"70%",opacity:"1"}, 0)
.to('#mars3', 1, { z: 1,left:"1600px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#jupiter3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#saturn3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#uranus3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#neptune3', 1, { z: 1,left:"-600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('.MERCURY3text1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.VENUS3text2', 1, { z: 1,top:"25%" ,left:"30%",opacity:"1",width: "50%",}, 0)
.to('.EARTH3text3', 1, { z: 1,top:"100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.MARS3text4', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.JUPITER3text5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.SATURN3text6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.URANUS3text7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.NEPTUNE3text8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MOON3text9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
}
function centerPlanet3() {
var tl = new TimelineMax()
.to('#mercury', 1, { z: 1,left:"-200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#venus', 1, { z: 1,left:"-90px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#earth', 1, { z: 1,left:"600px",width: "500px",top:"15%",opacity:"1"}, 0)
.to('#moon', 1, { z: 1,left:"1000px", width: "100px",top:"15%",opacity:"1"}, 0)
.to('#mars', 1, { z: 1,left:"1250px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#jupiter', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#saturn', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#uranus', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#neptune', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('.text1', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text2', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text3', 1, { z: 1,top:"35%" ,left:"290px",opacity:"1"}, 0)
.to('.text4', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text5', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text6', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text7', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text8', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text9', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('#mercury2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#venus2', 1, { z: 1,left:"-90px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#earth2', 1, { z: 1,left:"45%",width: "400px",top:"20%",opacity:"1"}, 0)
.to('#moon2', 1, { z: 1,left:"80%", width: "100px",top:"20%",opacity:"1"}, 0)
.to('#mars2', 1, { z: 1,left:"90%",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#jupiter2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#saturn2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#uranus2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#neptune2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('.MERCURYtext1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.VENUStext2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.EARTHtext3', 1, { z: 1,top:"35%" ,left:"15%",opacity:"1"}, 0)
.to('.MARStext4', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.JUPITERtext5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.SATURNtext6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.URANUStext7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.NEPTUNEtext8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MOONtext9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('#mercury3', 1, { z: 1,left:"-200px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#venus3', 1, { z: 1,left:"-40px",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#earth3', 1, { z: 1,left:"15%",width: "80%",top:"15%",opacity:"1"}, 0)
.to('#moon3', 1, { z: 1,left:"80%", width: "20%",top:"15%",opacity:"1"}, 0)
.to('#mars3', 1, { z: 1,left:"80%",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#jupiter3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#saturn3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#uranus3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#neptune3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('.MERCURY3text1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.VENUS3text2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.EARTH3text3', 1, { z: 1,top:"25%" ,left:"30%",opacity:"1",width: "50%",}, 0)
.to('.MARS3text4', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.JUPITER3text5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.SATURN3text6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.URANUS3text7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.NEPTUNE3text8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MOON3text9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
}
function centerPlanet4() {
var tl = new TimelineMax()
.to('#venus', 1, { z: 1,left:"-500px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#mercury', 1, { z: 1,left:"-200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#earth', 1, { z: 1,left:"-90px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#moon', 1, { z: 1,left:"100px", width: "50px",top:"40%",opacity:"1"}, 0)
.to('#mars', 1, { z: 1,left:"600px",width: "500px",top:"15%",opacity:"1"}, 0)
.to('#jupiter', 1, { z: 1,left:"1250px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#saturn', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#uranus', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#neptune', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('.text1', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text2', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text3', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text4', 1, { z: 1,top:"35%" ,left:"290px",opacity:"1"}, 0)
.to('.text5', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text6', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text7', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text8', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text9', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('#mercury2', 1, { z: 1,left:"-500px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#venus2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#earth2', 1, { z: 1,left:"-90px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#moon2', 1, { z: 1,left:"8%", width: "50px",top:"50%",opacity:"1"}, 0)
.to('#mars2', 1, { z: 1,left:"45%",width: "400px",top:"20%",opacity:"1"}, 0)
.to('#jupiter2', 1, { z: 1,left:"90%",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#saturn2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#uranus2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#neptune2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('.MERCURYtext1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.VENUStext2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.EARTHtext3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.MARStext4', 1, { z: 1,top:"35%" ,left:"15%",opacity:"1"}, 0)
.to('.JUPITERtext5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.SATURNtext6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.URANUStext7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.NEPTUNEtext8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MOONtext9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('#mercury3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#venus3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#earth3', 1, { z: 1,left:"-40px",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#moon3', 1, { z: 1,left:"25%", width: "10%",top:"70%",opacity:"1"}, 0)
.to('#mars3', 1, { z: 1,left:"15%",width: "80%",top:"15%",opacity:"1"}, 0)
.to('#jupiter3', 1, { z: 1,left:"80%",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#saturn3', 1, { z: 1,left:"1600px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#uranus3', 1, { z: 1,left:"1600px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#neptune3', 1, { z: 1,left:"1600px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('.MERCURY3text1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.VENUS3text2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.EARTH3text3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MARS3text4', 1, { z: 1,top:"25%" ,left:"30%",opacity:"1",width: "50%",}, 0)
.to('.JUPITER3text5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.SATURN3text6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.URANUS3text7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.NEPTUNE3text8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MOON3text9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
}
function centerPlanet5() {
var tl = new TimelineMax()
.to('#mercury', 1, { z: 1,left:"-1000px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#venus', 1, { z: 1,left:"-500px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#earth', 1, { z: 1,left:"-200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#moon', 1, { z: 1,left:"-100px", width: "50px",top:"40%",opacity:"0"}, 0)
.to('#mars', 1, { z: 1,left:"-90px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#jupiter', 1, { z: 1,left:"600px",width: "500px",top:"15%",opacity:"1"}, 0)
.to('#saturn', 1, { z: 1,left:"1250px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#uranus', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#neptune', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('.text1', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text2', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text3', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text4', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text5', 1, { z: 1,top:"35%" ,left:"290px",opacity:"1"}, 0)
.to('.text6', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text7', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text8', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text9', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('#mercury2', 1, { z: 1,left:"-1000px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#venus2', 1, { z: 1,left:"-500px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#earth2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#moon2', 1, { z: 1,left:"-100px", width: "50px",top:"50%",opacity:"0"}, 0)
.to('#mars2', 1, { z: 1,left:"-90px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#jupiter2', 1, { z: 1,left:"45%",width: "400px",top:"20%",opacity:"1"}, 0)
.to('#saturn2', 1, { z: 1,left:"90%",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#uranus2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#neptune2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('.MERCURYtext1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.VENUStext2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.EARTHtext3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.MARStext4', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.JUPITERtext5', 1, { z: 1,top:"35%" ,left:"15%",opacity:"1"}, 0)
.to('.SATURNtext6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.URANUStext7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.NEPTUNEtext8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MOONtext9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('#mercury3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#venus3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#earth3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#moon3', 1, { z: 1,left:"-25%", width: "10%",top:"70%",opacity:"1"}, 0)
.to('#mars3', 1, { z: 1,left:"-40px",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#jupiter3', 1, { z: 1,left:"15%",width: "80%",top:"15%",opacity:"1"}, 0)
.to('#saturn3', 1, { z: 1,left:"80%",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#uranus3', 1, { z: 1,left:"1600px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#neptune3', 1, { z: 1,left:"1600px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('.MERCURY3text1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.VENUS3text2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.EARTH3text3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MARS3text4', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.JUPITER3text5', 1, { z: 1,top:"25%" ,left:"30%",opacity:"1",width: "50%",}, 0)
.to('.SATURN3text6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.URANUS3text7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.NEPTUNE3text8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MOON3text9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
}
function centerPlanet6() {
var tl = new TimelineMax()
.to('#mercury', 1, { z: 1,left:"-1200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#venus', 1, { z: 1,left:"-1000px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#earth', 1, { z: 1,left:"-500px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#moon', 1, { z: 1,left:"-100px", width: "50px",top:"40%",opacity:"0"}, 0)
.to('#mars', 1, { z: 1,left:"-200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#jupiter', 1, { z: 1,left:"-90px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#saturn', 1, { z: 1,left:"600px",width: "500px",top:"15%",opacity:"1"}, 0)
.to('#uranus', 1, { z: 1,left:"1250px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#neptune', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('.text1', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text2', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text3', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text4', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text5', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text6', 1, { z: 1,top:"35%" ,left:"290px",opacity:"1"}, 0)
.to('.text7', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text8', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text9', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('#mercury2', 1, { z: 1,left:"-1200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#venus2', 1, { z: 1,left:"-1000px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#earth2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#moon2', 1, { z: 1,left:"-100px", width: "50px",top:"50%",opacity:"0"}, 0)
.to('#mars2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#jupiter2', 1, { z: 1,left:"-90px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#saturn2', 1, { z: 1,left:"45%",width: "400px",top:"20%",opacity:"1"}, 0)
.to('#uranus2', 1, { z: 1,left:"90%",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#neptune2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('.MERCURYtext1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.VENUStext2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.EARTHtext3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.MARStext4', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.JUPITERtext5', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.SATURNtext6', 1, { z: 1,top:"35%" ,left:"15%",opacity:"1"}, 0)
.to('.URANUStext7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.NEPTUNEtext8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MOONtext9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('#mercury3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#venus3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#earth3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#moon3', 1, { z: 1,left:"-25%", width: "10%",top:"70%",opacity:"0"}, 0)
.to('#mars3', 1, { z: 1,left:"-400px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#jupiter3', 1, { z: 1,left:"-40px",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#saturn3', 1, { z: 1,left:"20%",width: "70%",top:"15%",opacity:"1"}, 0)
.to('#uranus3', 1, { z: 1,left:"80%",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#neptune3', 1, { z: 1,left:"1600px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('.MERCURY3text1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.VENUS3text2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.EARTH3text3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MARS3text4', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.JUPITER3text5', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.SATURN3text6', 1, { z: 1,top:"25%" ,left:"30%",opacity:"1",width: "50%",}, 0)
.to('.URANUS3text7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.NEPTUNE3text8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MOON3text9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
}
function centerPlanet7() {
var tl = new TimelineMax()
.to('#mercury', 1, { z: 1,left:"1500px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#venus', 1, { z: 1,left:"-1200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#earth', 1, { z: 1,left:"-1000px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#moon', 1, { z: 1,left:"-100px", width: "50px",top:"40%",opacity:"0"}, 0)
.to('#mars', 1, { z: 1,left:"-500px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#jupiter', 1, { z: 1,left:"-200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#saturn', 1, { z: 1,left:"-90px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#uranus', 1, { z: 1,left:"600px",width: "500px",top:"15%",opacity:"1"}, 0)
.to('#neptune', 1, { z: 1,left:"1250px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('.text1', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text2', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text3', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text4', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text5', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text6', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text7', 1, { z: 1,top:"35%" ,left:"290px",opacity:"1"}, 0)
.to('.text8', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text9', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('#mercury2', 1, { z: 1,left:"1500px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#venus2', 1, { z: 1,left:"-1200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#earth2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#moon2', 1, { z: 1,left:"-100px", width: "50px",top:"50%",opacity:"0"}, 0)
.to('#mars2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#jupiter2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#saturn2', 1, { z: 1,left:"-90px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#uranus2', 1, { z: 1,left:"45%",width: "400px",top:"20%",opacity:"1"}, 0)
.to('#neptune2', 1, { z: 1,left:"90%",width: "200px",top:"50%",opacity:"1"}, 0)
.to('.MERCURYtext1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.VENUStext2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.EARTHtext3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.MARStext4', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.JUPITERtext5', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.SATURNtext6', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.URANUStext7', 1, { z: 1,top:"35%" ,left:"15%",opacity:"1"}, 0)
.to('.NEPTUNEtext8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MOONtext9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('#mercury3', 1, { z: 1,left:"2000px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#venus3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#earth3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#moon3', 1, { z: 1,left:"-25%", width: "10%",top:"70%",opacity:"0"}, 0)
.to('#mars3', 1, { z: 1,left:"-400px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#jupiter3', 1, { z: 1,left:"-400px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#saturn3', 1, { z: 1,left:"-40px",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#uranus3', 1, { z: 1,left:"15%",width: "80%",top:"15%",opacity:"1"}, 0)
.to('#neptune3', 1, { z: 1,left:"80%",width: "40%",top:"70%",opacity:"1"}, 0)
.to('.MERCURY3text1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.VENUS3text2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.EARTH3text3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MARS3text4', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.JUPITER3text5', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.SATURN3text6', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.URANUS3text7', 1, { z: 1,top:"25%" ,left:"30%",opacity:"1",width: "50%",}, 0)
.to('.NEPTUNE3text8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MOON3text9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
}
function centerPlanet8() {
var tl = new TimelineMax()
.to('#mercury', 1, { z: 1,left:"1250px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#venus', 1, { z: 1,left:"1500px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#earth', 1, { z: 1,left:"-1200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#moon', 1, { z: 1,left:"-100px", width: "50px",top:"40%",opacity:"0"}, 0)
.to('#mars', 1, { z: 1,left:"-1000px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#jupiter', 1, { z: 1,left:"-500px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#saturn', 1, { z: 1,left:"-200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#uranus', 1, { z: 1,left:"-90px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#neptune', 1, { z: 1,left:"600px",width: "500px",top:"15%",opacity:"1"}, 0)
.to('.text1', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text2', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text3', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text4', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text5', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text6', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text7', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text8', 1, { z: 1,top:"35%" ,left:"290px",opacity:"1"}, 0)
.to('.text9', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('#mercury2', 1, { z: 1,left:"90%",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#venus2', 1, { z: 1,left:"1500px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#earth2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#moon2', 1, { z: 1,left:"-100px", width: "50px",top:"50%",opacity:"0"}, 0)
.to('#mars2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#jupiter2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#saturn2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#uranus2', 1, { z: 1,left:"-90px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#neptune2', 1, { z: 1,left:"45%",width: "400px",top:"20%",opacity:"1"}, 0)
.to('.MERCURYtext1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.VENUStext2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.EARTHtext3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.MARStext4', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.JUPITERtext5', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.SATURNtext6', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.URANUStext7', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.NEPTUNEtext8', 1, { z: 1,top:"35%" ,left:"15%",opacity:"1"}, 0)
.to('.MOONtext9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('#mercury3', 1, { z: 1,left:"80%",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#venus3', 1, { z: 1,left:"2000px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#earth3', 1, { z: 1,left:"-200px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#moon3', 1, { z: 1,left:"-25%", width: "10%",top:"70%",opacity:"0"}, 0)
.to('#mars3', 1, { z: 1,left:"-400px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#jupiter3', 1, { z: 1,left:"-400px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#saturn3', 1, { z: 1,left:"-400px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#uranus3', 1, { z: 1,left:"-40px",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#neptune3', 1, { z: 1,left:"15%",width: "80%",top:"15%",opacity:"1"}, 0)
.to('.MERCURY3text1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.VENUS3text2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.EARTH3text3', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MARS3text4', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.JUPITER3text5', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.SATURN3text6', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.URANUS3text7', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.NEPTUNE3text8', 1, { z: 1,top:"25%" ,left:"30%",opacity:"1",width: "50%",}, 0)
.to('.MOON3text9', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
}
function centerPlanet9() {
var tl = new TimelineMax()
.to('#mercury', 1, { z: 1,left:"-500px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#venus', 1, { z: 1,left:"-200px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#earth', 1, { z: 1,left:"-90px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#moon', 1, { z: 1,left:"600px", width: "650px",top:"15%",opacity:"1"}, 0)
.to('#mars', 1, { z: 1,left:"1250px",width: "200px",top:"40%",opacity:"1"}, 0)
.to('#jupiter', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#saturn', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#uranus', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('#neptune', 1, { z: 1,left:"1600px",width: "200px",top:"40%",opacity:"0"}, 0)
.to('.text1', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text2', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text3', 1, { z: 1,top:"-100%" ,left:"290px",opacity:"0"}, 0)
.to('.text4', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text5', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text6', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text7', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text8', 1, { z: 1,top:"100%" ,left:"290px",opacity:"0"}, 0)
.to('.text9', 1, { z: 1,top:"35%" ,left:"290px",opacity:"1"}, 0)
.to('#mercury2', 1, { z: 1,left:"-200px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#venus2', 1, { z: 1,left:"-800px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#earth2', 1, { z: 1,left:"-90px",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#moon2', 1, { z: 1,left:"40%", width: "500px",top:"20%",opacity:"1"}, 0)
.to('#mars2', 1, { z: 1,left:"90%",width: "200px",top:"50%",opacity:"1"}, 0)
.to('#jupiter2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#saturn2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#uranus2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('#neptune2', 1, { z: 1,left:"1600px",width: "200px",top:"50%",opacity:"0"}, 0)
.to('.MERCURYtext1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.VENUStext2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0"}, 0)
.to('.EARTHtext3', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MARStext4', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.JUPITERtext5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.SATURNtext6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.URANUStext7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.NEPTUNEtext8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0"}, 0)
.to('.MOONtext9', 1, { z: 1,top:"35%" ,left:"15%",opacity:"1"}, 0)
.to('#venus3', 1, { z: 1,left:"-200px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#mercury3', 1, { z: 1,left:"-400px",width: "40%",top:"70%",opacity:"0"}, 0)
.to('#earth3', 1, { z: 1,left:"-40px",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#moon3', 1, { z: 1,left:"6%", width: "100%",top:"15%",opacity:"1"}, 0)
.to('#mars3', 1, { z: 1,left:"80%",width: "40%",top:"70%",opacity:"1"}, 0)
.to('#jupiter3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#saturn3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#uranus3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('#neptune3', 1, { z: 1,left:"1600px",width: "200px",top:"70%",opacity:"0"}, 0)
.to('.MERCURY3text1', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.VENUS3text2', 1, { z: 1,top:"-100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.EARTH3text3', 1, { z: 1,top:"-100%" ,left:"30%",opacity:"0",width: "50%",}, 0)
.to('.MARS3text4', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.JUPITER3text5', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.SATURN3text6', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.URANUS3text7', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.NEPTUNE3text8', 1, { z: 1,top:"100%" ,left:"15%",opacity:"0",width: "50%",}, 0)
.to('.MOON3text9', 1, { z: 1,top:"25%" ,left:"30%",opacity:"1",width: "50%",}, 0)
}
$(function() {
centerPlanet9();
})
//copyright.........................................
// Body js
var dteNow = new Date();
var intYear = dteNow.getFullYear();
$('#copyright').each(function() {
var text = $(this).text();
$(this).text(text.replace('CurrentCopyrightYear', intYear));
});
//copyright.........................................
// Body js
const open = document.querySelector('.container');
const close = document.querySelector('.close');
var tl = gsap.timeline({ defaults: { duration: 1, ease: 'expo.inOut' } });
open.addEventListener('click', () => {
if (tl.reversed()) {
tl.play();
} else {
tl.to('.header2', { right: "0px" ,top: "-500px", opacity: 0},"-=.1")
.to('nav', { right: "0px" ,top: "0px", opacity: 1},"-=.8")
.to('nav', { height: '100vh', width: '100vw',borderRadius: '0%' }, '-=.1')
.to('nav ul li a', { opacity: 1, pointerEvents: 'all', stagger: .2, }, '-=.8')
.to('.close', { opacity: 1, pointerEvents: 'all', }, "-=.8")
.to('nav h2 img', { opacity: 1 }, '-=1')
;
}
});
close.addEventListener('click', () => {
tl.reverse();
});
Comments
Post a Comment