incorporated tilt effect

Hachondeoro · Jan 27, 2021 · 2d3e249 · 2d3e249
1 parent 3420126
commit 2d3e249
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 156 deletions.
diff --git a/components/Product.js b/components/Product.js
@@ -1,13 +1,22 @@
 import React from "react";
+import Tilt from "react-parallax-tilt";
+
 const Product = (props) => {
   return (
     <div className="col-sm-4">
       <div className="card" style={{ width: "18rem" }}>
-        <img
-          src={props.product.image.url}
-          className="card-img-top"
-          alt="shirt"
-        />
+        <Tilt
+          className="m-auto"
+          glareEnable={true}
+          glareMaxOpacity={0.45}
+          scale={1.25}
+        >
+          <img
+            src={props.product.image.url}
+            className="card-img-top"
+            alt="shirt"
+          />
+        </Tilt>
         <div className="card-body">
           <h5 className="card-title">{props.product.name}</h5>
           <p className="card-title">$ {props.product.price}</p>

diff --git a/components/Recharts/barchart.js b/components/Recharts/barchart.js
diff --git a/components/Recharts/linechart.js b/components/Recharts/linechart.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "react-dom": "16.13.1",
     "react-leaflet": "^3.0.2",
     "react-papaparse": "^3.11.1",
+    "react-parallax-tilt": "^1.4.71",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",

diff --git a/pages/charts.js b/pages/charts.js
diff --git a/pages/djbistro.js b/pages/djbistro.js
@@ -5,6 +5,7 @@ import { Container, Row, Col } from "reactstrap";
 
 // core components
 import { djbistro } from "assets/information";
+import Tilt from "react-parallax-tilt";
 
 function DjBistro() {
   return (
@@ -18,13 +19,20 @@ function DjBistro() {
                 <h5>{djbistro[0].description}</h5>
                 <br />
               </Col>
-              <Col className="m-auto" md="7">
-                <img
-                  alt="FUCKING HELL NO IMAGE"
-                  src={require("assets/images/djbistro.jpg")}
-                  width="100%"
-                />
-              </Col>
+              <Tilt
+                className="m-auto"
+                glareEnable={true}
+                glareMaxOpacity={0.45}
+                scale={1.25}
+              >
+                <div style={{ height: "300px" }} perspective={500}>
+                  <img
+                    alt="FUCKING HELL NO IMAGE"
+                    src={require("assets/images/djbistro.jpg")}
+                    width="100%"
+                  />
+                </div>
+              </Tilt>
             </Row>
             <br />
             <br />