feat(chapter): add image filter animation

libs/ui/src/lib/chapter/chapter.scss

@@ -36,7 +36,6 @@
       transform: translateZ(0);
       z-index: 4;
       background: 50% 50% / cover;
-      filter: saturate(.8);
     }
 
     &--back {
@@ -50,4 +49,24 @@
       z-index: 2;
     }
   }
-}
+}
+
+.back {
+  z-index: -1;
+}
+
+.fade-in-scale {
+  animation: fade-in-scale-down 5s linear 1;
+}
+
+@keyframes fade-in-scale-down {
+  0% {
+    scale: 1.2;
+    filter: blur(7px) brightness(2) grayscale(1);
+  }
+
+  100% {
+    scale: 1;
+    filter: blur(0) brightness(1) grayscale(0);
+  }
+}

libs/ui/src/lib/chapter/chapter.tsx

@@ -36,7 +36,10 @@ export const ChapterComponent = (props: Chapter) => {
 
   const renderChapterGroups = () => {
     return props.groups.map((group, index) => 
-    <div key={index} className='parallax__group'>
+    <div key={index} className={`parallax__group ${group.background ? 'back' : ''}`}>
+      {group.background && <div className={`parallax__layer parallax__layer--back`}>
+        <Image value={group.background} width={'bg'}/>
+      </div>}
       {group.content && renderChapterContent(group)}
     </div>)
   }
@@ -74,7 +77,7 @@ export const ChapterComponent = (props: Chapter) => {
   return (
     <div className='parallax'>
       <div className='parallax__group parallax__header'>
-        <div className={`parallax__layer parallax__layer--base ${classes.chapter}`}>
+        <div className={`parallax__layer parallax__layer--base fade-in-scale ${classes.chapter}`}>
           <Title text={props.name} />
           <Chip onClick={() => startAudio()} label={volume ? "Ton aus" : "Ton an"} />
           <Scrollicon/>
@@ -84,4 +87,4 @@ export const ChapterComponent = (props: Chapter) => {
       </div>
   );
 };
-export default ChapterComponent;
+export default ChapterComponent;

libs/ui/src/lib/image/image.scss

@@ -16,4 +16,8 @@
 img {
   height:auto;
   width: 100%;
-}
+}
+
+.bg {
+  opacity: 0.3;
+}

libs/ui/src/lib/video/video.scss

@@ -1,6 +1,7 @@
 video {
   width: 100%;
   height: auto;
+  box-shadow: 5px 5px 5px var(--color-text);
 }
 
 .chapter_video {
@@ -34,4 +35,4 @@ video {
 
 .play.hide {
   display: none;
-}
+}