From d50b5c229d50f099e82eaf9ee2807cfc1eaaa139 Mon Sep 17 00:00:00 2001 From: primakov Date: Wed, 30 Nov 2022 13:41:29 +0300 Subject: [PATCH] blow animation feature --- ijl.config.js | 5 ++++ src/assets/logo-short.svg | 57 +++++++++++++++++++++++++++++++++++++++ src/pages/main.tsx | 29 ++++++++++++++++++++ src/pages/style.ts | 45 +++++++++++++++++++++++++++++++ 4 files changed, 136 insertions(+) create mode 100644 src/assets/logo-short.svg diff --git a/ijl.config.js b/ijl.config.js index d1d60bd..b7da46e 100644 --- a/ijl.config.js +++ b/ijl.config.js @@ -22,6 +22,11 @@ module.exports = { "on": true, "value": "true", "key": "fullScreen" + }, + "blowAnim": { + "on": true, + "value": "true", + "key": "blowAnim" } }, }, diff --git a/src/assets/logo-short.svg b/src/assets/logo-short.svg new file mode 100644 index 0000000..563c229 --- /dev/null +++ b/src/assets/logo-short.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 685cd07..9251b1e 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -4,6 +4,7 @@ import { getFeatures } from '@ijl/cli'; import logo from '../assets/logo.svg'; import arrow from '../assets/36-arrow-right.svg'; import fullScreen from '../assets/fullscreen.svg'; +import logoShort from '../assets/logo-short.svg'; import { Keyboard } from '../components/keyboard'; @@ -27,11 +28,14 @@ import { CircleDiv, FullScreenButton, InputHolder, + Blow, + BigLogo, } from './style'; import { socket } from "../socket"; const keyboardFeature = getFeatures('hub-video-start')?.keyboard; const fullScreenFeature = getFeatures('hub-video-start')?.fullScreen; +const blowAnimFeature = getFeatures('hub-video-start')?.blowAnim; const Input = ({ onStart }) => { const [value, setValue] = useState(''); @@ -124,6 +128,31 @@ const Start = () => { return ( + {sended && blowAnimFeature && ( + <> + + + + + + + + )} {/* ` + z-index: 10; + border-radius: 50%; + position: absolute; + left: 50%; + top: 50%; + width: 0; + height: 0%; + background-color: ${({ color }) => color}; + animation: ${blowAnim} 1s ease-out forwards; + animation-delay: ${({ delay }) => delay}s; + transform: translate(-50%, -50%); +`; + +const blowAnimShort = keyframes` + to { + width: 50vw; + height: 50vw; + } +`; + +export const BigLogo = styled.img` + z-index: 10; + position: absolute; + left: 50%; + top: 50%; + width: 0; + height: 0; + animation: ${blowAnimShort} 2s ease-out forwards; + animation-delay: .7s; + transform: translate(-50%, -50%); +`;