added opacity for item change

canopas · Nov 6, 2023 · 1b493cd · 1b493cd
1 parent 5e4ca9e
commit 1b493cd
Showing 1 changed file with 11 additions and 13 deletions.
diff --git a/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue b/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
@@ -13,7 +13,7 @@
       </span>
     </div>
     <!-- Flutter Mobile Swiper UI-->
-    <div class="swiper-content mt-6 lg: hidden">
+    <div class="swiper-content mt-6 lg:hidden">
       <swiper
         :slidesPerView="1"
         :centeredSlides="true"
@@ -61,19 +61,17 @@
     <!-- Flutter Desktop Swiper UI -->
     <div
       id="stickyParent"
-      class="hidden sticky-parent lg:block relative h-[200vh]"
+      class="hidden sticky-parent lg:block relative h-[250vh] xll:h-[200vh]"
     >
-      <div id="sticky" class="!sticky main top-0 h-[100vh] overflow-hidden">
+      <div id="sticky" class="!sticky main top-0 h-[85vh] xll:h-[65vh] 3xl:h-[40vh] overflow-hidden">
         <hr
-          class="absolute h-[235vh] left-[50%] border-[0.1px] opacity-[0.5]"
+          class="absolute h-[230vh] xl:h-[275vh] 2xl:h-[250vh] xll:h-[200vh] left-[50%] border-[0.1px] opacity-[0.5]"
         />
         <div
           v-for="(item, index) in items"
           :key="index"
-          class="mb-[4.5rem] container item"
-          :class="[{ active: index === activeIndex }]"
-          :id="'item-' + index"
-          :ref="index"
+          class="mb-[4.5rem] container item opacity-50" 
+          :class="{'!opacity-100':index === activeIndex}"  
         >
           <div
             :class="[
@@ -125,8 +123,7 @@ export default {
   data() {
     return {
       modules: [Autoplay, Mousewheel, Pagination],
-      activeSlide: 0,
-      slideHeight: 0,
+      activeIndex: 0,
       items: [
         {
           title: `Flutter App Development <br/>Consultation`,
@@ -181,13 +178,14 @@ export default {
         stickyParent.getBoundingClientRect().height -
         sticky.getBoundingClientRect().height;
       const stickyT = stickyParent.getBoundingClientRect();
-
+      const activeIndex = Math.floor(-stickyT.top / (stickyHeight/child.length));
+      
       if (stickyT.top > 0) {
         sticky.scrollTop = 0;
       } else {
+        this.activeIndex=activeIndex;
         sticky.scrollTop =
-          (stickyHeight / verticalScrollHeight) * -stickyT.top * 0.9;
-        console.log(sticky.scrollTop);
+          (stickyHeight / verticalScrollHeight) * - stickyT.top * 0.8;
       }
     },
   },