mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
updated splash screen
This commit is contained in:
parent
326c63b457
commit
89943a6446
@ -1,48 +1,48 @@
|
|||||||
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
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 100 120"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="glowingLinearGradient"
|
||||||
|
x1="0"
|
||||||
|
y1="0"
|
||||||
|
x2="100%"
|
||||||
|
y2="100%"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stopColor="#d03c4a" offset="10%" />
|
||||||
|
<stop stopColor="#ac4ada" offset="20%" />
|
||||||
|
<stop stopColor="#0087ff" offset="30%" />
|
||||||
|
<stop stopColor="#2400ff" offset="40%" />
|
||||||
|
<stop stopColor="#ff1d7a" offset="70%" />
|
||||||
|
<stop stopColor="#f5381b" offset="80%" />
|
||||||
|
<stop stopColor="#ff5335" offset="90%" />
|
||||||
|
<stop stopColor="#691eff" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
<path
|
<path
|
||||||
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"
|
style={{ stroke: "url(#glowingLinearGradient)" }}
|
||||||
style={{
|
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"
|
||||||
backdropFilter: "blur(2px)",
|
|
||||||
}}
|
|
||||||
fill="rgba(51,51,51,.45)"
|
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
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"
|
style={{ stroke: "url(#glowingLinearGradient)" }}
|
||||||
style={{
|
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"
|
||||||
backdropFilter: "blur(2px)",
|
|
||||||
}}
|
|
||||||
fill="rgba(51,51,51,.45)"
|
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div className="shadow"><div className="ball-shadow"></div></div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="glow"></div>
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class AppSplash2 extends React.Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="c-logo js-logo is-small">
|
|
||||||
<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">
|
|
||||||
<g>
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,172 +1,179 @@
|
|||||||
.wrapper {
|
.splash-wrapper {
|
||||||
|
background-color: #252525;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
width: 100vw;
|
||||||
display: flex;
|
height: 100vh;
|
||||||
align-items: center;
|
animation: background-fade 5.1s linear 0.5s;
|
||||||
justify-content: center;
|
animation-fill-mode: forwards;
|
||||||
flex-direction: column;
|
|
||||||
background-color: #efefef;
|
|
||||||
color: #2d2d2d;
|
|
||||||
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 {
|
||||||
|
opacity: 1;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
margin: auto;
|
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%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bouncy-logo .ball-shadow {
|
|
||||||
margin: auto;
|
|
||||||
background: radial-gradient(50% 50%, rgba(204, 204, 204, 0.45) 0%, transparent 100%);
|
|
||||||
height: 50px;
|
|
||||||
width: 200px;
|
|
||||||
-webkit-animation-direction: alternate;
|
|
||||||
-webkit-animation-duration: 1s;
|
|
||||||
-webkit-animation-name: my-grow;
|
|
||||||
-webkit-animation-iteration-count: infinite;
|
|
||||||
animation-direction: alternate;
|
|
||||||
animation-duration: 1s;
|
|
||||||
animation-name: my-grow;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes my-grow {
|
|
||||||
from {
|
|
||||||
width: 200px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
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{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
|
|
||||||
&__svg{
|
|
||||||
width: 280px;
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0px;
|
|
||||||
position: relative;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__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 {
|
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(0px);
|
|
||||||
transition-delay: 0s;
|
|
||||||
}
|
|
||||||
50%{
|
|
||||||
transform: translateX(-171px);
|
|
||||||
transition-delay: 0s;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(0px);
|
|
||||||
transition-delay: 0s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes out {
|
|
||||||
0% {
|
|
||||||
opacity: 100%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes background-fade {
|
||||||
|
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% {
|
||||||
|
-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);
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-bounce {
|
||||||
|
from {
|
||||||
|
transform: translate(0, -10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(0, 10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-transform {
|
||||||
|
0% {
|
||||||
|
animation-timing-function: cubic-bezier(0, 0, 0.3rem, 1);
|
||||||
|
transform: scale(5) rotate(65deg);
|
||||||
|
filter: blur(10px);
|
||||||
|
}
|
||||||
|
17% {
|
||||||
|
filter: unset;
|
||||||
|
}
|
||||||
|
18% {
|
||||||
|
filter: drop-shadow(0 0 80px rgba(255, 255, 255, 1));
|
||||||
|
}
|
||||||
|
19% {
|
||||||
|
transform: rotate(5deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.8) rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-reveal {
|
||||||
|
0% {
|
||||||
|
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.3rem, 1);
|
||||||
|
animation-timing-function: cubic-bezier(0, 0, 0.3rem, 1);
|
||||||
|
}
|
||||||
|
7% {
|
||||||
|
fill: transparent;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
fill: rgba(225, 225, 225, 0.8);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
fill: rgba(225, 225, 225, 0.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
fill: rgba(51, 51, 51, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-stroke {
|
||||||
|
0% {
|
||||||
|
stroke-opacity: 0;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
stroke-opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user