Permalink
Browse files

end video 1

  • Loading branch information...
codereviewvideos committed Oct 27, 2018
1 parent 1db86ce commit ed80a0d6266e258dfb98147293729a3ca6ecc6d9
Showing with 81 additions and 44 deletions.
  1. +2 −0 .gitignore
  2. +7 −0 src/AnimatedBackground.css
  3. +70 −0 src/AnimatedBackground.tsx
  4. +0 −28 src/App.css
  5. +2 −9 src/App.tsx
  6. +0 −7 src/logo.svg
@@ -19,3 +19,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.idea/*
@@ -0,0 +1,7 @@
.AnimatedBackground
{
width: 100%;
height: 800px;
padding: 0;
margin: 0;
}
@@ -0,0 +1,70 @@
import * as React from 'react';
import './AnimatedBackground.css';
class AnimatedBackground extends React.Component {
public render() {
const colors = new Array(
[62, 35, 255],
[60, 255, 60],
[255, 35, 98],
[45, 175, 230],
[255, 0, 255],
[255, 128, 0]);
let step = 0;
const colorIndices = [0, 1, 2, 3];
const gradientSpeed = 0.002;
function determineNextColourCombo(): [string, string] {
const c00 = colors[colorIndices[0]];
const c01 = colors[colorIndices[1]];
const c10 = colors[colorIndices[2]];
const c11 = colors[colorIndices[3]];
const istep = 1 - step;
const r1 = Math.round(istep * c00[0] + step * c01[0]);
const g1 = Math.round(istep * c00[1] + step * c01[1]);
const b1 = Math.round(istep * c00[2] + step * c01[2]);
const colour1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
const r2 = Math.round(istep * c10[0] + step * c11[0]);
const g2 = Math.round(istep * c10[1] + step * c11[1]);
const b2 = Math.round(istep * c10[2] + step * c11[2]);
const colour2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
return [colour1, colour2];
}
function updateGradient() {
determineNextColourCombo();
// $('#gradient').css({
// background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
// background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if (step >= 1) {
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
// pick two new target color indices
// do not pick the same as the current one
colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient, 10);
return (
<div className="AnimatedBackground ">
hello
</div>
);
}
}
export default AnimatedBackground;
@@ -1,28 +0,0 @@
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@@ -1,19 +1,12 @@
import * as React from 'react';
import AnimatedBackground from "./AnimatedBackground";
import './App.css';
import logo from './logo.svg';
class App extends React.Component {
public render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.tsx</code> and save to reload.
</p>
<AnimatedBackground/>
</div>
);
}

This file was deleted.

Oops, something went wrong.

0 comments on commit ed80a0d

Please sign in to comment.