정보실

웹학교

정보실

javascript The Solar System 2010 - 2020

본문

Rob DiMarzo의 "2010 년 1 월 1 일부터 2020 년 1 월 1 일 사이의 천상의 이웃 궤도"에 대한 탐색은 Greensock 3을 사용하여 구축되었습니다.


https://codepen.io/robdimarzo/pen/JjoMLmz 


https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/gsap.min.js

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js


HTML : 



<!-- Array of planet name, distance from sun in AU, and color - used for each iteration below-->

<!-- Mixin for creating SVG orbit, planet, trail, and mask-->

<header>

  <h1>The Solar System from 2010 to 2020</h1>

  <h2 id="year">2020</h2>

  <button id="button" onClick="playAnimation()">Pause</button>

</header>

<svg class="solarsystem">

  <circle class="sun" r="2" fill="#fff"></circle>

  <g id="mercury">

    <!-- Rectangle for planet's trail-->

    <clipPath id="trailmercury">

      <rect class="mask mask--mercury" width="0" height="25" y="0"></rect>

    </clipPath>

    <!-- Path for orbit-->

    <path class="orbit orbit--mercury" stroke="silver" d="M0,-10 C5.5,-10 10,-5.5 10,0 C10,5.5 5.5,10 0,10 C-5.5,10 -10,5.5 -10,0 C-10,-5.5 -5.5,-10 0,-10 Z" id="orbit--mercury"></path>

    <!-- Path for trail, same as orbit - gets exposed by clippath-->

    <path class="trail trail--mercury" stroke="silver" d="M0,-10 C5.5,-10 10,-5.5 10,0 C10,5.5 5.5,10 0,10 C-5.5,10 -10,5.5 -10,0 C-10,-5.5 -5.5,-10 0,-10 Z" clip-path="url(#trailmercury)"></path>

    <!-- Circle for planet-->

    <circle class="planet planet--mercury" r="3" fill="silver"></circle>

  </g>

  <g id="venus">

    <!-- Rectangle for planet's trail-->

    <clipPath id="trailvenus">

      <rect class="mask mask--venus" width="0" height="25" y="0"></rect>

    </clipPath>

    <!-- Path for orbit-->

    <path class="orbit orbit--venus" stroke="goldenrod" d="M0,-17.5 C9.625,-17.5 17.5,-9.625 17.5,0 C17.5,9.625 9.625,17.5 0,17.5 C-9.625,17.5 -17.5,9.625 -17.5,0 C-17.5,-9.625 -9.625,-17.5 0,-17.5 Z" id="orbit--venus"></path>

    <!-- Path for trail, same as orbit - gets exposed by clippath-->

    <path class="trail trail--venus" stroke="goldenrod" d="M0,-17.5 C9.625,-17.5 17.5,-9.625 17.5,0 C17.5,9.625 9.625,17.5 0,17.5 C-9.625,17.5 -17.5,9.625 -17.5,0 C-17.5,-9.625 -9.625,-17.5 0,-17.5 Z" clip-path="url(#trailvenus)"></path>

    <!-- Circle for planet-->

    <circle class="planet planet--venus" r="3" fill="goldenrod"></circle>

  </g>

  <g id="earth">

    <!-- Rectangle for planet's trail-->

    <clipPath id="trailearth">

      <rect class="mask mask--earth" width="0" height="25" y="0"></rect>

    </clipPath>

    <!-- Path for orbit-->

    <path class="orbit orbit--earth" stroke="deepskyblue" d="M0,-25 C13.750000000000002,-25 25,-13.750000000000002 25,0 C25,13.750000000000002 13.750000000000002,25 0,25 C-13.750000000000002,25 -25,13.750000000000002 -25,0 C-25,-13.750000000000002 -13.750000000000002,-25 0,-25 Z" id="orbit--earth"></path>

    <!-- Path for trail, same as orbit - gets exposed by clippath-->

    <path class="trail trail--earth" stroke="deepskyblue" d="M0,-25 C13.750000000000002,-25 25,-13.750000000000002 25,0 C25,13.750000000000002 13.750000000000002,25 0,25 C-13.750000000000002,25 -25,13.750000000000002 -25,0 C-25,-13.750000000000002 -13.750000000000002,-25 0,-25 Z" clip-path="url(#trailearth)"></path>

    <!-- Circle for planet-->

    <circle class="planet planet--earth" r="3" fill="deepskyblue"></circle>

  </g>

  <g id="mars">

    <!-- Rectangle for planet's trail-->

    <clipPath id="trailmars">

      <rect class="mask mask--mars" width="0" height="25" y="0"></rect>

    </clipPath>

    <!-- Path for orbit-->

    <path class="orbit orbit--mars" stroke="crimson" d="M0,-37.5 C20.625,-37.5 37.5,-20.625 37.5,0 C37.5,20.625 20.625,37.5 0,37.5 C-20.625,37.5 -37.5,20.625 -37.5,0 C-37.5,-20.625 -20.625,-37.5 0,-37.5 Z" id="orbit--mars"></path>

    <!-- Path for trail, same as orbit - gets exposed by clippath-->

    <path class="trail trail--mars" stroke="crimson" d="M0,-37.5 C20.625,-37.5 37.5,-20.625 37.5,0 C37.5,20.625 20.625,37.5 0,37.5 C-20.625,37.5 -37.5,20.625 -37.5,0 C-37.5,-20.625 -20.625,-37.5 0,-37.5 Z" clip-path="url(#trailmars)"></path>

    <!-- Circle for planet-->

    <circle class="planet planet--mars" r="3" fill="crimson"></circle>

  </g>

  <g id="jupiter">

    <!-- Rectangle for planet's trail-->

    <clipPath id="trailjupiter">

      <rect class="mask mask--jupiter" width="0" height="25" y="0"></rect>

    </clipPath>

    <!-- Path for orbit-->

    <path class="orbit orbit--jupiter" stroke="sandybrown" d="M0,-130 C71.5,-130 130,-71.5 130,0 C130,71.5 71.5,130 0,130 C-71.5,130 -130,71.5 -130,0 C-130,-71.5 -71.5,-130 0,-130 Z" id="orbit--jupiter"></path>

    <!-- Path for trail, same as orbit - gets exposed by clippath-->

    <path class="trail trail--jupiter" stroke="sandybrown" d="M0,-130 C71.5,-130 130,-71.5 130,0 C130,71.5 71.5,130 0,130 C-71.5,130 -130,71.5 -130,0 C-130,-71.5 -71.5,-130 0,-130 Z" clip-path="url(#trailjupiter)"></path>

    <!-- Circle for planet-->

    <circle class="planet planet--jupiter" r="3" fill="sandybrown"></circle>

  </g>

  <g id="saturn">

    <!-- Rectangle for planet's trail-->

    <clipPath id="trailsaturn">

      <rect class="mask mask--saturn" width="0" height="25" y="0"></rect>

    </clipPath>

    <!-- Path for orbit-->

    <path class="orbit orbit--saturn" stroke="gold" d="M0,-240 C132,-240 240,-132 240,0 C240,132 132,240 0,240 C-132,240 -240,132 -240,0 C-240,-132 -132,-240 0,-240 Z" id="orbit--saturn"></path>

    <!-- Path for trail, same as orbit - gets exposed by clippath-->

    <path class="trail trail--saturn" stroke="gold" d="M0,-240 C132,-240 240,-132 240,0 C240,132 132,240 0,240 C-132,240 -240,132 -240,0 C-240,-132 -132,-240 0,-240 Z" clip-path="url(#trailsaturn)"></path>

    <!-- Circle for planet-->

    <circle class="planet planet--saturn" r="3" fill="gold"></circle>

  </g>

  <g id="uranus">

    <!-- Rectangle for planet's trail-->

    <clipPath id="trailuranus">

      <rect class="mask mask--uranus" width="0" height="25" y="0"></rect>

    </clipPath>

    <!-- Path for orbit-->

    <path class="orbit orbit--uranus" stroke="cyan" d="M0,-480 C264,-480 480,-264 480,0 C480,264 264,480 0,480 C-264,480 -480,264 -480,0 C-480,-264 -264,-480 0,-480 Z" id="orbit--uranus"></path>

    <!-- Path for trail, same as orbit - gets exposed by clippath-->

    <path class="trail trail--uranus" stroke="cyan" d="M0,-480 C264,-480 480,-264 480,0 C480,264 264,480 0,480 C-264,480 -480,264 -480,0 C-480,-264 -264,-480 0,-480 Z" clip-path="url(#trailuranus)"></path>

    <!-- Circle for planet-->

    <circle class="planet planet--uranus" r="3" fill="cyan"></circle>

  </g>

  <g id="neptune">

    <!-- Rectangle for planet's trail-->

    <clipPath id="trailneptune">

      <rect class="mask mask--neptune" width="0" height="25" y="0"></rect>

    </clipPath>

    <!-- Path for orbit-->

    <path class="orbit orbit--neptune" stroke="dodgerblue" d="M0,-750 C412.50000000000006,-750 750,-412.50000000000006 750,0 C750,412.50000000000006 412.50000000000006,750 0,750 C-412.50000000000006,750 -750,412.50000000000006 -750,0 C-750,-412.50000000000006 -412.50000000000006,-750 0,-750 Z" id="orbit--neptune"></path>

    <!-- Path for trail, same as orbit - gets exposed by clippath-->

    <path class="trail trail--neptune" stroke="dodgerblue" d="M0,-750 C412.50000000000006,-750 750,-412.50000000000006 750,0 C750,412.50000000000006 412.50000000000006,750 0,750 C-412.50000000000006,750 -750,412.50000000000006 -750,0 C-750,-412.50000000000006 -412.50000000000006,-750 0,-750 Z" clip-path="url(#trailneptune)"></path>

    <!-- Circle for planet-->

    <circle class="planet planet--neptune" r="3" fill="dodgerblue"></circle>

  </g>

</svg>


CSS : 


body {

  background: #17171b;

  color: #ffffff;

  margin: 0;

  font-family: "Space Mono";

}

svg {

  height: 100vh;

  width: 100vw;

  position: fixed;

  top: 50%;

  left: 50%;

  overflow: visible;

}


header {

  position: fixed;

  z-index: 1;

  top: 100px;

  width: 100vw;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  color: rgba(255,255,255,.75);

}


h1 {

  font-size: 14px;

  font-weight: 100;

  text-transform: uppercase;

  margin: 0;

}


h2{

  font-size: 64px;

  color: rgba(255,255,255,1);

  font-weight: 100;

  margin: 0;

}


button {

  font-family: "Space Mono";

  font-size: 12px;

  background: transparent;

  color: #fff;

  font-weight: 100;

  text-transform: uppercase;

  padding: 5px 20px;

}


.solarsystem {

  height: 100%;

  width: 100%;

  position: fixed;

  bottom: -35%;

  transform: rotate3d(1,0,0,65deg);

}


.planet {

  transform-box: fill-box;

  transform-origin: 100% 100%;

}


.orbit,

.trail { 

  fill: transparent;

  stroke-width: 3;

  stroke-opacity: .25;

}


.trail {

  stroke-opacity: 1;

}


Javascript : 


gsap.registerPlugin(MotionPathPlugin);


//Get SVG path data from HTML, derived from Pug mixin

const mercuryOrbit = document.getElementById("orbit--mercury").getAttribute("d");

const venusOrbit = document.getElementById("orbit--venus").getAttribute("d");

const earthOrbit = document.getElementById("orbit--earth").getAttribute("d");

const marsOrbit = document.getElementById("orbit--mars").getAttribute("d");

const jupiterOrbit = document.getElementById("orbit--jupiter").getAttribute("d");

const saturnOrbit = document.getElementById("orbit--saturn").getAttribute("d");

const uranusOrbit = document.getElementById("orbit--uranus").getAttribute("d");

const neptuneOrbit = document.getElementById("orbit--neptune").getAttribute("d");


//Variables 

let button = document.getElementById("button");

let yearDisplay = document.getElementById("year");

let currentYear = {year:2020};

let dur = 2;

let ease= "power1.inOut";

let trail = 50;

let tl = gsap.timeline()


//Functions

//Update current year display

function countYear() {

  yearDisplay.innerHTML = currentYear.year;

}

//Toggle button text

function toggleButtonText() {

  if (button.innerHTML == "Play") {

    button.innerHTML = "Pause"

  } else {

    button.innerHTML = "Play"

  }

}

//Play and pause the timeline

function playAnimation() {

  tl.paused() ? tl.play() : tl.pause();

  toggleButtonText();

}


//GSAP ANIMATION TIMELINE 

//********************************************************


//Animate year count between 2020 and 2010

tl.to(currentYear,{

  year:"-=10",

  roundProps:"year",

  duration: dur,

  ease: ease,

  onUpdate:function(){

    countYear();

  }}, 0);


//Mercury

/////////////////////////////////////////////////////////

tl.to(".planet--mercury", {

  motionPath: {

    path: mercuryOrbit,

    start: .27,

    end: 40.89

  },

  duration: dur,

  ease: ease,

  immediateRender: true    

},0);


tl.to(".mask--mercury", {

    motionPath: {

      path: mercuryOrbit,

      autoRotate: true,

      start: .27,

      end: 40.89

    },

    scaleX: 1,

    duration: dur,

    ease: ease,

    immediateRender: true,

},0);


tl.to(".mask--mercury", { 

    width: trail, 

    duration: dur/2,

    ease: ease,

},0);


tl.to(".mask--mercury", { 

    width: 0, 

    duration: dur/2,

    ease: ease,

},1);


tl.fromTo(".mask--mercury",{ 

  scaleX: -1 }, { 

  scaleX: -1, duration: dur

}, 0);




//Venus

/////////////////////////////////////////////////////////

tl.to(".planet--venus", {

  motionPath: {

    path: venusOrbit,

    start: .99,

    end: 17.22

  },

  duration: dur,

  ease: ease,

  immediateRender: true

},0);


tl.to(".mask--venus", {

    motionPath: {

      path: venusOrbit,

      autoRotate: true,

      start: .99,

      end: 17.22

    },

    scaleX: 1,

    duration: dur,

    ease: ease,

    immediateRender: true,

},0);


tl.to(".mask--venus", { 

    width: trail, 

    duration: dur/2,

    ease: ease,

},0);


tl.to(".mask--venus", { 

    width: 0, 

    duration: dur/2,

    ease: ease,

},1);


tl.fromTo(".mask--venus",{ 

  scaleX: -1 }, { 

  scaleX: -1, duration: dur

}, 0);





//Earth

/////////////////////////////////////////////////////////

tl.to(".planet--earth", {

  motionPath: {

    path: earthOrbit,

    start: .72,

    end: 10.72

  },

  duration: dur,

  ease: ease,

  immediateRender: true  

},0);


tl.to(".mask--earth", {

    motionPath: {

      path: earthOrbit,

      autoRotate: true,

      start: .72,

      end: 10.72

    },

    scaleX: 1,

    duration: dur,

    ease: ease,

    immediateRender: true,

},0);


tl.to(".mask--earth", { 

    width: trail, 

    duration: dur/2,

    ease: ease,

},0);


tl.to(".mask--earth", { 

    width: 0, 

    duration: dur/2,

    ease: ease,

},1);


tl.fromTo(".mask--earth",{ 

  scaleX: -1 }, { 

  scaleX: -1, duration: dur

}, 0);




//Mars

/////////////////////////////////////////////////////////

tl.to(".planet--mars", {

  motionPath: {

    path: marsOrbit,

    start: .39,

    end: 5.67

  },

  duration: dur,

  ease: ease,

  immediateRender: true

}, 0);


tl.to(".mask--mars", {

    motionPath: {

      path: marsOrbit,

      autoRotate: true,

      start: .39,

      end: 5.67

    },

    scaleX: 1,

    duration: dur,

    ease: ease,

    immediateRender: true,

},0);


tl.to(".mask--mars", { 

    width: trail, 

    duration: dur/2,

    ease: ease,

},0);


tl.to(".mask--mars", { 

    width: 0, 

    duration: dur/2,

    ease: ease,

},1);


tl.fromTo(".mask--mars",{ 

  scaleX: -1 }, { 

  scaleX: -1, duration: dur

}, 0);



//Jupiter

/////////////////////////////////////////////////////////

tl.to(".planet--jupiter", {

  motionPath: {

    path: jupiterOrbit,

    autoRotate: true,

    start: .23,

    end: 1.07

  },

  duration: dur,

  ease: ease,

  immediateRender: true,

},0);



tl.to(".mask--jupiter", {

    motionPath: {

      path: jupiterOrbit,

      autoRotate: true,

      start: .23,

      end: 1.07

    },

    scaleX: 1,

    duration: dur,

    ease: ease,

    immediateRender: true,

},0);


tl.to(".mask--jupiter", { 

    width: trail, 

    duration: dur/2,

    ease: ease,

},0);


tl.to(".mask--jupiter", { 

    width: 0, 

    duration: dur/2,

    ease: ease,

},1);


tl.fromTo(".mask--jupiter",{ 

  scaleX: -1 }, { 

  scaleX: -1, duration: dur

}, 0);




//Saturn

/////////////////////////////////////////////////////////

tl.to(".planet--saturn", {

  motionPath: {

    path: saturnOrbit,

    autoRotate: true,

    start: .17,

    end: .51

  },

  duration: dur,

  ease: "power1.inOut",

  immediateRender: true,

},0);


tl.to(".mask--saturn", {

    motionPath: {

      path: saturnOrbit,

      autoRotate: true,

      start: .17,

      end: .51

    },

    scaleX: 1,

    duration: dur,

    ease: ease,

    immediateRender: true,

},0);


tl.to(".mask--saturn", { 

    width: trail, 

    duration: dur/2,

    ease: ease,

},0);


tl.to(".mask--saturn", { 

    width: 0, 

    duration: dur/2,

    ease: ease,

},1);


tl.fromTo(".mask--saturn",{ 

  scaleX: -1 }, { 

  scaleX: -1, duration: dur

}, 0);




//Uranus

/////////////////////////////////////////////////////////

tl.to(".planet--uranus", {

  motionPath: {

    path: uranusOrbit,

    autoRotate: true,

    start: .9,

    end: 1.02

  },

  duration: dur,

  ease: ease,

  immediateRender: true,

},0);



tl.to(".mask--uranus", {

    motionPath: {

      path: uranusOrbit,

      autoRotate: true,

      start: .9,

      end: 1.02

    },

    scaleX: 1,

    duration: dur,

    ease: ease,

    immediateRender: true,

},0);


tl.to(".mask--uranus", { 

    width: trail, 

    duration: dur/2,

    ease: ease,

},0);


tl.to(".mask--uranus", { 

    width: 0, 

    duration: dur/2,

    ease: ease,

},1);


tl.fromTo(".mask--uranus",{ 

  scaleX: -1 }, { 

  scaleX: -1, duration: dur

}, 0);




//Neptune

/////////////////////////////////////////////////////////

tl.to(".planet--neptune", {

  motionPath: {

    path: neptuneOrbit,

    autoRotate: true,

    start: .04,

    end: .1

  },

  duration: dur,

  ease: "power1.inOut",

  immediateRender: true,

},0);


tl.to(".mask--neptune", {

    motionPath: {

      path: neptuneOrbit,

      autoRotate: true,

      start: .04,

      end: .1

    },

    scaleX: 1,

    duration: dur,

    ease: ease,

    immediateRender: true,

},0);


tl.to(".mask--neptune", { 

    width: trail, 

    duration: dur/2,

    ease: ease,

},0);


tl.to(".mask--neptune", { 

    width: 0, 

    duration: dur/2,

    ease: ease,

},1);



tl.fromTo(".mask--neptune",{ 

  scaleX: -1 }, { 

  scaleX: -1, duration: dur

}, 0);


//Start and configure timeline

/////////////////////////////////////////////////////////

tl.yoyo(true).repeat(-1).repeatDelay(.25);

tl.play();





페이지 정보

조회 35회 ]  작성일20-01-14 12:16

웹학교