feat(chapter): add icon scroll animation

gerdesque · Jun 12, 2020 · d460b7e · d460b7e
1 parent dc13736
commit d460b7e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/libs/ui/src/lib/chapter/chapter.scss b/libs/ui/src/lib/chapter/chapter.scss
@@ -47,4 +47,40 @@
       z-index: 2;
     }
   }
+}
+
+.icon-scroll,
+.icon-scroll:before {
+  position: absolute;
+  left: 50%;
+}
+.icon-scroll {
+  width: 48px;
+  height: 84px;
+  margin-left: -20px;
+  top: 85%;
+  margin-top: -35px;
+  border: 4px solid var(--color-title);
+  border-radius: 25px;
+}
+.icon-scroll:before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  background: var(--color-title);
+  margin-left: -4px;
+  top: 8px;
+  border-radius: 4px;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-name: scroll;
+}
+@keyframes scroll {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(46px);
+  }
 }
diff --git a/libs/ui/src/lib/chapter/chapter.tsx b/libs/ui/src/lib/chapter/chapter.tsx
@@ -40,6 +40,7 @@ export const ChapterComponent = (props: Chapter) => {
       <div className='parallax__group parallax__header'>
         <div className={`parallax__layer parallax__layer--base ${classes.chapter}`}>
           <Title text={props.name} />
+          <div className='icon-scroll'></div>
         </div>
       </div>
       {props.groups && renderChapterGroups()}