added gooey effect, video play/pause cursor

Somraj-234 · Jul 14, 2024 · 17778a7 · 17778a7
1 parent fcb1473
commit 17778a7
Show file tree

Hide file tree

Showing 15 changed files with 355 additions and 95 deletions.
diff --git a/img/AIM-1.jpeg b/img/AIM-1.jpeg
diff --git a/img/AIM-2.jpeg b/img/AIM-2.jpeg
diff --git a/img/Laxer_1-2.jpeg b/img/Laxer_1-2.jpeg
diff --git a/img/Laxer_2.jpeg b/img/Laxer_2.jpeg
diff --git a/img/Makhno_First.jpeg b/img/Makhno_First.jpeg
diff --git a/img/Makhno_Hover.jpeg b/img/Makhno_Hover.jpeg
diff --git a/img/OCHI.jpeg b/img/OCHI.jpeg
diff --git a/img/OCHI_2-1.jpeg b/img/OCHI_2-1.jpeg
diff --git a/img/Olga_Prudka_1.jpeg b/img/Olga_Prudka_1.jpeg
diff --git a/img/Olga_Prudka_2.jpeg b/img/Olga_Prudka_2.jpeg
diff --git a/img/Éminente_First.jpeg b/img/Éminente_First.jpeg
diff --git a/img/Éminente_Second.jpeg b/img/Éminente_Second.jpeg
diff --git a/index.html b/index.html
@@ -4,19 +4,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Obys Agency</title>
-    <link rel="stylesheet" href="https://unpkg.com/sheryjs/dist/Shery.css" />
-    <script>
-        // Immediately set scroll position to top when the page starts loading
-        window.history.scrollRestoration = 'manual';
-        window.scrollTo(0, 0);
-      </script>
+          <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sheryjs/dist/Shery.css" /> -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aayushchouhan24/sheryjs@main/dist/Shery.css">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet"/>
-    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div id="crsr"></div>
+    <div class="mousefollower"></div>
     <div id="loader">
         <div class="line">
             <div id="line1-part1">
@@ -34,7 +31,7 @@ <h2>now</h2>
         </div>
     </div>
     <div id="main">
-        <div id="page1" data-scroll data-scroll-speed="-2.5">
+        <div id="page1" data-scroll data-scroll-speed="-1">
             <div id="nav">
                 <svg class="brand__svg" width="71" height="27" viewBox="0 0 71 27">
                     <path d="M40.7622 24.5917C40.7622 23.6724 41.4511 22.9829 42.3697 22.9829C43.2883 22.9829 43.9773 23.6724 43.9773 24.5917C43.9773 25.511 43.2883 26.2005 42.3697 26.2005C41.566 26.2005 40.7622 25.3961 40.7622 24.5917Z" fill="currentColor"></path>
@@ -67,18 +64,59 @@ <h2>Graphic</h2>
                     <h1>Experince</h1>
                 </div>
         </div>
-        <div id="page2" data-scroll data-scroll-speed="-2.5">
-            <div id="video-cursor">
-                <i class="ri-play-fill"></i>
-            </div>
+        <div id="page2" data-scroll data-scroll-speed="-1.4">
             <div id="video-container">
-                <img src="https://obys.agency/wp-content/uploads/2022/11/Showreel-2022-preview-1.jpg" alt="">
-                <video muted autoplay src="https://obys.agency/wp-content/uploads/2022/11/Obys-Showreel-2022.mp4"></video>
-            </div> 
+                <div id="video-cursor">
+                    <i class="ri-play-fill"></i>
+                </div>
+                <video loop src="https://obys.agency/wp-content/uploads/2022/11/Obys-Showreel-2022.mp4" alt="">
+                </div> 
         </div>
 
-        <div id="page3" data-scroll></div>
-        <div id="page4" data-scroll>
+        <div id="page3" data-scroll data-scroll-speed="-1.4">
+            <h1>Our Projects</h1>
+            <div class="underline"></div>
+            <div id="img-div-container">
+                <div class="image-div">
+                    <img src="./img/Olga_Prudka_1.jpeg" alt="">    
+                    <img src="./img/Olga_Prudka_2.jpeg" alt="">    
+                </div>
+                <div class="image-div">
+                    <img src="./img/AIM-1.jpeg" alt="">    
+                    <img src="./img/AIM-2.jpeg" alt="">    
+                </div>
+
+                <div class="page3-circle">
+                    <svg class="button__arrow" viewBox="0 0 91 118" fill="none">
+                        <path d="M15.2307 57.4152L15.9378 56.708L15.2307 56.0009L14.5236 56.708L15.2307 57.4152ZM34.9813 77.1658L34.2742 77.8729L35.9813 79.58L35.9813 77.1658L34.9813 77.1658ZM0.151478 72.4944L-0.555622 71.7873L-1.26273 72.4944L-0.555622 73.2015L0.151478 72.4944ZM45.29 117.633L44.5828 118.34L45.29 119.047L45.9971 118.34L45.29 117.633ZM60.3692 102.554L61.0763 103.261L61.7839 102.553L61.0758 101.846L60.3692 102.554ZM60.3685 102.553L59.6614 101.846L58.9538 102.553L59.6619 103.261L60.3685 102.553ZM90.427 72.4944L91.1341 73.2015L91.8412 72.4944L91.1341 71.7873L90.427 72.4944ZM75.3478 57.4152L76.0549 56.7081L75.3478 56.001L74.6407 56.7081L75.3478 57.4152ZM56.3065 76.4565L55.3065 76.4565L55.3065 78.8707L57.0136 77.1636L56.3065 76.4565ZM56.3065 0.120074L57.3065 0.120074L57.3065 -0.879926L56.3065 -0.879926L56.3065 0.120074ZM34.9813 0.120076L34.9813 -0.879924L33.9813 -0.879924L33.9813 0.120076L34.9813 0.120076ZM14.5236 58.1223L34.2742 77.8729L35.6884 76.4587L15.9378 56.708L14.5236 58.1223ZM0.858585 73.2015L15.9378 58.1223L14.5236 56.708L-0.555622 71.7873L0.858585 73.2015ZM45.9971 116.926L0.858585 71.7873L-0.555622 73.2015L44.5828 118.34L45.9971 116.926ZM59.662 101.846L44.5828 116.926L45.9971 118.34L61.0763 103.261L59.662 101.846ZM59.6619 103.261L59.6625 103.261L61.0758 101.846L61.0751 101.845L59.6619 103.261ZM61.0756 103.26L91.1341 73.2015L89.7199 71.7873L59.6614 101.846L61.0756 103.26ZM91.1341 71.7873L76.0549 56.7081L74.6407 58.1223L89.7199 73.2015L91.1341 71.7873ZM74.6407 56.7081L55.5994 75.7494L57.0136 77.1636L76.0549 58.1223L74.6407 56.7081ZM57.3065 76.4565L57.3065 0.120074L55.3065 0.120074L55.3065 76.4565L57.3065 76.4565ZM56.3065 -0.879926L34.9813 -0.879924L34.9813 1.12008L56.3065 1.12007L56.3065 -0.879926ZM33.9813 0.120076L33.9813 77.1658L35.9813 77.1658L35.9813 0.120076L33.9813 0.120076Z" fill="currentColor"></path></svg>
+
+                        <div class="circle-in">
+                            <p>We are thrilled toh ey on board.
+                                We hope you enjoy the projects 🩷</p>
+                        </div>
+                    </div> 
+                <div class="page3-circle2">
+                    <svg class="button__arrow" viewBox="0 0 91 118" fill="none">
+                        <path d="M15.2307 57.4152L15.9378 56.708L15.2307 56.0009L14.5236 56.708L15.2307 57.4152ZM34.9813 77.1658L34.2742 77.8729L35.9813 79.58L35.9813 77.1658L34.9813 77.1658ZM0.151478 72.4944L-0.555622 71.7873L-1.26273 72.4944L-0.555622 73.2015L0.151478 72.4944ZM45.29 117.633L44.5828 118.34L45.29 119.047L45.9971 118.34L45.29 117.633ZM60.3692 102.554L61.0763 103.261L61.7839 102.553L61.0758 101.846L60.3692 102.554ZM60.3685 102.553L59.6614 101.846L58.9538 102.553L59.6619 103.261L60.3685 102.553ZM90.427 72.4944L91.1341 73.2015L91.8412 72.4944L91.1341 71.7873L90.427 72.4944ZM75.3478 57.4152L76.0549 56.7081L75.3478 56.001L74.6407 56.7081L75.3478 57.4152ZM56.3065 76.4565L55.3065 76.4565L55.3065 78.8707L57.0136 77.1636L56.3065 76.4565ZM56.3065 0.120074L57.3065 0.120074L57.3065 -0.879926L56.3065 -0.879926L56.3065 0.120074ZM34.9813 0.120076L34.9813 -0.879924L33.9813 -0.879924L33.9813 0.120076L34.9813 0.120076ZM14.5236 58.1223L34.2742 77.8729L35.6884 76.4587L15.9378 56.708L14.5236 58.1223ZM0.858585 73.2015L15.9378 58.1223L14.5236 56.708L-0.555622 71.7873L0.858585 73.2015ZM45.9971 116.926L0.858585 71.7873L-0.555622 73.2015L44.5828 118.34L45.9971 116.926ZM59.662 101.846L44.5828 116.926L45.9971 118.34L61.0763 103.261L59.662 101.846ZM59.6619 103.261L59.6625 103.261L61.0758 101.846L61.0751 101.845L59.6619 103.261ZM61.0756 103.26L91.1341 73.2015L89.7199 71.7873L59.6614 101.846L61.0756 103.26ZM91.1341 71.7873L76.0549 56.7081L74.6407 58.1223L89.7199 73.2015L91.1341 71.7873ZM74.6407 56.7081L55.5994 75.7494L57.0136 77.1636L76.0549 58.1223L74.6407 56.7081ZM57.3065 76.4565L57.3065 0.120074L55.3065 0.120074L55.3065 76.4565L57.3065 76.4565ZM56.3065 -0.879926L34.9813 -0.879924L34.9813 1.12008L56.3065 1.12007L56.3065 -0.879926ZM33.9813 0.120076L33.9813 77.1658L35.9813 77.1658L35.9813 0.120076L33.9813 0.120076Z" fill="currentColor"></path></svg>
+
+                        <div class="circle-in">
+                            <p>It will make you WOW!😉</p>
+                        </div>
+                    </div> 
+
+                <div class="image-div">
+                    <img src="./img/OCHI.jpeg" alt="">    
+                    <img src="./img/OCHI_2-1.jpeg" alt="">    
+                </div>
+                <div class="image-div">
+                    <img src="./img/Laxer_1-2.jpeg" alt="">    
+                    <img src="./img/Laxer_2.jpeg" alt="">    
+                </div>
+            </div>
+
+
+        </div> 
+        <div id="page4" data-scroll data-scroll-speed="-1.4">
             <div id="page4-content">
                 <h1>About Obys</h1>
                 <div class="underline"></div>
@@ -161,7 +199,7 @@ <h6>We Work With</h6>
 
             </div>
         </div>
-        <div id="page5" data-scroll>
+        <div id="page5" data-scroll data-scroll-speed="-1.4">
             <div class="elem">
                 <h1>Sport - Fashion - <span>Technology</span> -</h1>
                 <h1>Sport - Fashion - <span>Technology</span> -</h1>
@@ -179,7 +217,7 @@ <h1><span>Partners</span> - Science - Travel - </h1>
                 <h1><span>Partners</span> - Science - Travel - </h1>
             </div>
         </div>
-        <div id="footer" data-scroll>
+        <div id="footer" data-scroll data-scroll-speed="-1.4">
             <h1>Let's Create</h1>
             <div class="underline"></div>
             <div id="footer-div">
@@ -210,10 +248,15 @@ <h6>Obys agency ©️ 2024</h6>
         </div>
     </div>
 
-    <script>"https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"</script>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
     <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  type="text/javascript"  src="https://unpkg.com/sheryjs/dist/Shery.js"></script> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.155.0/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/automat/controlkit.js@master/bin/controlKit.min.js"></script>
+    <script  type="text/javascript"  src="https://cdn.jsdelivr.net/gh/aayushchouhan24/sheryjs@main/dist/Shery.js"></script>
     <script src="script.js"></script>
 </body>
-</html>
+</html>
+
+
diff --git a/script.js b/script.js
@@ -1,41 +1,44 @@
+function locomotiveAnimation(){
+    gsap.registerPlugin(ScrollTrigger);
 
+const locoScroll = new LocomotiveScroll({
+  el: document.querySelector("#main"),
+  smooth: true,
 
-function locomotiveAnimation() {
-    gsap.registerPlugin(ScrollTrigger);
+  // for tablet smooth
+  tablet: { smooth: true },
 
-    // Ensure the page is at the top before initializing Locomotive Scroll
-    window.scrollTo(0, 0);
+  // for mobile
+  smartphone: { smooth: true }
+});
+locoScroll.on("scroll", ScrollTrigger.update);
+
+ScrollTrigger.scrollerProxy("#main", {
+  scrollTop(value) {
+    return arguments.length
+      ? locoScroll.scrollTo(value, 0, 0)
+      : locoScroll.scroll.instance.scroll.y;
+  },
+  getBoundingClientRect() {
+    return {
+      top: 0,
+      left: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  }
+
+  // follwoing line is not required to work pinning on touch screen
+
+  /* pinType: document.querySelector(".smooth-scroll").style.transform
+    ? "transform"
+    : "fixed"*/
+});
 
-    const locoScroll = new LocomotiveScroll({
-        el: document.querySelector("#main"),
-        smooth: true,
-        // Disable initial lerp to prevent jump on load
-        lerp: 0
-    });
+ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
 
-    // Re-enable smooth scrolling after a short delay
-    setTimeout(() => {
-        locoScroll.update();
-        locoScroll.setScroll(0, 0);
-        locoScroll.scrollTo(0, {duration: 0, disableLerp: true});
-        locoScroll.options.lerp = 0.1; // or whatever your desired lerp value is
-    }, 100);
-
-    // Rest of your locomotiveAnimation function...
-    locoScroll.on("scroll", ScrollTrigger.update);
-
-    ScrollTrigger.scrollerProxy("#main", {
-        scrollTop(value) {
-            return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
-        },
-        getBoundingClientRect() {
-            return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
-        },
-        pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
-    });
+ScrollTrigger.refresh();
 
-    ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
-    ScrollTrigger.refresh();
 }
 
 function loadingAnimation(){
@@ -74,7 +77,7 @@ tl.from("#page1",{
     delay:0.2,
     y:1600,
     opacity:0,
-    duartion:0.5,
+    duration:0.5,
     ease:Power4
 });
 tl.to("#loader",{
@@ -94,23 +97,85 @@ tl.from("#hero1, #page2",{
 }
 
 function cursorAnimation(){
-    //cursor move
- document.addEventListener("mousemove",function(dets){
-    gsap.to("#crsr",{
-        left:dets.x,
-        top:dets.y
+// // cursor move
+//  document.addEventListener("mousemove",function(dets){
+//     gsap.to("#crsr",{
+//         left:dets.x,
+//         top:dets.y
+//     })
+//  })
+
+// // magnet effect
+//  Shery.makeMagnet("#nav-part2 h4",{});
+
+Shery.mouseFollower({
+    //Parameters are optional.
+    // skew: true,
+    // ease: "cubic-bezier(0.23, 1, 0.320, 1)",
+    // duration: 1,
+  });
+
+  Shery.makeMagnet("#nav-part2 h4",{});
+
+ var video = document.querySelector("#video-container video");
+
+var videoContainer = document.querySelector("#video-container")
+videoContainer.addEventListener("mouseenter",function(){
+    videoContainer.addEventListener("mousemove",function(dets){
+        gsap.to(".mousefollower",{
+            opacity:0
+        })
+        gsap.to("#video-cursor",{
+            left:dets.x-500,
+            y:dets.y-200
+        })
     })
- })
-
+}) 
+videoContainer.addEventListener("mouseleave",function(){
+    gsap.to(".mousefollower",{
+        opacity:1
+    })
+    gsap.to("#video-cursor",{
+        left:"70%",
+        top:"-15%"
+    })
+})
 
- //magnet effect
- Shery.makeMagnet("#nav-part2 h4",{});
-}
 
-loadingAnimation();
-// cursorAnimation();
-locomotiveAnimation();
+var flag = 0
 
 
+ videoContainer.addEventListener("click",function(){
+    if(flag==0){
+    video.play()
+    video.style.opacity = 1
+    document.querySelector("#video-cursor").innerHTML = `<i class="ri-pause-mini-fill"></i>`
+    gsap.to("#video-cursor",{
+        scale:0.5
+    })
+    flag=1
+}else{
+    video.pause()
+    video.style.opacity = 0
+    document.querySelector("#video-cursor").innerHTML = `<i class="ri-play-mini-fill"></i>`
+    gsap.to("#video-cursor",{
+        scale:1
+    })
+    flag=0
+}
+ })
+}
 
+function sheryAnimation(){
+    Shery.imageEffect(".image-div",{
+        style: 5,
+        // debug: true,
+        config:{"a":{"value":2,"range":[0,30]},"b":{"value":0.25,"range":[-1,1]},"zindex":{"value":-9996999,"range":[-9999999,9999999]},"aspect":{"value":0.7241195864976497},"ignoreShapeAspect":{"value":true},"shapePosition":{"value":{"x":0,"y":0}},"shapeScale":{"value":{"x":0.5,"y":0.5}},"shapeEdgeSoftness":{"value":0,"range":[0,0.5]},"shapeRadius":{"value":0,"range":[0,2]},"currentScroll":{"value":0},"scrollLerp":{"value":0.07},"gooey":{"value":true},"infiniteGooey":{"value":false},"growSize":{"value":4,"range":[1,15]},"durationOut":{"value":1,"range":[0.1,5]},"durationIn":{"value":1.5,"range":[0.1,5]},"displaceAmount":{"value":0.5},"masker":{"value":true},"maskVal":{"value":1.09,"range":[1,5]},"scrollType":{"value":0},"geoVertex":{"range":[1,64],"value":1},"noEffectGooey":{"value":true},"onMouse":{"value":1},"noise_speed":{"value":0.2,"range":[0,10]},"metaball":{"value":0.56,"range":[0,2]},"discard_threshold":{"value":0.5,"range":[0,1]},"antialias_threshold":{"value":0,"range":[0,0.1]},"noise_height":{"value":0.5,"range":[0,2]},"noise_scale":{"value":10.69,"range":[0,100]}},
+        gooey: true,
+    });
+}
 
+loadingAnimation();
+cursorAnimation();
+locomotiveAnimation();
+sheryAnimation();