RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated splash screen

Browse Source
This commit is contained in:
srgooglo 2021-07-01 10:46:37 +02:00
parent 326c63b457
commit 89943a6446
2 changed files with 203 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
packages/comty/src/components/Splash/index.js
View File

@ -1,49 +1,49 @@
import React from 'react' import React from "react"
import classnames from 'classnames' import "./index.less"
import './index.less'
import styles from './index.less'
export default class AppSplash extends React.Component { export default class Splash extends React.Component {
render() { render() {
return ( return (
<div className={classnames(styles.wrapper, {[styles.fadeout]: this.props.fadeout})} style={this.props.fadeout? { animationDuration: `${this.props.fadeout}ms` } : null} > <div className="splash-wrapper">
<div className="bouncy-logo"> <div className="bouncy-logo">
<div className="ball"> <div className="ball">
<svg viewBox="0 0 100 120"> <svg
<path xmlns="http://www.w3.org/2000/svg"
d="M77.55 29.69L92 18.78a1.42 1.42 0 00.25-2 39.2 39.2 0 00-56.31-4.21A38.05 38.05 0 0023.23 42a38.09 38.09 0 003.62 15.1A38.65 38.65 0 0037.8 70.84 39.46 39.46 0 0083.37 73a38.26 38.26 0 008.41-7.4 1.41 1.41 0 00-.23-2L77.65 53a1.43 1.43 0 00-1.9.15 17 17 0 01-3.2 2.85 17.75 17.75 0 01-9 2.88c-8.32.31-13.62-5.69-14-6.13a17.68 17.68 0 01-4.13-10.13 17.93 17.93 0 014.56-13 17.46 17.46 0 0121.72-3.28 17.3 17.3 0 014 3.2 1.41 1.41 0 001.85.15z" xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ viewBox="0 0 100 120"
backdropFilter: "blur(2px)", >
}} <defs>
fill="rgba(51,51,51,.45)" <linearGradient
/> id="glowingLinearGradient"
<path x1="0"
d="M13 63.17a2.77 2.77 0 013.75 1.43 48.38 48.38 0 0015.32 19.93 48.83 48.83 0 0020.27 8.77 47.37 47.37 0 0040.23-11.5 2.77 2.77 0 014 .3l6.23 7.4a2.79 2.79 0 01-.21 3.83 63.83 63.83 0 01-6 5 62.21 62.21 0 01-7.44 4.7A60.84 60.84 0 0177 108a62.3 62.3 0 01-27 1.51 62.51 62.51 0 01-9.82-2.51A61.5 61.5 0 0120.1 95.69 61.73 61.73 0 012.41 71a2.79 2.79 0 011.42-3.55z" y1="0"
style={{ x2="100%"
backdropFilter: "blur(2px)", y2="100%"
}} gradientUnits="userSpaceOnUse"
fill="rgba(51,51,51,.45)" >
/> <stop stopColor="#d03c4a" offset="10%" />
</svg> <stop stopColor="#ac4ada" offset="20%" />
</div> <stop stopColor="#0087ff" offset="30%" />
<div className="shadow"><div className="ball-shadow"></div></div> <stop stopColor="#2400ff" offset="40%" />
<stop stopColor="#ff1d7a" offset="70%" />
</div> <stop stopColor="#f5381b" offset="80%" />
</div> <stop stopColor="#ff5335" offset="90%" />
) <stop stopColor="#691eff" offset="100%" />
} </linearGradient>
} </defs>
<path
export class AppSplash2 extends React.Component { style={{ stroke: "url(#glowingLinearGradient)" }}
render() { d="M77.55,29.69,92,18.78a1.42,1.42,0,0,0,.25-2,39.2,39.2,0,0,0-56.31-4.21A38.05,38.05,0,0,0,23.23,42a38.09,38.09,0,0,0,3.62,15.1A38.65,38.65,0,0,0,37.8,70.84,39.46,39.46,0,0,0,83.37,73a38.26,38.26,0,0,0,8.41-7.4,1.41,1.41,0,0,0-.23-2L77.65,53a1.43,1.43,0,0,0-1.9.15A17,17,0,0,1,72.55,56a17.75,17.75,0,0,1-9,2.88c-8.32.31-13.62-5.69-14-6.13a17.68,17.68,0,0,1-4.13-10.13,17.93,17.93,0,0,1,4.56-13A17.46,17.46,0,0,1,71.7,26.34a17.3,17.3,0,0,1,4,3.2A1.41,1.41,0,0,0,77.55,29.69Z"
return ( />
<div className="c-logo js-logo is-small"> <path
<svg className="c-logo__svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 248.59 29.29"> style={{ stroke: "url(#glowingLinearGradient)" }}
<g> d="M13,63.17a2.77,2.77,0,0,1,3.75,1.43A48.38,48.38,0,0,0,32.07,84.53,48.83,48.83,0,0,0,52.34,93.3,47.37,47.37,0,0,0,92.57,81.8a2.77,2.77,0,0,1,4,.3l6.23,7.4a2.79,2.79,0,0,1-.21,3.83,63.83,63.83,0,0,1-6,5,62.21,62.21,0,0,1-7.44,4.7A60.84,60.84,0,0,1,77,108a62.3,62.3,0,0,1-27,1.51A62.51,62.51,0,0,1,40.18,107,61.5,61.5,0,0,1,20.1,95.69,61.73,61.73,0,0,1,2.41,71a2.79,2.79,0,0,1,1.42-3.55Z"
<polygon className="c-logo__svg-item c-logo__svg-item--arrow" points="248.59 16.72 233.28 7.36 233.28 11.4 243.69 18.3 233.28 25.2 233.28 29.25 248.59 19.95 248.59 16.72" /> />
</g> </svg>
</svg> </div>
</div> </div>
) <div className="glow"></div>
} </div>
)
}
} }

305
packages/comty/src/components/Splash/index.less
View File

@ -1,172 +1,179 @@
.wrapper { .splash-wrapper {
position: absolute; background-color: #252525;
top: 0; position: absolute;
right: 0; z-index: 0;
display: flex; top: 0;
align-items: center; right: 0;
justify-content: center; width: 100vw;
flex-direction: column; height: 100vh;
background-color: #efefef; animation: background-fade 5.1s linear 0.5s;
color: #2d2d2d; animation-fill-mode: forwards;
border-radius: 12px;
text-align: center;
width: 100%;
height: 100%;
animation-duration: 1500ms;
&.fadeout{
opacity: 0;
animation-name: out;
animation-delay: 0s;
}
} }
.bouncy-logo{ .glow {
width: 100%; width: 100vw;
height: auto; height: 100vh;
margin: auto; position: absolute;
z-index: 1;
top: 0;
right: 0;
opacity: 0;
animation: glow-splash 4.1s ease-out 0.5s;
animation-fill-mode: forwards;
filter: blur(160px);
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
will-change: contents;
background: conic-gradient(
from 230.29deg at 51.63% 52.16%,
#2400ff 0deg,
#0087ff 67.5deg,
#ff1d7a 198.75deg,
#f5381b 251.25deg,
#ff5335 301.88deg,
#691eff 360deg
);
}
.bouncy-logo {
will-change: transition, opacity, z-index;
position: absolute;
z-index: 3;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
} }
.bouncy-logo .ball { .bouncy-logo .ball {
height: auto; animation: logo-bounce 0.5s alternate infinite forwards;
width: 100%;
transform: translate(-10px, 0);
} }
.bouncy-logo .ball svg { .bouncy-logo .ball svg {
width: 200px; opacity: 1;
height: 200px; width: 200px;
margin: auto; height: 200px;
margin: auto;
-webkit-animation-direction: alternate; stroke-width: 1.5;
-webkit-animation-duration: 1s; stroke-opacity: 1;
-webkit-animation-name: my-bounce;
-webkit-animation-iteration-count: infinite; stroke-dasharray: 1000;
animation-direction: alternate; stroke-dashoffset: 1000;
animation-duration: 1s;
animation-name: my-bounce; fill: transparent;
animation-iteration-count: infinite;
animation: logo-reveal 5.1s ease-out 0.5s forwards, logo-stroke 2.1s ease-out 0s forwards,
logo-transform 5.1s ease-out 0s forwards;
} }
.shadow{ @keyframes glow-splash {
width: 100%; 0% {
height: auto; opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
}
15% {
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
}
97% {
z-index: 4;
}
100% {
z-index: 4;
opacity: 0.28;
}
} }
.bouncy-logo .ball-shadow { @keyframes background-fade {
margin: auto; 0% {
background: radial-gradient(50% 50%, rgba(204, 204, 204, 0.45) 0%, transparent 100%); -webkit-animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
height: 50px; animation-timing-function: cubic-bezier(0.74, 0.25, 0.76, 1);
width: 200px; }
-webkit-animation-direction: alternate;
-webkit-animation-duration: 1s; 15% {
-webkit-animation-name: my-grow; -webkit-animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
-webkit-animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.12, 0.01, 0.08, 0.99);
animation-direction: alternate; }
animation-duration: 1s;
animation-name: my-grow; 60% {
animation-iteration-count: infinite; background-color: #f0f2f5;
}
100% {
background-color: #f0f2f5;
}
} }
@-webkit-keyframes my-grow { @keyframes logo-bounce {
from { from {
width: 200px; transform: translate(0, -10px);
height: 50px; }
} to {
to { transform: translate(0, 10px);
width: 150px; }
height: 10px;
}
}
@keyframes my-grow {
from {
width: 200px;
height: 50px;
}
to {
width: 150px;
height: 10px;
}
}
@-webkit-keyframes my-bounce {
from {
top: 0;
}
to {
top: 10%;
}
}
@keyframes my-bounce {
from {
top: 0;
}
to {
top: 10%;
}
} }
.c-logo{ @keyframes logo-transform {
position: absolute; 0% {
top: 0; animation-timing-function: cubic-bezier(0, 0, 0.3rem, 1);
left: 0; transform: scale(5) rotate(65deg);
display: flex; filter: blur(10px);
align-items: center; }
justify-content: center; 17% {
width: 100vw; filter: unset;
height: 100vh; }
18% {
&__svg{ filter: drop-shadow(0 0 80px rgba(255, 255, 255, 1));
width: 280px; }
display: block; 19% {
max-width: 100%; transform: rotate(5deg);
margin: 0px; }
position: relative; 100% {
height: auto; transform: scale(0.8) rotate(0deg);
} }
&__svg-item{
fill: #242424;
transition: all 0.3s ease-in-out 0s;
&--text{
transition: all 0.2s ease-in-out 0.2s;
opacity: 1;
visibility: visible;
}
&--arrow{
transition: all 0.36s ease-in-out 0s;
animation-name: Load;
animation-duration: 2s;
animation-iteration-count: infinite;
}
}
} }
@keyframes Load { @keyframes logo-reveal {
0% { 0% {
transform: translateX(0px); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.3rem, 1);
transition-delay: 0s; animation-timing-function: cubic-bezier(0, 0, 0.3rem, 1);
} }
50%{ 7% {
transform: translateX(-171px); fill: transparent;
transition-delay: 0s; }
} 10% {
100% { fill: rgba(225, 225, 225, 0.8);
transform: translateX(0px); }
transition-delay: 0s; 40% {
} fill: rgba(225, 225, 225, 0.8);
}
100% {
fill: rgba(51, 51, 51, 0.8);
}
} }
@keyframes out { @keyframes logo-stroke {
0% { 0% {
opacity: 100%; stroke-opacity: 0;
} }
100% { 10% {
opacity: 0; stroke-opacity: 1;
} }
100% {
stroke-dashoffset: 0;
stroke-opacity: 0;
}
} }