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();
- 이전글간단한 예로 알아 보는 ES2020 특징 20.01.14
- 다음글반응 형 머티리얼 디자인 부트 스트랩 카드 그리드 20.01.12