diff --git a/angular.json b/angular.json index c638594..c2d9930 100644 --- a/angular.json +++ b/angular.json @@ -37,7 +37,8 @@ "./node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js", "./node_modules/leaflet-openweathermap/leaflet-openweathermap.js", "./node_modules/leaflet-rotatedmarker/leaflet.rotatedMarker.js", - "./node_modules/esri-leaflet/dist/esri-leaflet.js" + "./node_modules/esri-leaflet/dist/esri-leaflet.js", + "./node_modules/jquery/dist/jquery.js" ] }, "configurations": { diff --git a/package.json b/package.json index bd88d59..0ececd0 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "esri-leaflet": "^2.3.0", "firebase": "^6.3.0", "hammerjs": "^2.0.8", + "jquery": "^3.4.1", "leaflet": "^1.5.1", "leaflet-openweathermap": "^1.0.0", "leaflet-polylinedecorator": "^1.6.0", diff --git a/src/app/animations.ts b/src/app/animations.ts index 9c59acc..ce0e37c 100644 --- a/src/app/animations.ts +++ b/src/app/animations.ts @@ -26,7 +26,7 @@ export const fadeIn = trigger('fadeIn', [ export const fadeOut = trigger('fadeOut', [ transition(':leave', [ style({ opacity: 1 }), - animate(defaultTiming, style({ opacity: 0 })) + animate(1500, style({ opacity: 0 })) ]) ]); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 14bd11e..fdf9f05 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,9 +17,11 @@ import {AngularFirestoreModule} from "@angular/fire/firestore"; import {ToolbarComponent} from "./components/toolbar/toolbar.component"; import {PaletteComponent} from "./components/palette/palette.component"; import {MarkerComponent} from "./components/marker/marker.component"; +import {AnimatedBackgroundComponent} from "./components/animatedBackground/animatedBackground.component"; @NgModule({ declarations: [ + AnimatedBackgroundComponent, AppComponent, CalibrateComponent, HomeComponent, diff --git a/src/app/components/animatedBackground/animatedBackground.component.html b/src/app/components/animatedBackground/animatedBackground.component.html new file mode 100644 index 0000000..b6f3573 --- /dev/null +++ b/src/app/components/animatedBackground/animatedBackground.component.html @@ -0,0 +1,2166 @@ +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + > + + + + + + + + + + +
+ + +
+
+
+
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + + + + + + + + + + + +
+
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ + +
+ + diff --git a/src/app/components/animatedBackground/animatedBackground.component.scss b/src/app/components/animatedBackground/animatedBackground.component.scss new file mode 100644 index 0000000..784db15 --- /dev/null +++ b/src/app/components/animatedBackground/animatedBackground.component.scss @@ -0,0 +1,1164 @@ +@import url(https://fonts.googleapis.com/css?family=Open+Sans:300); + +.cover { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 600; + background-color: black; +} + +/* Global Styles + ---------------------------------------------- */ +html {font-family: 'Open Sans', sans-serif; background: #0D133A; height:100%; font-size: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-smoothing: antialiased;overflow: hidden;position: relative;} +body {height:100%;overflow: hidden; margin: 0; font-size: 1em; line-height: 1.4; position: relative;} +img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } +svg:not(:root) { overflow: hidden; } +a{color: white;text-decoration: none;} + +/* Animation globals + ---------------------------------------------- */ +#landscape, .land, #bottom, .stags,.stag, .counter:before, #lensFlare, .sunMask{ + animation-duration: 60s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +/* Background gradients + ---------------------------------------------- */ +#sky{ + height: 60%; + margin-bottom: -6px; + position: absolute; + top: 0px; + z-index: 2; +} +#sky-rect{height:100%;} + +#reflection, #sunMask{ + height: 40%; + position: absolute; + top: 60%; + z-index: 4; +} +#reflection-rect{height:100%;} +#sunMask{ + background: #0D133A; + height: 40%; + position: absolute; + top: 60%; + width: 100%; +} + +/* Stag + ---------------------------------------------- */ +#stag{ + position: absolute; + bottom: 15.3%; + width: 6.3%; + left: 38%; + z-index: 5; +} +.stag{ + width:100%; + position: absolute; + bottom: 0px; +} +.stags{ + animation-name: stags; + animation-delay:1s; +} +@keyframes stags{ + 0% { fill:#0D141E;} + 4% { fill:#101522;} + 8% { fill:#121726;} + 12% { fill:#141829;} + 16% { fill:#1C1E3C;} + 20% { fill:#22214F;} + 24% { fill:#262262;} + 28% { fill:#1D4065;} + 32% { fill:#125768;} + 36% { fill:#1E4553;} + 40% { fill:#1E404E;} + 44% { fill:#1E3B49;} + 48% { fill:#1D3643;} + 52% { fill:#1C313E;} + 56% { fill:#1C3344;} + 60% { fill:#1C3449;} + 64% { fill:#1B344F;} + 68% { fill:#183454;} + 72% { fill:#242B4A;} + 76% { fill:#2B2241;} + 80% { fill:#24203C;} + 84% { fill:#1D1D37;} + 88% { fill:#151A32;} + 92% { fill:#14192C;} + 96% { fill:#111725;} + 100% { fill:#0D141E;} +} +#stag1{ + animation-name: stag_one; + width: 108%; + left: -20%; + +} +@keyframes stag_one{ + 0% {opacity:1.0;} + 15% {opacity:1.0;} + 20% {opacity:0.0;} + 90% {opacity:0.0;} + 95% {opacity:1.0;} + 100% {opacity:1.0;} +} +#stag2{ + animation-name: stag_two; +} +@keyframes stag_two{ + 0% {opacity:0.0;} + 17% {opacity:0.0;} + 20% {opacity:1.0;} + 40% {opacity:1.0;} + 45% {opacity:0.0;} + 65% {opacity:0.0;} + 70% {opacity:1.0;} + 90% {opacity:1.0;} + 95% {opacity:0.0;} + 100% {opacity:0.0;} +} +#stag3{ + animation-name: stag_three; + width: 144%; + left: -10%; + bottom: -3%; +} +@keyframes stag_three{ + 0% {opacity:0.0;} + 15% {opacity:0.0;} + 20% {opacity:0.0;} + 40% {opacity:0.0;} + 45% {opacity:1.0;} + 65% {opacity:1.0;} + 70% {opacity:0.0;} + 100% {opacity:0.0;} +} + +/* Sun + ---------------------------------------------- */ +.sunMask{ + position:absolute; + width:100%; + height:100%; + -webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); + z-index: 4; + mix-blend-mode: screen; + animation-name: sunFocus; +} +@keyframes sunFocus{ + 0% { filter: blur(10px);opacity:0;} + 16% {filter: blur(10px);} + 20% {filter: blur(10px);} + 25% {filter: blur(5px);opacity:0;} + 30% {filter: blur(0px);opacity:1;} + 80% {filter: blur(0px);opacity:1;} + 88% {filter: blur(5px);opacity:0;} + 100% {filter: blur(10px);opacity:0;} +} +.sun{ + width: 100%; + padding-bottom: 100%; + position:absolute; + right: -51%; + top: -330%; +} +.sun div{ + background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/sun.svg); + position: absolute; + top: 0; bottom: 0; left: 0; right: 0; +} +.suncrane{ + animation: suncrane 60s linear infinite; + position:absolute; + width: 21%; + height: 4%; + background: transparent; + margin: auto; + top: 57%; + left: 0; + right: 0; +} +@keyframes suncrane{ + 0% {transform:rotate(90deg);} + 100% {transform:rotate(-270deg);} +} +.sun:before{ + display:block; + content:' '; + animation: glare 60s linear infinite; + position:absolute; + width: 120%; + height: 120%; + background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/glare.svg) no-repeat scroll center; + top: -10%; + left: -10%; + background-size: 100%; +} + +@keyframes glare{ + from {transform:rotate(90deg);opacity:0.0;} + 30%{opacity:0.0;} + 36%{opacity:1.0;} + 68%{opacity:1.0;} + 74%{opacity:0.0;} + to {transform:rotate(450deg);opacity:0.0;} +} + + +.sun:after{display: block; content:' '; position:absolute;background: white;width: 10%;height: 10%;top: 45%;border-radius: 100%;margin: auto;left: 0;right: 0;box-shadow: 0px 0px 80px 30px white;} + +/* Clouds + ---------------------------------------------- */ +.clouds{ + position: absolute; + width: 100%; + z-index: 4; mix-blend-mode: screen; + height: 100%; +} +.clouds svg{ + width: 60%; + position: absolute; + top: 51%; + filter: blur(2px); + opacity: 0.4; + left: -60%; + animation-duration: 60s; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-name: clouds; +} +@keyframes clouds{ + 0% {transform: translate3d(110%, 0px, 0px);opacity: 0.0;} + 19%{opacity: 0.0;filter: blur(5px);} + 25%{opacity: 0.3;filter: blur(2px);} + 50%{opacity: 0.6;} + 75%{opacity: 0.2;} + 90%{opacity: 0.0;} + 100% {transform: translate3d(150%, 0px, 0px);opacity: 0.0} +} + +/* Lens flare + ---------------------------------------------- */ +.lighting{ + width: 100%; + height: 100%; + position: absolute; + z-index: 8; + opacity: 0.3; + -webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1))); + mix-blend-mode: screen; + pointer-events: none; + filter: blur(3px); +} +.lighting .suncrane{ + width: 100%; +} +#lensFlare{ + transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); + animation-name: flaring; +} + +@keyframes flaring{ + 0% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0;} + 28% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; } + 35% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 1.0; } + 70% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 1.0; } + 78% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; } + 100% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; } +} + +/* Sun on lake twinkles + ---------------------------------------------- */ +.twinkleWrap{ + position: absolute; + z-index: 4; + width:100%; + height:100%; + top:0; + opacity: 0.55; +} + +.twinkles{ + width: 2.3%; + position: absolute; + right: 49.2%; + top: 72.5%; + animation: twinkles 60s linear infinite; +} +@keyframes twinkles{ + 0% {transform: translate(450%, 0%);opacity:0.0;} + 32%{opacity:0.0;} + 34%{opacity:1.0;} + 36.5% {transform: translate(450%, 0%);} + 54% {transform: translate(0%, 0%);} + 72% {transform: translate(-450%, 0%);opacity:1.0;} + 78%{opacity:0.0;} + 100% {transform: translate(-450%, 0%);opacity:0.0;} +} +.twinkles:before{ + content:' '; + display: none; + position:absolute; + height: 600px; + width:3px; + background:red; + top: -600px; + left: 50%; +} +.twinkles svg{ + width: 100%; + position: absolute; + top: 0; +} +#twinkle1{ + animation: twinkle1 2s linear infinite; +} +@keyframes twinkle1{ + 0% {opacity:1.0;} + 33.33% {opacity:0.0;} + 66.66% {opacity:0.0;} + 99.99% {opacity:1.0;} + 100% {opacity:1.0;} +} +#twinkle2{ animation: twinkle2 2s linear infinite; +} +@keyframes twinkle2{ + 0% {opacity:0.0;} + 33.33% {opacity:1.0;} + 66.66% {opacity:0.0;} + 99.99% {opacity:0.0;} + 100% {opacity:0.0;} +} +#twinkle3{ animation: twinkle3 2s linear infinite; +} +@keyframes twinkle3{ + 0% {opacity:0.0;} + 33.33% {opacity:0.0;} + 66.66% {opacity:1.0;} + 99.99% {opacity:0.0;} + 100% {opacity:0.0;} +} + +/* Vignette + ---------------------------------------------- */ +.vignette{ + background: radial-gradient(transparent 60%, rgb(1, 14, 39) 130%); + background-size: cover; + height: 100%; + z-index: 9; + position: absolute; + width: 100%; + pointer-events: none; +} + +/* Stars + ---------------------------------------------- */ +.stars{ + height: 100%; + z-index: 2; + position: absolute; + width: 100%; + + overflow: hidden; +} +.starWrap{ + height: 60%; + width: 100%; + position:relative; +} +.starProject{ + overflow: hidden; +} +.starReflect{ + overflow: hidden; + height: 40%; + opacity: 0.9; + top: 1%; +} +#stars{ + position: absolute; + width: 120%; + border-radius: 100%; + margin: auto; + left: -10%; + right: 0; + animation: stars 120s linear infinite; + transform: rotate(0deg); + top: -35%; +} + +@keyframes stars{ + 100% {transform: rotate(-360deg);} +} + +#starReflection{ + position: absolute; + width: 120%; + border-radius: 100%; + margin: auto; + left: -10%; + right: 0; + animation: starsReflect 120s linear infinite; + transform: rotate(0deg); + top:initial; + bottom: -102%; +} +@keyframes starsReflect{ + 100% {transform: rotate(360deg);} +} + +/* Sprites + ----------------------------------------------- */ +.spriteWrap{ + height: 100%; + width: 100%; + position: absolute; + z-index: 13; + animation: sprites 60s linear infinite; + pointer-events: none; +} +@keyframes sprites{ + 0% {opacity:0.8;} + 20% {opacity:0.8;} + 25%{opacity:0.0;} + 73% {opacity:0.0;} + 90% {opacity:0.8;} + 100% {opacity:0.8;} +} + +#sprites{ + height: 100%; + width: 100%; +} + +/* Controls + ---------------------------------------------- */ +.controls{ + position:absolute; + top:0px; + width: 20%; + z-index: 10; + background: rgba(0, 0, 0, 0.16); + height: 100%; + width: 380px; + padding: 23px; + transform: translate3d(-250px, 0px, 0px); + -moz-transform: translate3d(-250px, 0px, 0px); + -o-transform: translate3d(-250px, 0px, 0px); + -ms-transform: translate3d(-250px, 0px, 0px); + transform: translate3d(-250px, 0px, 0px); + opacity: 0; +} +.controls, .controls *{ + box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; +} +.controls:hover{ + transform: translate3d(0px, 0px, 0px); + -moz-transform: translate3d(0px, 0px, 0px); + -o-transform: translate3d(0px, 0px, 0px); + -ms-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + opacity: 1.0; +} +.controls ul{ + margin: 0px; + padding: 0px; + list-style: none; +} +.controls ul li{ + border-bottom: 1px solid rgba(255, 255, 255, 0.09); + color: white; +} +.controls ul li span.title{ + display: inline-block; + padding: 10px 0px; +} +.controls ul li a{ + display: block; + padding: 10px 0px; +} +.controls ul li a:hover{ + padding-left: 10px; +} +.controls ul li a.active{} +.controls ul li a.active:after{content: 'on';float: right;} +.controls audio{ + width: 100%; + opacity: 0.2; + position: relative; + width: 80%; + display: inline-block; + top: 8px; + float: right; +} +.controls audio:hover{opacity:1.0;} +.noise{ + width:100%; + height:100%; + background:transparent; + opacity:0.03; + z-index: 9; + position: absolute; + top: 0; + pointer-events: none; +} +.noise.active{ + background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/static2.gif); + opacity: 0.015; + background-size: 620px; +} +.counter{ + color: rgba(255, 255, 255, 0.12); + position: absolute; + width: calc(100% - 46px); + bottom: 21px; + text-align:justify; + font-size: 0px; +} +.counter:before{ + content: ':'; + display:inline-block; + position: absolute; + animation-name: timer; + background: rgba(255, 255, 255, 0.03); + text-align: right; + left:0px; + bottom: 0px; + color: transparent; + border-right: 1px solid rgba(255, 255, 255, 0.13); + line-height: 34px; +} +@keyframes timer{ + 0% { width:0%; } + 100% { width:100%; } +} + +/* Landscape + ---------------------------------------------- */ +#landscape{ + width: 100.02%; + position: absolute; + bottom: 11%; + z-index: 5; + animation-name: focus; +} +@keyframes focus{ + 0% { filter: blur(5px);} + 16% {filter: blur(2px);} + 20% {filter: blur(0px);} + 80% {filter: blur(0px);} + 88% {filter: blur(2px);} + 100% {filter: blur(5px);} +} + +#bottom{ + animation-name: bottomFill; + height: 100%; + position: absolute; + top: 88%; + width: 100%; + z-index: 5; + animation-delay:1s; +} +@keyframes bottomFill{ + 0% { background:#0D141E; } + 4% { background:#101522; } + 8% { background:#121726; } + 12% { background:#141829; } + 16% { background:#1C1E3C; } + 20% { background:#22214F; } + 24% { background:#262262; } + 28% { background:#1D4065; } + 32% { background:#125768; } + 36% { background:#1E4553; } + 40% { background:#1E404E; } + 44% { background:#1E3B49; } + 48% { background:#1D3643; } + 52% { background:#1C313E; } + 56% { background:#1C3344; } + 60% { background:#1C3449; } + 64% { background:#1B344F; } + 68% { background:#183454; } + 72% { background:#242B4A; } + 76% { background:#2B2241; } + 80% { background:#24203C; } + 84% { background:#1D1D37; } + 88% { background:#151A32; } + 92% { background:#14192C; } + 96% { background:#111725; } + 100% { background:#0D141E; } +} + +/* Land - layer 1 animation */ +#landscape .layer1 { + fill:#F1F2F2; + animation-name: layer1; + animation-delay:1s; +} +@keyframes layer1{ + 0% { fill:#244154; } + 4% { fill:#344358; } + 8% { fill:#42465D; } + 12% { fill:#4F4761; } + 16% { fill:#7E5773; } + 20% { fill:#A3517F; } + 24% { fill:#F3829F; } + 28% { fill:#D4B2AF; } + 32% { fill:#AEDABB; } + 36% { fill:#A1D6D6; } + 40% { fill:#9ED5DD; } + 44% { fill:#9AD4E4; } + 48% { fill:#97D3EA; } + 52% { fill:#92D3F4; } + 56% { fill:#95C8DA; } + 60% { fill:#96BDC5; } + 64% { fill:#96B3B2; } + 68% { fill:#96AA9E; } + 72% { fill:#AF866A; } + 76% { fill:#C0633B; } + 80% { fill:#9D5E51; } + 84% { fill:#7B5960; } + 88% { fill:#59546D; } + 92% { fill:#484E64; } + 96% { fill:#37475C; } + 100% { fill:#244154; } +} + +/* Land - layer 2 animation */ +#landscape .layer2 { + fill:#E6E7E8; + animation-name: layer2; + animation-delay:1s; +} +@keyframes layer2{ + 0% { fill:#0F2B46; } + 4% { fill:#1C2D4A; } + 8% { fill:#272E4E; } + 12% { fill:#302F52; } + 16% { fill:#663966; } + 20% { fill:#913776; } + 24% { fill:#D94A93; } + 28% { fill:#BB94AD; } + 32% { fill:#76CCCE; } + 36% { fill:#6BAEC9; } + 40% { fill:#62A7CA; } + 44% { fill:#59A0CB; } + 48% { fill:#5099CC; } + 52% { fill:#4692CF; } + 56% { fill:#4D8FBD; } + 60% { fill:#518CAF; } + 64% { fill:#548AA1; } + 68% { fill:#578793; } + 72% { fill:#7E6768; } + 76% { fill:#8F4244; } + 80% { fill:#74404D; } + 84% { fill:#593D55; } + 88% { fill:#393B5D; } + 92% { fill:#2C3655; } + 96% { fill:#1F304E; } + 100% { fill:#0F2B46; } +} + +/* Land - layer 3 animation */ +#landscape .layer3 { + fill:#D1D3D4; + animation-name: layer3; + animation-delay:1s; +} +@keyframes layer3{ + 0% { fill:#0F2944; } + 4% { fill:#1B2B47; } + 8% { fill:#252C4B; } + 12% { fill:#2E2D4E; } + 16% { fill:#5F3663; } + 20% { fill:#863572; } + 24% { fill:#C8458D; } + 28% { fill:#A48BAB; } + 32% { fill:#68BFC7; } + 36% { fill:#54A4C8; } + 40% { fill:#4F9EC8; } + 44% { fill:#4B98C7; } + 48% { fill:#4691C7; } + 52% { fill:#408BC8; } + 56% { fill:#4688B7; } + 60% { fill:#4984A9; } + 64% { fill:#4C819C; } + 68% { fill:#4E7E8F; } + 72% { fill:#776167; } + 76% { fill:#893E45; } + 80% { fill:#6F3C4C; } + 84% { fill:#543A52; } + 88% { fill:#353758; } + 92% { fill:#2A3351; } + 96% { fill:#1E2E4A; } + 100% { fill:#0F2944; } +} + +/* Land - layer 4 animation */ +#landscape .layer4 { + fill:#BCBEC0; + animation-name: layer4; + animation-delay:1s; +} +@keyframes layer4{ + 0% { fill:#0F2841; } + 4% { fill:#1A2945; } + 8% { fill:#232A48; } + 12% { fill:#2B2A4B; } + 16% { fill:#59335F; } + 20% { fill:#7C336D; } + 24% { fill:#B84089; } + 28% { fill:#9683A5; } + 32% { fill:#57B5C1; } + 36% { fill:#4798BD; } + 40% { fill:#4391BC; } + 44% { fill:#408BBB; } + 48% { fill:#3D85BA; } + 52% { fill:#397FBA; } + 56% { fill:#3E7DAC; } + 60% { fill:#407AA1; } + 64% { fill:#427896; } + 68% { fill:#44768B; } + 72% { fill:#705B66; } + 76% { fill:#823B46; } + 80% { fill:#69394B; } + 84% { fill:#503650; } + 88% { fill:#323454; } + 92% { fill:#27304D; } + 96% { fill:#1C2C47; } + 100% { fill:#0F2841; } +} + +/* Land - layer 5 animation */ +#landscape .layer5 { + fill:#A7A9AC; + animation-name: layer5; + animation-delay:1s; +} +@keyframes layer5{ + 0% { fill:#0E263F; } + 4% { fill:#192742; } + 8% { fill:#212745; } + 12% { fill:#292848; } + 16% { fill:#51305B; } + 20% { fill:#6E3068; } + 24% { fill:#A23B82; } + 28% { fill:#84799F; } + 32% { fill:#44AABC; } + 36% { fill:#3A8DB3; } + 40% { fill:#3887B1; } + 44% { fill:#3680AF; } + 48% { fill:#347AAD; } + 52% { fill:#3273AB; } + 56% { fill:#3672A1; } + 60% { fill:#387198; } + 64% { fill:#396F90; } + 68% { fill:#3A6E87; } + 72% { fill:#695565; } + 76% { fill:#7C3747; } + 80% { fill:#64354A; } + 84% { fill:#4B334D; } + 88% { fill:#2E314F; } + 92% { fill:#252D4A; } + 96% { fill:#1B2A44; } + 100% { fill:#0E263F; } +} + +/* Land - layer 6 animation */ +#landscape .layer6 { + fill:#939598; + animation-name: layer6; + animation-delay:1s; +} +@keyframes layer6{ + 0% { fill:#0E243C; } + 4% { fill:#18253F; } + 8% { fill:#202542; } + 12% { fill:#262544; } + 16% { fill:#482C56; } + 20% { fill:#612D63; } + 24% { fill:#8D357C; } + 28% { fill:#6F719B; } + 32% { fill:#00A1BC; } + 36% { fill:#2583A8; } + 40% { fill:#287CA3; } + 44% { fill:#2A759F; } + 48% { fill:#2D6F9A; } + 52% { fill:#2E6895; } + 56% { fill:#2F6891; } + 60% { fill:#30678D; } + 64% { fill:#306788; } + 68% { fill:#306683; } + 72% { fill:#625064; } + 76% { fill:#753347; } + 80% { fill:#5E3249; } + 84% { fill:#47304A; } + 88% { fill:#2B2E4B; } + 92% { fill:#222A46; } + 96% { fill:#192741; } + 100% { fill:#0E243C; } +} + +/* Land - layer 7 animation */ +#landscape .layer7 { + fill:#808285; + animation-name: layer7; + animation-delay:1s; +} +@keyframes layer7{ + 0% { fill:#102237; } + 4% { fill:#18223A; } + 8% { fill:#1E233D; } + 12% { fill:#242340; } + 16% { fill:#402952; } + 20% { fill:#542A5E; } + 24% { fill:#793177; } + 28% { fill:#5F668F; } + 32% { fill:#0A8FA7; } + 36% { fill:#237595; } + 40% { fill:#256F90; } + 44% { fill:#27698C; } + 48% { fill:#286387; } + 52% { fill:#285D82; } + 56% { fill:#285E82; } + 60% { fill:#285F81; } + 64% { fill:#275F81; } + 68% { fill:#255F7F; } + 72% { fill:#574A63; } + 76% { fill:#683148; } + 80% { fill:#542F48; } + 84% { fill:#3F2D47; } + 88% { fill:#242742; } + 92% { fill:#202841; } + 96% { fill:#19253C; } + 100% { fill:#102237; } +} + +/* Land - layer 8 animation */ +#landscape .layer8 { + fill:#6D6E71; + animation-name: layer8; + animation-delay:1s; +} +@keyframes layer8{ + 0% { fill:#111F31; } + 4% { fill:#172034; } + 8% { fill:#1C2037; } + 12% { fill:#20213B; } + 16% { fill:#37274C; } + 20% { fill:#472759; } + 24% { fill:#662C71; } + 28% { fill:#4F5C83; } + 32% { fill:#118095; } + 36% { fill:#206983; } + 40% { fill:#21637E; } + 44% { fill:#225D7A; } + 48% { fill:#225775; } + 52% { fill:#225270; } + 56% { fill:#235372; } + 60% { fill:#235574; } + 64% { fill:#235675; } + 68% { fill:#235676; } + 72% { fill:#4C445F; } + 76% { fill:#5B2F49; } + 80% { fill:#4A2C47; } + 84% { fill:#382A44; } + 88% { fill:#242742; } + 92% { fill:#1E253D; } + 96% { fill:#182338; } + 100% { fill:#111F31; } +} + +/* Land - layer 9 animation */ +#landscape .layer9 { + fill:#58595B; + animation-name: layer9; + animation-delay:1s; +} +@keyframes layer9{ + 0% { fill:#111C2B; } + 4% { fill:#151D2E; } + 8% { fill:#191E32; } + 12% { fill:#1D1E35; } + 16% { fill:#2F2447; } + 20% { fill:#3A2454; } + 24% { fill:#52296C; } + 28% { fill:#405279; } + 32% { fill:#137185; } + 36% { fill:#1C5C72; } + 40% { fill:#1C576E; } + 44% { fill:#1C5269; } + 48% { fill:#1B4C64; } + 52% { fill:#1A475F; } + 56% { fill:#1C4A63; } + 60% { fill:#1E4B67; } + 64% { fill:#1F4D6A; } + 68% { fill:#204E6D; } + 72% { fill:#413E5A; } + 76% { fill:#4E2D49; } + 80% { fill:#402A45; } + 84% { fill:#312742; } + 88% { fill:#20243E; } + 92% { fill:#1B2238; } + 96% { fill:#171F32; } + 100% { fill:#111C2B; } +} + +/* Land - layer 10 animation */ +#landscape .layer10 { + fill:#414042; + animation-name: layer10; + animation-delay:1s; +} +@keyframes layer10{ + 0% { fill:#101825; } + 4% { fill:#131928; } + 8% { fill:#161A2C; } + 12% { fill:#181B2F; } + 16% { fill:#262141; } + 20% { fill:#2C214F; } + 24% { fill:#3D2567; } + 28% { fill:#30486F; } + 32% { fill:#136476; } + 36% { fill:#165163; } + 40% { fill:#154C5E; } + 44% { fill:#144759; } + 48% { fill:#134254; } + 52% { fill:#113D4F; } + 56% { fill:#154055; } + 60% { fill:#19425A; } + 64% { fill:#1B445F; } + 68% { fill:#1E4564; } + 72% { fill:#363856; } + 76% { fill:#412A49; } + 80% { fill:#352744; } + 84% { fill:#29243F; } + 88% { fill:#1C203A; } + 92% { fill:#191F33; } + 96% { fill:#151C2C; } + 100% { fill:#101825; } +} + +/* Land - layer 11 animation */ +#landscape .layer11 { + fill:#232323; + animation-name: layer11; + animation-delay:1s; +} +@keyframes layer11{ + 0% { fill:#0D141E; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 4% { fill:#101522; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} + 8% { fill:#121726; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 12% { fill:#141829; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} + 16% { fill:#1C1E3C; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 20% { fill:#22214F; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} + 24% { fill:#262262; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 28% { fill:#1D4065; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} + 32% { fill:#125768; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 36% { fill:#1E4553; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} + 40% { fill:#1E404E; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 44% { fill:#1E3B49; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} + 48% { fill:#1D3643; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 52% { fill:#1C313E; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} + 56% { fill:#1C3344; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 60% { fill:#1C3449; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} + 64% { fill:#1B344F; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 68% { fill:#183454; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} + 72% { fill:#242B4A; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 76% { fill:#2B2241; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} + 80% { fill:#24203C; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} + 84% { fill:#1D1D37; } + 88% { fill:#151A32; } + 92% { fill:#14192C; } + 96% { fill:#111725; } + 100% { fill:#0D141E; } +} + +/* Aspect ratio media queries + ---------------------------------------------- */ + +/* 3/2 and 6/1 -- out of range*/ +@media screen and (min-aspect-ratio: 3/1) and (max-aspect-ratio: 6/1){ + body{background: rgb(31, 60, 80);} + body:before{content:'Aspect ratio out of range - too wide';color: white;text-align: center;width: 100%;height: 100%;display: block;position: absolute;top: 50%;} + #sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap,.spriteWrap{display: none;} +} + +/* 14/5 and 3/1 */ +@media screen and (min-aspect-ratio: 14/5) and (max-aspect-ratio: 7/2){ + .twinkles{} + #reflection, #sunMask{height: 42%;} + #landscape{bottom: -3%;} + #bottom{top: 101%;} + #stag{bottom: 3%;} + .sun{top: -570%;} + .twinkles{top: 77%;} +} +/* 5/2 and 14/5 */ +@media screen and (min-aspect-ratio: 5/2) and (max-aspect-ratio: 14/5){ + .twinkles{top: 75%;} + #reflection, #sunMask{} + #landscape{bottom: 1%;} + #bottom{top: 98%;} + #stag{bottom: 7%;} + .sun{top: -532%;} +} +/* 9/4 and 5/2 */ +@media screen and (min-aspect-ratio: 9/4) and (max-aspect-ratio: 5/2){ + .twinkles{top: 75%;} + #reflection, #sunMask{height: 40%;} + #landscape{bottom: 5%;} + #bottom{top: 94%;} + #stag{bottom: 10%;} + .sun{top: -452%;} +} +/* 11/5 and 9/4 */ +@media screen and (min-aspect-ratio: 11/5) and (max-aspect-ratio: 9/4){ + .twinkles{} + #reflection, #sunMask{} + #landscape{bottom: 6%;} + #bottom{top: 93%;} + #stag{ + bottom: 11%;} + .sun{top: -410%;} +} +/* 13/6 and 11/5 */ +@media screen and (min-aspect-ratio: 13/6) and (max-aspect-ratio: 11/5){ + .twinkles{} + #reflection, #sunMask{height: 37%;} + #landscape{bottom: 6%;} + #bottom{top: 93%;} + #stag{bottom: 11%;} + .sun{} +} + +/* 15/7 and 13/6 */ +@media screen and (min-aspect-ratio: 15/7) and (max-aspect-ratio: 13/6){ + .twinkles{} + #reflection, #sunMask{height: 31%;} + #landscape{bottom: 7%;} + #bottom{top: 92%;} + #stag{bottom: 12%;} + .sun{} +} + +/* 2/1 and 15/7 */ +@media screen and (min-aspect-ratio: 2/1) and (max-aspect-ratio: 15/7){ + .twinkles{} + #reflection, #sunMask{height: 31%;} + #landscape{bottom: 8%;} + #bottom{top: 91%;} + #stag{bottom: 12%;} + .sun{top: -370%;} +} + +@media screen and (min-aspect-ratio: 15/8) and (max-aspect-ratio: 2/1){ + .twinkles{} + #reflection, #sunMask{height: 30%;} + #landscape{} + #bottom{} + #stag{bottom: 15%;} + .sun{} +} + +/* 7/4 and 15/8 */ +@media screen and (min-aspect-ratio: 7/4) and (max-aspect-ratio: 15/8){ + .twinkles{top: 71%;} + #reflection, #sunMask{height: 28%;} + #landscape{bottom: 13%;} + #bottom{top: 86%;} + #stag{bottom: 17%;} + .sun{top: -300%;} +} +/* 11/7 and 7/4 */ +@media screen and (min-aspect-ratio: 11/7) and (max-aspect-ratio: 7/4){ + .twinkles{top: 69%;} + #reflection, #sunMask{height: 24%;} + #landscape{bottom: 16%;} + #bottom{top: 83%;} + #stag{bottom: 20%;} + .sun{top: -270%;} +} +/* 13/9 and 11/7 */ +@media screen and (min-aspect-ratio: 13/9) and (max-aspect-ratio: 11/7){ + .twinkles{top: 68%;} + #reflection, #sunMask{height: 22%;} + #landscape{bottom: 18%;} + #bottom{top: 81%;} + #stag{bottom: 21.6%;} + .sun{top: -240%;} +} +/* 4/3 and 13/9 */ +@media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 13/9){ + .twinkles{top: 66%;} + #reflection, #sunMask{height: 19%;} + #landscape{bottom: 22%;} + #bottom{top: 77%;} + #stag{bottom: 25%;} + .sun{top: -230%;} +} +/* 8/7 and 4/3 */ +@media screen and (min-aspect-ratio: 8/7) and (max-aspect-ratio: 4/3){ + .twinkles{top: 65%;} + #reflection, #sunMask{height: 18%;} + #landscape{bottom: 23%;} + #bottom{top: 76%;} + #stag{bottom: 25.3%;} + .sun{top: -180%;} +} +/* 14/15 and 8/7 */ +@media screen and (min-aspect-ratio: 14/15) and (max-aspect-ratio: 8/7){ + .twinkles{top: 63%;width: 3%;} + #reflection, #sunMask{height: 17%;} + #landscape{bottom: 26%;} + #bottom{top: 73.8%;} + #stag{bottom: 28.3%;} + .sun{top: -140%;} +} +/* 5/6 and 14/15 */ +@media screen and (min-aspect-ratio: 5/6) and (max-aspect-ratio: 14/15){ + .twinkles{top: 63%; width: 3%;} + #reflection, #sunMask{height: 13%;} + #landscape{bottom: 28%;} + #bottom{top: 71.5%;} + #stag{bottom: 30%;} + .sun{top: -110%;} +} +/* 7/10 and 5/6 */ +@media screen and (min-aspect-ratio: 7/10) and (max-aspect-ratio: 5/6){ + .twinkles{top: 62%; width: 3%;} + #reflection, #sunMask{height: 11%;} + #landscape{bottom: 30%;} + #bottom{top: 69.6%;} + #stag{bottom: 31.8%;} + .sun{top: -70%;} +} +/* 5/9 and 7/10 */ +@media screen and (min-aspect-ratio: 5/9) and (max-aspect-ratio: 7/10){ + .twinkles{top: 62%; width: 3%;} + #reflection, #sunMask{height: 8%;} + #landscape{bottom: 32%;} + #bottom{top: 67.5%;} + #stag{bottom: 33.5%;} + .sun{top: -55%;} +} + +/* 1/10 and 5/9 --- out of range*/ +@media screen and (min-aspect-ratio: 1/10) and (max-aspect-ratio: 5/9){ + body{background: rgb(31, 60, 80);} + body:before{content:'Aspect ratio out of range - too narrow';color: white;text-align: center;width: 100%;height: 100%;display: block;position: absolute;top: 50%;} + #sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap,.spriteWrap{display: none;} +} diff --git a/src/app/components/animatedBackground/animatedBackground.component.ts b/src/app/components/animatedBackground/animatedBackground.component.ts new file mode 100644 index 0000000..f5c9dad --- /dev/null +++ b/src/app/components/animatedBackground/animatedBackground.component.ts @@ -0,0 +1,153 @@ +import {AfterViewChecked, Component} from "@angular/core"; +import {fadeOut} from "../../animations"; + +@Component({ + selector: 'animated-background', + templateUrl: 'animatedBackground.component.html', + styleUrls: ['animatedBackground.component.scss'], + animations: [fadeOut] +}) +export class AnimatedBackgroundComponent implements AfterViewChecked { + private once = true; + + splash = true; + + constructor() { + setTimeout(() => this.splash = false, 1000); + } + + ngAfterViewChecked() { + const $ = window['$']; + if (this.once && !!$) { + this.once = false; + (function () { + var WIDTH, HEIGHT, canvas, con, g; + var pxs = []; + var rint = 50; + + $.fn.sprites = function () { + this.append($('')); + setup(this); + }; + + function setup(container) { + let windowSize = function () { + WIDTH = container.innerWidth(); + HEIGHT = container.innerHeight(); + canvas = container.find('#sprites'); + canvas.attr('width', WIDTH).attr('height', HEIGHT); + }; + + windowSize(); + + $(window).resize(function () { + windowSize(); + }); + + con = canvas[0].getContext('2d'); + + for (let i = 0; i < 100; i++) { + pxs[i] = new Circle(); + pxs[i].reset(); + } + + requestAnimationFrame(draw); + } + + function draw() { + con.clearRect(0, 0, WIDTH, HEIGHT); + con.globalCompositeOperation = "lighter"; + + for (var i = 0; i < pxs.length; i++) { + pxs[i].fade(); + pxs[i].move(); + pxs[i].draw(); + } + + requestAnimationFrame(draw); + } + + function Circle() { + this.s = { + ttl: 15000, + xmax: 5, + ymax: 2, + rmax: 7, + rt: 1, + xdef: 960, + ydef: 540, + xdrift: 4, + ydrift: 4, + random: true, + blink: true + }; + + this.reset = function () { + this.x = (this.s.random ? WIDTH * Math.random() : this.s.xdef); + this.y = (this.s.random ? HEIGHT * Math.random() : this.s.ydef); + this.r = ((this.s.rmax - 1) * Math.random()) + 1; + + this.dx = (Math.random() * this.s.xmax) * (Math.random() < 0.5 ? -1 : 1); + this.dy = (Math.random() * this.s.ymax) * (Math.random() < 0.5 ? -1 : 1); + + this.hl = (this.s.ttl / rint) * (this.r / this.s.rmax); + this.rt = Math.random() * this.hl; + + this.stop = Math.random() * 0.2 + 0.4; + + this.s.rt = Math.random() + 1; + this.s.xdrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1); + this.s.ydrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1); + }; + + this.fade = function () { + this.rt += this.s.rt; + }; + + this.draw = function () { + let newo, cr; + + if (this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) { + this.s.rt = this.s.rt * -1; + } else if (this.rt >= this.hl) { + this.reset(); + } + + newo = 1 - (this.rt / this.hl); + + con.beginPath(); + con.arc(this.x, this.y, this.r, 0, Math.PI * 2, true); + con.closePath(); + + cr = this.r * newo; + + g = con.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr <= 0 ? 1 : cr)); + g.addColorStop(0.0, 'rgba(193,254,254,' + newo + ')'); + g.addColorStop(this.stop, 'rgba(193,254,254,' + (newo * 0.2) + ')'); + g.addColorStop(1.0, 'rgba(193,254,254,0)'); + + con.fillStyle = g; + con.fill(); + }; + + this.move = function () { + this.x += (this.rt / this.hl) * this.dx; + this.y += (this.rt / this.hl) * this.dy; + if (this.x > WIDTH || this.x < 0) this.dx *= -1; + if (this.y > HEIGHT || this.y < 0) this.dy *= -1; + }; + + this.getX = function () { + return this.x; + }; + + this.getY = function () { + return this.y; + }; + }; + })(); + + $('.spriteWrap').sprites(); + } + } +} diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html index 1db21b7..8650df7 100644 --- a/src/app/views/home/home.component.html +++ b/src/app/views/home/home.component.html @@ -1,40 +1,13 @@ -
-
- -
-
-

Collaborative map making... {{typedText | async}}

-
-
-
-
- - - -
-
- -
-
- - - -
-
- -
-
-
+ +
+ +
+
+
+
+
diff --git a/src/app/views/home/home.component.scss b/src/app/views/home/home.component.scss new file mode 100644 index 0000000..df00256 --- /dev/null +++ b/src/app/views/home/home.component.scss @@ -0,0 +1,15 @@ +.badge { + position: absolute; + top: 15%; + left: 50%; + z-index: 500; + transform: translateX(-50%); +} + +.controls { + position: absolute; + bottom: 10%; + left: 50%; + z-index: 500; + transform: translateX(-50%); +} diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts index ccb7ab2..4f7c978 100644 --- a/src/app/views/home/home.component.ts +++ b/src/app/views/home/home.component.ts @@ -8,7 +8,8 @@ const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; @Component({ selector: 'home', - templateUrl: 'home.component.html' + templateUrl: 'home.component.html', + styleUrls: ['home.component.scss'] }) export class HomeComponent { phrase = 'If you\'re into that'; diff --git a/src/styles.scss b/src/styles.scss index 4783a03..a4f51f6 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -9,8 +9,10 @@ html, body { height: 100vh; overflow: hidden; } + body { margin: 0; overscroll-behavior: none; font-family: Roboto, "Helvetica Neue", sans-serif; + background-color: black; }