Skip to content

Instantly share code, notes, and snippets.

@juliancruzsanchez

juliancruzsanchez/earth-presentation.markdown

Last active February 18, 2018 05:50
Show Gist options
  • Save juliancruzsanchez/3e1642df7e3dcb0206422f84f5c1221e to your computer and use it in GitHub Desktop.
Save juliancruzsanchez/3e1642df7e3dcb0206422f84f5c1221e to your computer and use it in GitHub Desktop.
Download ZIP
Earth Presentation
Raw
index.html
<body>
<div class="split left">
<div id="mars" class="centered">
<div class="intro"><img src="https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2015/564382d629067.png" height=120px width=120px/></div>
</div>
<!-- This is earth -->
<div class="centered" id="earth">
<div class="intro">
<div id="world"></div>
</div>
</div>
</div>
<div class="split right">
<center>
<p class="text switch" onclick="myFunction()">Change Planet</p>
</center>
<div class="centered text">
<h1 id="title" class="planet-title">Earth</h1>
<p class="planet-info"></p>
</div>
</div>
</body>
Raw
script.js
planets = [
{
'name': 'Mars',
"mass":"11",
"id":"mars"
},
{
'name': 'Earth',
"mass":"11"
}
]
var desc = document.getElementById("planet-info");
var name = document.getElementById("title");
function myFunction() {
name.innerHTML = planets[1].name;
desc.innerHTML = planets[1].mass;
planets[1].id.style.display = "block";
mars.id.style.display = "none";
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
Raw
style.scss
@import "compass/css3";
body {
padding: 0;
margin: 0;
}
.mars {
&:before {
@include box-shadow(inset -30px 0 0 -10px rgba(0, 0, 0, 0.3));
@include border-radius(50%);
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 50;
}
&:after {
@include border-radius(6px);
@include animation(the-awesome-animation 14s linear 0s infinite);
content: " ";
position: absolute;
top: 0px;
left: 0px;
width: 18px;
height: 12px;
background: none;
z-index: 10;
}
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
overflow-x: hidden;
padding-top: 20px;
}
button {
background-color: none;
}
.text {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.top {
opacity: 0.7;
}
.planet-title span {
display: none;
}
/* Control the left side */
.left {
left: 0;
background-color: #06121e;
}
/* Control the right side */
.right {
right: 0;
background: #f7f8f7;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
p {
display: block;
overflow-wrap: break-word;
}
.intro {
position: relative;
display: inline-block;
font-size: 0;
width: 120px;
height: 120px;
&:before {
@include border-radius(50%);
@include animation(intro-animation 0.75s cubic-bezier(0.3, 1.8, 0.7, 1) normal forwards);
content: " ";
position: absolute;
top: -48px;
left: -48px;
width: 200px;
height: 200px;
border: solid 8px #f9f9f9;
}
}
#world {
@include transform(translateZ(0));
@include border-radius(50%);
position: relative;
display: inline-block;
overflow: hidden;
width: 120px;
height: 120px;
background: #2f7db4;
&:before {
@include box-shadow(inset -30px 0 0 -10px rgba(0, 0, 0, 0.3));
@include border-radius(50%);
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 50;
}
&:after {
@include border-radius(6px);
@include animation(the-awesome-animation 14s linear 0s infinite);
content: " ";
position: absolute;
top: 0px;
left: 0px;
width: 18px;
height: 12px;
background: none;
z-index: 10;
}
}
@include keyframes(the-awesome-animation) {
0% {
@include box-shadow((
-253px 16px 0 0 rgba(white, 0.8),
-213px 41px 0 1px rgba(white, 0.8),
-191px -1px 0 0 rgba(white, 0.8),
-160px 59px 0 -2px rgba(white, 0.8),
-226px 83px 0 3px rgba(white, 0.8),
-109px 32px 0 0 rgba(white, 0.8),
-90px 89px 0 1px rgba(white, 0.8),
-160px 110px 0 -2px rgba(white, 0.8),
-53px 16px 0 0 rgba(white, 0.8),
-13px 41px 0 1px rgba(white, 0.8),
9px -1px 0 0 rgba(white, 0.8),
40px 59px 0 -2px rgba(white, 0.8),
-26px 83px 0 3px rgba(white, 0.8),
91px 32px 0 0 rgba(white, 0.8),
110px 89px 0 1px rgba(white, 0.8),
40px 110px 0 -2px rgba(white, 0.8),
0 10px 0 3px #81c763,
6px 10px 0 3px #81c763,
3px 20px 0 -4px #81c763,
3px 24px 0 -2px #81c763,
9px 24px 0 -2px #81c763,
-20px 50px 0 -2px #81c763,
30px 78px 0 2px #81c763,
74px 108px 0 -2px #81c763,
60px 32px 0 -3px #81c763,
85px 69px 0 0 #81c763,
100px 0 0 0 #81c763,
140px 42px 0 0 #81c763,
143px 32px 0 -4px #81c763,
220px 10px 0 3px #81c763,
226px 10px 0 3px #81c763,
223px 20px 0 -4px #81c763,
223px 24px 0 -2px #81c763,
229px 24px 0 -2px #81c763,
200px 50px 0 -2px #81c763,
250px 78px 0 2px #81c763,
294px 108px 0 -2px #81c763,
280px 32px 0 -3px #81c763,
305px 69px 0 0 #81c763,
300px 0 0 0 #81c763,
360px 42px 0 0 #81c763,
363px 32px 0 -4px #81c763
));
}
100% {
@include box-shadow((
-53px 16px 0 0 rgba(white, 0.8),
-13px 41px 0 1px rgba(white, 0.8),
9px -1px 0 0 rgba(white, 0.8),
40px 59px 0 -2px rgba(white, 0.8),
-26px 83px 0 3px rgba(white, 0.8),
91px 32px 0 0 rgba(white, 0.8),
110px 89px 0 1px rgba(white, 0.8),
40px 110px 0 -2px rgba(white, 0.8),
147px 16px 0 0 rgba(white, 0.8),
187px 41px 0 1px rgba(white, 0.8),
209px -1px 0 0 rgba(white, 0.8),
240px 59px 0 -2px rgba(white, 0.8),
174px 83px 0 3px rgba(white, 0.8),
291px 32px 0 0 rgba(white, 0.8),
310px 89px 0 1px rgba(white, 0.8),
240px 110px 0 -2px rgba(white, 0.8),
-220px 10px 0 3px #81c763,
-214px 10px 0 3px #81c763,
-217px 20px 0 -4px #81c763,
-217px 24px 0 -2px #81c763,
-211px 24px 0 -2px #81c763,
-240px 50px 0 -2px #81c763,
-190px 78px 0 2px #81c763,
-146px 108px 0 -2px #81c763,
-160px 32px 0 -3px #81c763,
-135px 69px 0 0 #81c763,
-120px 0 0 0 #81c763,
-80px 42px 0 0 #81c763,
-77px 32px 0 -4px #81c763,
0 10px 0 3px #81c763,
6px 10px 0 3px #81c763,
3px 20px 0 -4px #81c763,
3px 24px 0 -2px #81c763,
9px 24px 0 -2px #81c763,
-20px 50px 0 -2px #81c763,
30px 78px 0 2px #81c763,
74px 108px 0 -2px #81c763,
60px 32px 0 -3px #81c763,
85px 69px 0 0 #81c763,
100px 0 0 0 #81c763,
140px 42px 0 0 #81c763,
143px 32px 0 -4px #81c763
));
}
}
@include keyframes(intro-animation) {
0% {
@include scale(0);
}
100% {
@include scale(1);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translatey(0px);
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />
<link href="https://raw.github.com/daneden/animate.css/master/animate.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment