Add animation slide and horizontal scroll

Author: AangPer

Diff for: package-lock.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@oberon-amsterdam/horizontal": "^1.0.2",
     "@svgr/core": "^4.3.3",
     "fb-sdk-wrapper": "^1.0.4",
     "moment": "^2.24.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-feather": "^2.0.3",
-    "react-horizontal-scrolling-menu": "^0.7.5",
     "react-moment": "^0.9.7",
     "react-plx": "^1.3.14",
     "react-scripts": "3.2.0",

Diff for: package.json

@@ -23,7 +23,7 @@ const Slide = () => {
       </div>
       {/* <Parallax className="header__slider" y={[-20, 30]} tagOuter="figure"> */}
       <div className="header__slider">
-        <img src={Foto} alt="" className="header__slider__img" />
+        <div className="header__slider__img" />
       </div>
       {/* </Parallax> */}
     </header>

Diff for: src/assets/img/slide-3.jpg

@@ -2,16 +2,18 @@ import React from 'react';
 import MentorCard from './MentorCard';
 import hexagon from '../assets/img/parallax-hexagon.svg';
 import { Parallax } from 'react-scroll-parallax';
+import { useState } from 'react';
+import useHorizontal from '@oberon-amsterdam/horizontal/hook';
 
-
-const Mentors = ({mentorList, selected}) => {
+const Mentors = ({mentorList}) => {
+const [container, setContainer] = useState();
+useHorizontal({ container: container });
 const mapMentorsList = () => (
   mentorList.map(mentor => {
     const { name, lastName, photo } = mentor;
-    const onClick = () => console.log('original onClick ', name);
     return (
       <MentorCard name={name} lastName={lastName}
-      photo={photo} key={name} selected={selected} onClick={onClick} />
+      photo={photo} key={name}/>
     );
   })
 );
@@ -21,7 +23,7 @@ const mapMentorsList = () => (
         <h2 className="heading-secondary heading-secondary--white u-align-center u-margin-top-big u-margin-bottom-big">
           Mentores
         </h2>
-        <div className="section-mentors__box">
+        <div className="section-mentors__box container" ref={ref => { setContainer(ref); }}>
         {mapMentorsList()}
         </div>
       </div>

Diff for: src/assets/img/slide-4.jpg

@@ -25,16 +25,20 @@
     position: absolute;
     top: 100px;
     right: 0%;
-    height: 720px;
-    width: 1080px;
-    background-color: #FFF800;
+    height: 95vh;
+    width: 66vw;
     z-index: -1000;
     overflow: hidden; }
     .header__slider__img {
       width: 100%;
-      object-fit: cover;
-      mix-blend-mode: darken;
-      transition: All ease-in-out 0.3s; }
+      background-blend-mode: darken;
+      background-image: linear-gradient(#FFF800, #FFF800), url("../assets/img/slide-1.jpg");
+      background-size: cover;
+      background-repeat: no-repeat;
+      animation-name: example;
+      animation-timing-function: linear;
+      animation-duration: 10s;
+      animation-iteration-count: infinite; }
 
 *,
 *::after,
@@ -47,7 +51,10 @@ html {
   font-size: 62.5%; }
 
 body {
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  scrollbar-color: #7f7f7f white;
+  /* thumb and track color */
+  scrollbar-width: thin; }
 
 .u-underline {
   text-decoration: underline;
@@ -202,6 +209,40 @@ body {
     opacity: 1;
     transform: translate(0); } }
 
+@keyframes example {
+  0% {
+    background-image: linear-gradient(#FFF800, #FFF800), url("../assets/img/slide-1.jpg");
+    transform: skew(0deg, 0deg) scale(1) rotate(0deg);
+    transform-origin: 80% 80%; }
+  2% {
+    background-image: linear-gradient(#FFF800, #FFF800), url("../assets/img/slide-2.jpg");
+    transform: scale(4, 3) rotate(-30deg);
+    transform-origin: 80% 80%; }
+  3% {
+    background-image: linear-gradient(#FFF800, #FFF800), url("../assets/img/slide-2.jpg");
+    transform: scale(4, 4) rotate(-60deg);
+    transform-origin: 80% 80%; }
+  4% {
+    background-image: linear-gradient(#FFF800, #FFF800), url("../assets/img/slide-2.jpg");
+    transform: scale(1) rotate(-90deg);
+    transform-origin: 80% 80%; }
+  5% {
+    background-image: linear-gradient(#FFF800, #FFF800), url("../assets/img/slide-2.jpg");
+    transform: scale(1) rotate(-90deg);
+    transform-origin: 80% 80%; }
+  100% {
+    background-image: linear-gradient(#FFF800, #FFF800), url("../assets/img/slide-2.jpg");
+    transform: scale(1) rotate(-90deg);
+    transform-origin: 80% 80%; } }
+
+@keyframes chamaleon {
+  0% {
+    background-color: red; }
+  25% {
+    background-color: green; }
+  100% {
+    background-color: white; } }
+
 .slides {
   display: flex;
   position: absolute;
@@ -485,7 +526,10 @@ body {
     overflow-y: scroll;
     overflow: -moz-scrollbars-none;
     flex-wrap: wrap;
-    -ms-overflow-style: none; }
+    -ms-overflow-style: none;
+    scrollbar-color: transparent transparent;
+    /* thumb and track color */
+    scrollbar-width: thin; }
     .section-events__event-gallery::-webkit-scrollbar {
       display: none; }
 
@@ -514,7 +558,12 @@ body {
     flex-direction: row;
     align-items: flex-start;
     justify-content: flex-start;
-    z-index: 5; }
+    z-index: 5;
+    scrollbar-color: transparent transparent;
+    /* thumb and track color */
+    scrollbar-width: thin; }
+    .section-mentors__box::-webkit-scrollbar {
+      width: 0px; }
     .section-mentors__box .card__mentor:last-child::after {
       right: -8em;
       width: calc(100% + 16em); }

Diff for: src/components/Header.js

@@ -45,11 +45,13 @@ const mentorList = [
 console.log(mentorList[2])
 class Home extends React.Component {
 
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = {
       data: []
     }
+    // this.menu = null;
+    // this.menuItems = Mentors(mentorList.slice(0, mentorList.length), this.state.selected);
   }