Skip to content

Commit

Permalink
Merge pull request #32 from TartejBrothers/Updates
Browse files Browse the repository at this point in the history 
Updated: Designs Animations
  • Loading branch information
@TartejBrothers
TartejBrothers committed May 27, 2024
2 parents c5a3f1a + edf6b77 commit 0cb82c3
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 23 deletions.
97 changes: 77 additions & 20 deletions src/components/designs.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect } from "react";
import "./styles/designs.css";
import left1 from "./assests/designs/left1.png";
import left2 from "./assests/designs/left2.png";
Expand All @@ -7,6 +7,7 @@ import left4 from "./assests/designs/left4.png";
import center1 from "./assests/designs/center1.png";
import center2 from "./assests/designs/center2.png";
import center3 from "./assests/designs/center3.png";
import center4 from "./assests/designs/center4.png";

import right1 from "./assests/designs/right1.png";
import right2 from "./assests/designs/right2.png";
Expand All @@ -22,40 +23,96 @@ import mobileright2 from "./assests/designs/mobileright2.png";
import mobileright3 from "./assests/designs/mobileright3.png";
import mobileright4 from "./assests/designs/mobileright4.png";

export default function designs() {
export default function Designs() {
// useEffect(() => {
// const setScrollHeight = (selector, variable) => {
// const element = document.querySelector(selector);
// const scrollHeight = element.scrollHeight;
// const duration = scrollHeight / 100;
// element.style.setProperty(variable, `${duration}s`);
// };

// setScrollHeight(".designleft-scroll", "--left-scroll-duration");
// setScrollHeight(".designcenter-scroll", "--center-scroll-duration");
// setScrollHeight(".designright-scroll", "--right-scroll-duration");
// }, []);

return (
<div className="designsbody">
<h1 className="commonheader">Our Designs</h1>
<div className="designsmain">
<div className="designleft">
<img src={left1} alt="" />
<img src={left2} alt="" />
<img src={left3} alt="" />
<img src={left4} alt="" />
<div className="designleft-scroll">
<img src={left1} alt="" />
<img src={left2} alt="" />
<img src={left3} alt="" />
<img src={left4} alt="" />
</div>
<div className="designleft-scroll">
<img src={left1} alt="" />
<img src={left2} alt="" />
<img src={left3} alt="" />
<img src={left4} alt="" />
</div>
</div>
<div className="designcenter">
<img src={center1} alt="" />
<img src={center2} alt="" />
<img src={center3} alt="" />
<div className="designcenter-scroll">
<img src={center1} alt="" />
<img src={center2} alt="" />
<img src={center3} alt="" />
<img src={center4} alt="" />
</div>
<div className="designcenter-scroll">
{/* Duplicate images for seamless scrolling */}
<img src={center1} alt="" />
<img src={center2} alt="" />
<img src={center3} alt="" />
<img src={center4} alt="" />
</div>
</div>
<div className="designright">
<img src={right1} alt="" />
<img src={right2} alt="" />
<img src={right3} alt="" />
<div className="designright-scroll">
<img src={right1} alt="" />
<img src={right2} alt="" />
<img src={right3} alt="" />
</div>
<div className="designright-scroll">
<img src={right1} alt="" />
<img src={right2} alt="" />
<img src={right3} alt="" />
</div>
</div>
</div>
<div className="designsmobile">
<div className="designleft">
<img src={mobileleft1} alt="" />
<img src={mobileleft2} alt="" />
<img src={mobileleft3} alt="" />
<img src={mobileleft4} alt="" />
<div className="designleft-scroll">
<img src={mobileleft1} alt="" />
<img src={mobileleft2} alt="" />
<img src={mobileleft3} alt="" />
<img src={mobileleft4} alt="" />
</div>
<div className="designleft-scroll">
{/* Duplicate images for seamless scrolling */}
<img src={mobileleft1} alt="" />
<img src={mobileleft2} alt="" />
<img src={mobileleft3} alt="" />
<img src={mobileleft4} alt="" />
</div>
</div>
<div className="designright">
<img src={mobileright1} alt="" />
<img src={mobileright2} alt="" />
<img src={mobileright3} alt="" />
<img src={mobileright4} alt="" />
<div className="designright-scroll">
<img src={mobileright1} alt="" />
<img src={mobileright2} alt="" />
<img src={mobileright3} alt="" />
<img src={mobileright4} alt="" />
</div>
<div className="designright-scroll">
{/* Duplicate images for seamless scrolling */}
<img src={mobileright1} alt="" />
<img src={mobileright2} alt="" />
<img src={mobileright3} alt="" />
<img src={mobileright4} alt="" />
</div>
</div>
</div>
</div>
Expand Down
65 changes: 62 additions & 3 deletions src/components/styles/designs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,62 @@
padding: 50px 0px;
}
.designsmain {
height: 100vh;
display: flex;
justify-content: center;
gap: 40px;
padding-inline: 40px;
overflow-y: scroll;
overflow: hidden;
}

.designleft,
.designcenter,
.designright {
width: 30%;
height: 100vh;
overflow: hidden;
position: relative;
}

.designleft-scroll,
.designcenter-scroll,
.designright-scroll {
display: flex;
flex-direction: column;
width: 100%;
animation-timing-function: linear;
white-space: nowrap;
}

.designleft-scroll {
animation: scroll-up 15s linear infinite;
}

.designright-scroll {
animation: scroll-up 15s linear infinite;
}
.designcenter-scroll {
animation: scroll-down 15s linear infinite;
}

@keyframes scroll-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-100%));
}
}

@keyframes scroll-down {
0% {
transform: translateY(-100%);
}

100% {
transform: translateY(0%);
}
}

.designleft img,
.designcenter img,
.designright img {
Expand All @@ -22,7 +71,7 @@
height: 100vh;
justify-content: center;
gap: 40px;
padding-inline: 40px;
padding-inline: 10px;
overflow-y: scroll;
}

Expand All @@ -33,4 +82,14 @@
.designsmobile {
display: flex;
}
.designright,
.designleft {
width: 45%;
}
.designright-scroll {
animation: scroll-down 10s linear infinite;
}
.designleft-scroll {
animation: scroll-up 10s linear infinite;
}
}

0 comments on commit 0cb82c3

Please sign in to comment.