feat(header): add rain & bird effect

libs/ui/src/index.ts

@@ -1,3 +1,5 @@
+export * from './lib/rain/rain';
+export * from './lib/birds/birds';
 export * from './lib/memory/memory';
 export * from './lib/daily/daily';
 export * from './lib/tictactoe/tictactoe';

libs/ui/src/lib/birds/birds.scss

@@ -0,0 +1,99 @@
+.bird {
+  width: 88px;
+  height: 125px;
+  will-change: background-position;
+  animation-name: fly-cycle;
+  animation-timing-function: steps(10);
+  animation-iteration-count: infinite;
+}
+
+.bird--one {
+  animation-duration: 1s;
+  animation-delay: -0.5s;
+}
+
+.bird--two {
+  animation-duration: 0.9s;
+  animation-delay: -0.75s;
+}
+
+.bird--three {
+  animation-duration: 1.25s;
+  animation-delay: -0.25s;
+}
+
+.bird--four {
+  animation-duration: 1.1s;
+  animation-delay: -0.5s;
+}
+
+.bird-container {
+  position: absolute;
+  top: 20%;
+  left: -10%;
+  transform: scale(0) translateX(-10vw);
+  will-change: transform;
+  animation-name: fly-right-one;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.bird-container--one {
+  animation-duration: 15s;
+  animation-delay: 0;
+}
+
+.bird-container--two {
+  animation-duration: 16s;
+  animation-delay: 1s;
+}
+
+.bird-container--three {
+  animation-duration: 14.6s;
+  animation-delay: 9.5s;
+}
+
+.bird-container--four {
+  animation-duration: 16s;
+  animation-delay: 10.25s;
+}
+
+@keyframes fly-cycle {
+  100% {
+    background-position: -900px 0;
+  }
+}
+
+@keyframes fly-right-one {
+  0% {
+    transform: scale(0.3) translateX(-10vw);
+  }
+
+  10% {
+    transform: translateY(2vh) translateX(10vw) scale(0.4);
+  }
+
+  20% {
+    transform: translateY(0vh) translateX(30vw) scale(0.5);
+  }
+
+  30% {
+    transform: translateY(4vh) translateX(50vw) scale(0.6);
+  }
+
+  40% {
+    transform: translateY(2vh) translateX(70vw) scale(0.6);
+  }
+
+  50% {
+    transform: translateY(0vh) translateX(90vw) scale(0.6);
+  }
+
+  60% {
+    transform: translateY(0vh) translateX(110vw) scale(0.6);
+  }
+
+  100% {
+    transform: translateY(0vh) translateX(110vw) scale(0.6);
+  }
+}

libs/ui/src/lib/birds/birds.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Birds from './birds';
+
+describe(' Birds', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Birds />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui/src/lib/birds/birds.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+import './birds.scss';
+
+function Birds() {
+
+  const useStyles = makeStyles(() => ({
+    bird: {
+      backgroundImage: 'url(./assets/bird-cells.svg)',
+      backgroundSize: 'auto 100%'
+    },
+  }));
+  const classes = useStyles();
+
+  return (
+    <>
+      <div className='bird-container bird-container--one'>
+        <div className={`bird bird--one ${classes.bird}`}></div>
+      </div>
+
+      <div className='bird-container bird-container--two'>
+        <div className={`bird bird--two ${classes.bird}`}></div>
+      </div>
+
+      <div className='bird-container bird-container--three'>
+        <div className={`bird bird--three ${classes.bird}`}></div>
+      </div>
+
+      <div className='bird-container bird-container--four'>
+        <div className={`bird bird--four ${classes.bird}`}></div>
+      </div>
+    </>
+  );
+}
+
+export default Birds;

libs/ui/src/lib/header/header.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import Title from '../title/title';
 import Scrollicon from '../scrollicon/scrollicon';
+import Birds from '../birds/birds';
+import Rain from '../rain/rain';
 
 import { IMAGE_SUFFIX } from '@gerdesque/data';
 
@@ -13,6 +15,7 @@ import './header.scss';
 export interface HeaderProps {
   link: string
   name?: string
+  option?: string
 }
 
 export const Header = (props: HeaderProps) => {
@@ -28,7 +31,9 @@ export const Header = (props: HeaderProps) => {
 
   return (
     <section className='parallax__group parallax__header'>
+      {props.option === 'rain' && <Rain/>}
       <div className={`parallax__layer parallax__layer--base fade-in-scale ${classes.chapter}`}>
+        {props.option === 'birds' && <Birds/>}
         <Title text={props.name} />
         <Scrollicon/>
       </div>

libs/ui/src/lib/rain/rain.scss

@@ -0,0 +1,52 @@
+.rain {
+  height: 100%;
+  animation: rain .3s linear 40;
+  animation-fill-mode: forwards;
+
+  &:before {
+    content: '';
+    position:absolute;
+    width:100%;
+    height:100%;
+    background: white;
+    animation: lighting 4s linear 3;
+    opacity:0;
+  }
+}  
+
+@keyframes rain  {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 20% 100%;
+    height: 0%;
+  }
+}
+
+@keyframes lighting {
+  0% {
+    opacity:0;
+  }
+  10% {
+    opacity:0;
+  }
+  11% {
+    opacity:1;
+  }
+  14% {
+    opacity:0;
+  }
+  20% {
+    opacity:0;
+  }
+  21% {
+    opacity:1;
+  }
+  24% {
+    opacity:0;
+  }
+  104% {
+    opacity:0;
+  }
+}

libs/ui/src/lib/rain/rain.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Rain from './rain';
+
+describe(' Rain', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Rain />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui/src/lib/rain/rain.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+import { IMAGE_SUFFIX } from '@gerdesque/data';
+import './rain.scss';
+
+function Rain() {
+
+  const useStyles = makeStyles(() => ({
+    rain: {
+      background: `url(./assets/rain${IMAGE_SUFFIX})`
+    },
+  }));
+  const classes = useStyles();
+
+  return <div className={`rain ${classes.rain}`}></div>;
+};
+
+export default Rain;

libs/ui/src/lib/ui.scss

@@ -1,19 +1,21 @@
-@import "memory/memory";
+@import "birds/birds";
+@import "chapter/chapter";
 @import "daily/daily";
-@import "tictactoe/tictactoe";
-@import "suitcase/suitcase";
-@import "header/header";
+@import "decission/decission";
+@import "footer/footer";
 @import "group/group";
+@import "header/header";
+@import "image/image";
 @import "info/info";
+@import "memory/memory";
+@import "nav/nav";
+@import "puzzle/puzzle";
+@import "rain/rain";
 @import "redirect/redirect";
 @import "scrollicon/scrollicon";
-@import "puzzle/puzzle";
 @import "smokingpit/smokingpit";
-@import "decission/decission";
-@import "image/image";
-@import "video/video";
+@import "suitcase/suitcase";
 @import "text/text";
-@import "footer/footer";
-@import "nav/nav";
+@import "tictactoe/tictactoe";
 @import "title/title";
-@import "chapter/chapter";
+@import "video/video";

workspace.json

@@ -25,6 +25,7 @@
               "apps/demol/src/styles.scss",
               "libs/ui/src/lib/ui.scss"
             ],
+            "extractCss": true,
             "scripts": [],
             "webpackConfig": "@nrwl/react/plugins/webpack",
             "baseHref": "/demokratieerleben2020/"