diff --git a/Animations.css b/Animations.css new file mode 100644 index 0000000..979930b --- /dev/null +++ b/Animations.css @@ -0,0 +1,48 @@ +/* Keep stuff on the side. This class is added when JavaScript is enabled. */ +.HiddenToRight { + margin-left: 100%; + margin-right: -100%; +} + +.HiddenToLeft { + margin-left: -100%; + margin-right: 100%; +} + +@keyframes SlideInFromRight { + 0% { + margin-left: 100%; + margin-right: -100%; + } + + 100% { + margin-left: 0; + margin-right: 0; + } +} + +.SlideInFromRight { + animation-duration: 1s; + animation-name: SlideInFromRight; + animation-timing-function: ease-out; + animation-fill-mode: forwards; +} + +@keyframes SlideInFromLeft { + 0% { + margin-left: -100%; + margin-right: 100%; + } + + 100% { + margin-left: 0; + margin-right: 0; + } +} + +.SlideInFromLeft { + animation-duration: 1s; + animation-name: SlideInFromRight; + animation-timing-function: ease-out; + animation-fill-mode: forwards; +} diff --git a/index.css b/index.css index 22fbe19..d13ac6c 100644 --- a/index.css +++ b/index.css @@ -10,14 +10,8 @@ html { font-family: "Perfect DOS VGA 437"; background-color: #176464; overflow-x: hidden; -} - -/* This pre fixes a bug in regards to the typing animation not working properly. */ -pre { - position: relative; - font-size: 64px; - top: -10px; - text-align: left; + + text-align: center; } p { @@ -38,12 +32,8 @@ h3 { /* Header stuff. */ header { - align-items: center; - justify-content: center; display: block; - text-align: center; - min-width: 640px; margin-top: -50px; @@ -79,7 +69,7 @@ header { padding-left: 10px; padding-right: 5px; - margin-inline: auto; + margin: auto; background-color: #FBDB88; position: relative; @@ -87,6 +77,7 @@ header { animation-name: Startup; animation-play-state: running; + /* Change the steps for however many characters your text has. */ animation-timing-function: steps(18, jump-end); animation-fill-mode: forwards; animation-duration: 2s; @@ -116,10 +107,10 @@ header { /* Project stuff. */ .ProjectSection { - display: flex; - flex-flow: wrap; align-items: center; justify-content: center; + display: flex; + flex-flow: wrap; color: #FF9930; } @@ -163,7 +154,6 @@ header { .ProjectLink { text-decoration: none; - text-align: center; max-width: 620px; @@ -205,12 +195,6 @@ header { } /* Work experience stuff. */ -.WorkSection { - align-items: center; - text-align: center; - justify-content: center; -} - table { width: 100%; } @@ -229,30 +213,3 @@ td, th { width: 25%; height: 25%; } - -/* Keep stuff on the side. This class is added when JavaScript is enabled. */ -.SideLined { - margin-left: 100%; - margin-right: -100%; -} - -/* Slide in animations */ -@keyframes SlideIn { - 0% { - margin-left: 100%; - margin-right: -100%; - } - - 100% { - margin-left: 0; - margin-right: 0; - } -} - -.SlideIn { - - animation-duration: 1s; - animation-name: SlideIn; - animation-timing-function: ease-out; - animation-fill-mode: forwards; -} diff --git a/index.html b/index.html index e3763b6..81e6dbc 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + Crowded Games Group @@ -10,7 +11,7 @@
- 
|
+ 
|

CrowdedGames.group

diff --git a/index.js b/index.js index 3927e8d..330dc28 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,5 @@ // If Javascript is enabled, enable the cool javascript stuff! -document.getElementsByClassName("WorkSection")[0].classList.add("SideLined"); +document.getElementsByClassName("WorkSection")[0].classList.add("HiddenToRight"); // Sounds for animations to feel nice :3 const Typing = new Audio("Audio/KeyboardTyping.mp3"); const Glow = new Audio("Audio/Glow.mp3"); @@ -16,12 +16,12 @@ Cat.addEventListener("mouseover", (event) => { Noise.play(); }); // set the size of the Glow (SectionSolid) to the proper height (CSS defaults it to 200vh -document.getElementsByClassName("SectionSolid")[0].style.minHeight = String(document.getElementsByTagName("html")[0].offsetHeight - 190) + "px"; +document.getElementsByClassName("SectionSolid")[0].style.minHeight = String(document.getElementsByTagName("html")[0].offsetHeight - 180) + "px"; // force the user to topside of the window. window.scroll(0, 0); // play some animations as soon as the user gets to that amount of scroll. window.addEventListener("scroll", (event) => { - if (window.scrollY + 190 >= document.getElementsByClassName("ProjectSection")[0].clientHeight && !document.getElementsByClassName("WorkSection")[0].classList.contains("SlideIn")) { - document.getElementsByClassName("WorkSection")[0].classList.add("SlideIn"); + if (window.scrollY + 190 >= document.getElementsByClassName("ProjectSection")[0].clientHeight && !document.getElementsByClassName("WorkSection")[0].classList.contains("SlideInFromRight")) { + document.getElementsByClassName("WorkSection")[0].classList.add("SlideInFromRight"); } });