refactoring clouds to propper component
This commit is contained in:
parent
b19b502a83
commit
50231292f9
13
src/assets/css/components/animation/Clouds.scss
Normal file
13
src/assets/css/components/animation/Clouds.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.cloud-animation {
|
||||
@apply w-full h-full fixed top-0 left-0;
|
||||
z-index: 90;
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
scale: 1.1;
|
||||
filter: blur(2px);
|
||||
svg {
|
||||
width: 100px;
|
||||
heigth: 100px;
|
||||
}
|
||||
}
|
||||
16
src/components/animations/Clouds.jsx
Normal file
16
src/components/animations/Clouds.jsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import React from "react";
|
||||
|
||||
import cloudPageTransition from "../../assets/animations/transition-nuages-pages";
|
||||
import Lottie from "lottie-react";
|
||||
|
||||
export default function Clouds() {
|
||||
return (
|
||||
<Lottie
|
||||
className='cloud-animation'
|
||||
animationData={cloudPageTransition}
|
||||
speed={21}
|
||||
loop={false}
|
||||
autoplay
|
||||
/>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user