Add:Creative effect in cards

canopas · Sep 21, 2023 · 92187ee · 92187ee
1 parent 4ec1c01
commit 92187ee
Showing 1 changed file with 57 additions and 35 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/BlogSection.vue b/vue-frontend/src/components/ios-app-development/BlogSection.vue
@@ -6,44 +6,62 @@
       <span>Our Blogs</span>
     </div>
     <!-- Mobile UI start -->
-    <div
-      class="tw-mt-8 tw-block md:tw-hidden tw-relative tw-w-full tw-h-[370px]"
-    >
-      <div
-        class="card tw-absolute tw-h-full tw-top-0 tw-left-[20%] sm:tw-left-[30%] tw-flex tw-flex-row tw-items-center tw-justify-center"
+    <div class="tw-mt-8 tw-block md:tw-hidden">
+      <swiper
+        :grabCursor="true"
+        :effect="'creative'"
+        :creativeEffect="{
+          next: {
+            limitProgress: 1,
+            translate: [400, 0, 0],
+          },
+        }"
+        :breakpoints="{
+          '450': {
+            centeredSlides: true,
+          },
+        }"
+        :loop="false"
+        :slidesPerView="1.7"
+        :spaceBetween="40"
+        :modules="modules"
       >
-        <div
+        <swiper-slide
           v-for="(blog, index) in blogs"
           :key="index"
-          class="tw-w-80 tw-h-[299px] tw-drop-shadow-md tw-text-left tw-cursor-pointer"
-          :class="blog.className"
+          class="tw-mt-8 tw-ml-4 sm:tw-ml-0"
         >
-          <img
-            @click="openBlog(blog.link, 'tap_ios_blog_section')"
-            :src="blog.image"
-            :srcset="`${blog.image} 400w`"
-            :alt="blog.title"
-            class="tw-h-44 tw-w-80 tw-object-cover"
-            loading="lazy"
-          />
           <div
-            @click="openBlog(blog.link, 'tap_ios_blog_section')"
-            class="tw-w-80 tw-bg-white tw-h-28 tw-flex tw-flex-col tw-justify-center tw-px-8"
+            :class="blog.className"
+            class="tw-w-80 tw-h-[350px] tw-drop-shadow-md tw-text-left tw-cursor-pointer"
           >
-            <h2
-              class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-4%] tw-text-black-core/[0.87]"
+            <img
+              @click="openBlog(blog.link, 'tap_ios_blog_section')"
+              :src="blog.image"
+              :srcset="`${blog.image} 400w`"
+              :alt="blog.title"
+              class="tw-h-44 tw-w-80 tw-object-cover"
+              loading="lazy"
+            />
+            <div
+              @click="openBlog(blog.link, 'tap_ios_blog_section')"
+              class="tw-w-80 tw-bg-white tw-h-28 tw-flex tw-flex-col tw-justify-center tw-px-8"
             >
-              {{ blog.title }}
-            </h2>
+              <h2
+                class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-4%] tw-text-black-core/[0.87]"
+              >
+                {{ blog.title }}
+              </h2>
 
-            <span
-              class="tw-mt-2 tw-font-inter-regular tw-text-sm tw-tracking-[-0.72px] lg:tw-leading-[1.3125rem] v2-canopas-gradient-text"
-            >
-              {{ blog.readTime }}
-            </span>
+              <span
+                class="tw-mt-2 tw-font-inter-regular tw-text-sm tw-tracking-[-0.72px] lg:tw-leading-[1.3125rem] v2-canopas-gradient-text"
+              >
+                {{ blog.readTime }}
+              </span>
+            </div>
           </div>
-        </div>
-      </div>
+        </swiper-slide></swiper
+      >
     </div>
 
     <!-- Mobile UI End -->
@@ -110,7 +128,7 @@
 </template>
 
 <script>
-import { Autoplay } from "swiper/modules";
+import { EffectCreative, Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 
 import { openBlog } from "@/utils.js";
@@ -136,7 +154,7 @@ export default {
   data() {
     return {
       openBlog,
-      modules: [Autoplay],
+      modules: [EffectCreative, Autoplay],
 
       blogs: [
         {
@@ -152,31 +170,31 @@ export default {
           readTime: "8 min read",
           deskImage: [dektop_blog2_800w, dektop_blog2_1200w],
           link: "https://blog.canopas.com/swiftui-performance-tuning-tips-and-tricks-a8f9eeb23ec4",
-          className: "tw-animate-slideLeft ",
+          className: "-tw-rotate-6",
         },
         {
           title: "Designing Data Layer For Offline-first Apps",
           image: mobile_blog3_400w,
           readTime: "7 min read",
           deskImage: [dektop_blog3_800w, dektop_blog3_1200w],
           link: "https://blog.canopas.com/ios-designing-data-layer-for-offline-first-apps-f929c83bb195",
-          className: "tw-animate-slideLeftOdd !tw-delay-300",
+          className: "tw-rotate-6",
         },
         {
           title: "SwiftUI — Complex navigation made easier with UIPilot",
           image: mobile_blog4_400w,
           readTime: "5 min read",
           deskImage: [dektop_blog4_800w, dektop_blog4_1200w],
           link: "https://blog.canopas.com/swiftui-complex-navigation-made-easier-with-uipilot-5b33279f3476",
-          className: "tw-animate-slideLeft !tw-delay-500",
+          className: "-tw-rotate-6",
         },
         {
           title: "A Complete Guide to iOS App Auto Deployment with CI-CD",
           image: mobile_blog5_400w,
           readTime: "7 min read",
           deskImage: [dektop_blog5_800w, dektop_blog5_1200w],
           link: "https://blog.canopas.com/a-complete-guide-to-ios-app-auto-deployment-with-ci-cd-b5dc516ba41d",
-          className: "tw-animate-slideLeftOdd !tw-delay-700",
+          className: "tw-rotate-6",
         },
       ],
     };
@@ -196,4 +214,8 @@ export default {
 </script>
 <style lang="postcss" scoped>
 @import "swiper/css";
+@import "swiper/css/effect-creative";
+.swiper-slide {
+  @apply !tw-overflow-visible;
+}
 </style>