evan/ewpratten.com
1
Fork 0
Code Actions

added animation

Browse Source
This commit is contained in:
Evan Pratten 2019-04-04 16:20:20 -04:00
parent 9297c4c04e
commit 98becc2af2
7 changed files with 362 additions and 31 deletions

153
css/animations.css Normal file

@ -0,0 +1,153 @@
/* Animations */
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
/* Firefox < 16 */
@-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
/* Internet Explorer */
@-ms-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes slideleft {
from { left: 0; }
to { left: -100vw; }
}
/* Firefox < 16 */
@-moz-keyframes slideleft {
from { left: 0; }
to { left: -100vw; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slideleft {
from { left: 0; }
to { left: -100vw; }
}
/* Internet Explorer */
@-ms-keyframes slideleft {
from { left: 0; }
to { left: -100vw; }
}
@keyframes slideright {
from { left: -30vw; }
to { left: 0; }
}
/* Firefox < 16 */
@-moz-keyframes slideright {
from { left: -30vw; }
to { left: 0; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slideright {
from { left: -30vw; }
to { left: 0; }
}
/* Internet Explorer */
@-ms-keyframes slideright {
from { left: -30vw; }
to { left: 0; }
}
@keyframes slideup {
from { top: -100vh; }
to { top: 0; }
}
/* Firefox < 16 */
@-moz-keyframes slideup {
from { top: -100vh; }
to { top: 0; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slideup {
from { top: -100vh; }
to { top: 0; }
}
/* Internet Explorer */
@-ms-keyframes slideup {
from { top: -100vh; }
to { top: 0; }
}
/* Animation helpers */
.fade-out{
-webkit-animation: fadeout 0.5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeout 0.5s; /* Firefox < 16 */
-ms-animation: fadeout 0.5s; /* Internet Explorer */
-o-animation: fadeout 0.5s; /* Opera < 12.1 */
animation: fadeout 0.5s;
animation-fill-mode: forwards;
}
.slide-left{
-webkit-animation: slideleft 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: slideleft 1s; /* Firefox < 16 */
-ms-animation: slideleft 1s; /* Internet Explorer */
-o-animation: slideleft 1s; /* Opera < 12.1 */
animation: slideleft 1s;
animation-fill-mode: forwards;
}
.slide-right{
-webkit-animation: slideright 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: slideright 1s; /* Firefox < 16 */
-ms-animation: slideright 1s; /* Internet Explorer */
-o-animation: slideright 1s; /* Opera < 12.1 */
animation: slideright 1s;
/* animation-fill-mode: forwards; */
}
.slide-up{
-webkit-animation: slideup 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: slideup 2s; /* Firefox < 16 */
-ms-animation: slideup 2s; /* Internet Explorer */
-o-animation: slideup 2s; /* Opera < 12.1 */
animation: slideup 2s;
animation-fill-mode: forwards;
}
.hidden{
display:none !important;
}

65
css/main.css

@ -10,13 +10,25 @@ canvas {
}
html {
overflow: scroll;
overflow-x: hidden;
scroll-behavior: smooth;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
body{
margin:0;
padding:0;
height:100%;
background-color: rgba(130, 130, 238, 0.299);
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
@ -52,6 +64,15 @@ article {
}
.back{
text-align:left;
}
.back a:hover, .back a:visited, .back a:link, .back a:active, .back a:any-link{
color:rgb(201, 201, 226);
margin:0;
}
.name-wrapper{
margin:40;
}
@ -75,12 +96,19 @@ article {
}
.content-box{
max-width:60vw;
max-width:50vw;
margin:auto;
background-color: rgb(233, 233, 255);
padding:10px;
border-radius:10px;
text-align:center;
border-style: solid;
border-color: #3f32ca;
border-width: 5px;
}
dashed{
color: #3f32ca;
}
.content-box-wrapper{
@ -102,6 +130,9 @@ h1{
.content{
width:100%;
}
.thin{
width:0px !important;
}
.empty{
width:30vw;
@ -112,6 +143,10 @@ h1{
height:5vh;
}
.four-height{
height:25vh;
}
.full-height{
height:100vh;
background:none;
@ -136,6 +171,10 @@ a:hover, a:visited, a:link, a:active, a:any-link{
margin-right:0;
}
li a:hover{
margin:0;
}
/* Set font size for small screen */
@media only screen and (max-width: 600px) {
.name{
@ -188,27 +227,3 @@ a:hover, a:visited, a:link, a:active, a:any-link{
}
}
/* Animations */
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

58
devmon.html Normal file

@ -0,0 +1,58 @@
<head id="site">
<title>RetryLife</title>
<link href="/css/animations.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>
<body >
<div id="particles-js" >
<!-- Blank vertical space -->
<div class="full-height" id="blank"></div>
<!-- Main content -->
<table class="content">
<tr>
<td class="empty thin" id="blank top"></td>
<td class="info">
<div class="content-box " id="content">
<!-- Back button -->
<div class="back"><a onclick="slidedown('/')">Back</a></div>
<!-- Main text -->
<div class="content-box-wrapper">
<!-- Post time -->
<h1><dashed>---</dashed> Post Gap <dashed>---</dashed></h1>
<p>This is the amount of time between the last, and second last post on devrant</p>
<h2 id="time">20s</h2>
<!-- Newest post -->
<h1><dashed>---</dashed> Newest Post <dashed>---</dashed></h1>
<p>This is the rant id of the latest rant</p>
<h2 id="id">0000</h2>
<!-- ID Gap -->
<h1><dashed>---</dashed> ID Gap <dashed>---</dashed></h1>
<p>There is sometimes a gap between the id of each new rant form the last. This is the current gap</p>
<h2 id="gap">0000</h2>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/js/particles.min.js"></script>
<script src="/js/main.js"></script>
<script src="/js/console.js"></script>
<script src="/js/links.js"></script>
<script src="/js/devrant-monitor.js"></script>
<script src="/js/content-rizer.js"></script>
</body>

20
index.html

@ -1,17 +1,19 @@
<head>
<title>RetryLife</title>
<link href="/css/animations.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>
<body>
<body >
<div id="particles-js">
<article>
<!-- About Panel -->
<scetion><div class="about">
<scetion><div class="about" id="about">
<!-- Spacer -->
<div class="three-height"></div>
@ -27,7 +29,6 @@
<div class="links">
<a href="https://github.com/ewpratten">GitHub</a><br>
<a href="https://twitter.com/ewpratten">Twitter</a><br>
<!-- <a href="https://twitch.tv/retraxa">Twitch</a><br> -->
<a href="https://devrant.com/users/ewpratten">Devrant</a><br>
<a href="https://github.com/frc5024">Robotics</a><br>
<a href="#content">More</a>
@ -57,14 +58,20 @@
<div class="content-box" id="content">
<div class="content-box-wrapper">
<!-- About Me -->
<h1>--- About Me ---</h1>
<h1><dashed>---</dashed> About Me <dashed>---</dashed></h1>
<p>I am a teenager who loves to write code and make stuff. I tend to spend my free time either programming or thinking about programming</p>
<!-- Robotics -->
<h1>--- Robotics ---</h1>
<h1><dashed>---</dashed> Robotics <dashed>---</dashed></h1>
<p>As a part of Raider Robotics (frc5024), I co-lead the programming team and help teach new programmers about programming in compiled languages, interfacing with hardware, and computer vision.</p>
<!-- -->
<!-- Projects -->
<h1><dashed>---</dashed> Projects <dashed>---</dashed></h1>
<p>Every year, I work on a large number of projects. Some of the interesting ones are listed here:</p>
<li><a onclick="transition('https://github.com/frc5024')">Robotics Projects</a></li>
<li><a onclick="transition('/devmon.html')">devRant API Status</a></li>
</div>
</div>
</td>
@ -76,4 +83,5 @@
<script src="/js/particles.min.js"></script>
<script src="/js/main.js"></script>
<script src="/js/console.js"></script>
<script src="/js/links.js"></script>
</body>

55
js/content-rizer.js Normal file

@ -0,0 +1,55 @@
async function slideup(){
var blank = document.getElementById("blank");
var site = document.getElementById("site");
if (screen && screen.width > 600) {
site.style = 'scroll-behavior: unset;';
window.location = "#top"
await sleep(400);
site.style = 'scroll-behavior: smooth;';
window.location = "#content"
await sleep(1000);
}
blank.style = "display:none!important;overflow: hidden; position:fixed; ";
console.log("slide");
return;
}
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c);
}
};
async function slidedown(link){
var blank = document.getElementById("blank");
var site = document.getElementById("site");
if (screen && screen.width > 600) {
blank.style = "display:block !important; ";
site.style = 'scroll-behavior: unset !important;';
window.location = "#content"
await sleep(20);
site.style = 'scroll-behavior: smooth !important;';
scrollToTop();
await sleep(500);
}
window.location = link;
return;
}
slideup();

20
js/devrant-monitor.js Normal file

@ -0,0 +1,20 @@
async function refreshStats() {
//get ids
var time = document.getElementById("time");
var gap = document.getElementById("gap");
var id = document.getElementById("id");
// loop
while (true) {
$.getJSON('https://api.retrylife.ca/devrant/rants/info', function (data) {
// console.log(data);
time.innerHTML = data["time_gap"] + "s";
id.innerHTML = data["newest_id"];
gap.innerHTML = data["id_gap"];
});
await sleep(5000);
}
}
refreshStats();

22
js/links.js Normal file

@ -0,0 +1,22 @@
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function transition(link){
var content = document.getElementById("content");
var about = document.getElementById("about");
var all = document.getElementById("body");
console.log(link);
if (screen && screen.width > 600) {
content.classList.add("fade-out");
await sleep(300);
about.classList.add("slide-left");
// all.classList.add("fade-out");
await sleep(1000);
// content.classList.add("hidden");
}
window.location = link;
}