muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 21:06:42 +07:00
Code Packages Activity Actions

lost page

Browse source
This commit is contained in:
Fedor Katurov 2019-12-02 12:57:56 +07:00
parent 5e9fed4124
commit 0e4c1acc3f
5 changed files with 55 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/containers/BlurWrapper/styles.scss
View file

@ -3,6 +3,10 @@
transition: filter 0.25s;
will-change: filter;
padding-top: 100px + $gap;
display: flex;
box-sizing: border-box;
flex-direction: column;
min-height: 100vh;
@include tablet {
padding-top: 72px + $gap;

51
src/components/main/GodRays/index.tsx
View file

@ -26,13 +26,11 @@ export class GodRays extends React.Component<IGodRaysProps> {
};
draw = () => {
if ((this.props.raised) || !this.canvas) {
if (this.props.raised || !this.canvas) {
return setTimeout(() => window.requestAnimationFrame(this.draw), 1000);
}
const {
width, height, rays, particles
} = this.state;
const { width, height, rays, particles } = this.state;
const ctx = this.canvas.getContext('2d');
@ -40,9 +38,7 @@ export class GodRays extends React.Component<IGodRaysProps> {
ctx.clearRect(0, 0, width, height + 100); // clear canvas
ctx.save();
rays.map(({
angle, iterator, weight, speed, pulsar, opacity
}, index) => {
rays.map(({ angle, iterator, weight, speed, pulsar, opacity }, index) => {
const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3);
gradient.addColorStop(0.2, `rgba(255, 60, 40, ${opacity * 0.1})`);
gradient.addColorStop(1, 'rgba(255, 60, 40, 0)');
@ -58,19 +54,19 @@ export class GodRays extends React.Component<IGodRaysProps> {
ctx.beginPath();
ctx.fillStyle = gradient;
ctx.moveTo(((width / 2) - (weight / 2)), -900);
ctx.lineTo(((width / 2) + (weight / 2)), -900);
ctx.lineTo(((width / 2) + (weight / 2 + 300)), height * 1.4);
ctx.lineTo(((width / 2) - (weight / 2 + 300)), height * 1.4);
ctx.moveTo(width / 2 - weight / 2, -900);
ctx.lineTo(width / 2 + weight / 2, -900);
ctx.lineTo(width / 2 + (weight / 2 + 300), height * 1.4);
ctx.lineTo(width / 2 - (weight / 2 + 300), height * 1.4);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = gradient2;
ctx.moveTo(((width / 2) - (weight / 6)), -900);
ctx.lineTo(((width / 2) + (weight / 6)), -900);
ctx.lineTo(((width / 2) + (weight / 6 + 50)), height * 1.4);
ctx.lineTo(((width / 2) - (weight / 6 + 250)), height * 1.4);
ctx.moveTo(width / 2 - weight / 6, -900);
ctx.lineTo(width / 2 + weight / 6, -900);
ctx.lineTo(width / 2 + (weight / 6 + 50), height * 1.4);
ctx.lineTo(width / 2 - (weight / 6 + 250), height * 1.4);
ctx.fill();
ctx.closePath();
@ -114,16 +110,17 @@ export class GodRays extends React.Component<IGodRaysProps> {
const { width, height } = this.state;
return (
<div style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1,
opacity: 1,
pointerEvents: 'none',
}}
<div
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 0,
opacity: 1,
pointerEvents: 'none',
}}
>
<canvas
width={width}
@ -133,7 +130,9 @@ export class GodRays extends React.Component<IGodRaysProps> {
position: 'relative',
top: -100,
}}
ref={(el) => { this.canvas = el; }}
ref={el => {
this.canvas = el;
}}
/>
</div>
);