ideamatrics about us slider updted

wpgenius · Sep 4, 2024 · ab27873 · ab27873
1 parent a885be6
commit ab27873
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 0 deletions.
diff --git a/ideamatrics-robotic-arm-animation/about-us-slider/css/style.css b/ideamatrics-robotic-arm-animation/about-us-slider/css/style.css
@@ -0,0 +1,48 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+body {
+  overflow-x: hidden;
+}
+.main {
+  width: 100%;
+  height: 100vh;
+  background-color: rgb(90, 82, 82);
+}
+.cw1,
+.cw2 {
+  height: 100vh;
+  width: 100%;
+}
+.cw1 {
+  background-color: blueviolet;
+}
+.cw2 {
+  background-color: rgb(57, 132, 27);
+}
+
+.main-container {
+  width: 100%;
+  height: 100vh;
+  background-color: chartreuse;
+}
+
+.container-wrap {
+  width: 300vw;
+  height: 100%;
+  display: flex;
+  gap: 10rem;
+  align-items: center;
+}
+
+.container {
+  width: 8%;
+  height: 45vh;
+  margin-left: 5%;
+  background-color: blueviolet;
+}
+#c2 {
+  margin-top: -5%;
+}
diff --git a/ideamatrics-robotic-arm-animation/about-us-slider/index.html b/ideamatrics-robotic-arm-animation/about-us-slider/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="css/style.css" />
+  </head>
+  <body>
+    <div class="main">
+      <div class="cw1"></div>
+      <div class="main-container">
+        <div class="container-wrap" id="wrap1">
+          <div class="container" id="c1"></div>
+          <div class="container" id="c2"></div>
+          <div class="container" id="c1"></div>
+          <div class="container" id="c2"></div>
+          <div class="container" id="c1"></div>
+          <div class="container" id="c2"></div>
+        </div>
+      </div>
+      <div class="cw2"></div>
+    </div>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
+      integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="js/script.js"></script>
+  </body>
+</html>
diff --git a/ideamatrics-robotic-arm-animation/about-us-slider/js/script.js b/ideamatrics-robotic-arm-animation/about-us-slider/js/script.js
@@ -0,0 +1,12 @@
+gsap.to(".container-wrap", {
+  transform: "translateX(-200vw)",
+  scrollTrigger: {
+    trigger: ".container-wrap",
+    scroller: "body",
+    markers: true,
+    pin: true,
+    start: "top 100vh",
+    end: "top -100vh",
+    scrub: 4,
+  },
+});