Skip to content

Commit

Permalink
Add swiper and animation on text
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-priyanka-g
cp-priyanka-g committed Oct 5, 2023
1 parent b151ea6 commit b0bd963
Showing 1 changed file with 89 additions and 58 deletions.
147 changes: 89 additions & 58 deletions vue-frontend/src/components/ios-app-development/CaseStudySection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,73 +69,100 @@
</div>
<!-- Mobile UI END-->
<!-- Desktop UI -->
<div
class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] tw-mt-20"
v-for="(portfolio, index) in portfolios"
:key="index"
<swiper
:slidesPerView="1"
:centeredSlides="true"
:spaceBetween="0"
:effect="'fade'"
:autoplay="{
delay: 2000,
disableOnInteraction: false,
}"
:speed="2000"
:loop="true"
:modules="modules"
class="swiper-container tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] tw-mt-20"
>
<div
:class="portfolio.row1Background"
class="tw-flex tw-flex-col tw-justify-center !tw-basis-[40%] tw-justify-around tw-px-8"
<swiper-slide
v-for="(portfolio, index) in portfolios"
:key="index"
class="tw-cursor-pointer"
>
<div class="tw-flex tw-justify-end tw-relative">
<h2
:class="portfolio.row1Background"
class="tw-absolute tw-top-[2rem] tw-right-[-30%] lg:tw-right-[-25%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
>
{{ portfolio.title }}
</h2>
</div>
<div
class="tw-w-[17rem] lg:tw-w-[19rem] xl:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-44 xl:tw-mt-72"
class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px]"
>
<h2
class="tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem]"
>
{{ portfolio.desktopDescription }}
</h2>
<span
class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
>{{ portfolio.subDescription }}</span
>
</div>
<div class="tw-flex tw-justify-end tw-pr-[8%] 2xll:tw-pr-[14%]">
<span
class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
>SKIP</span
<div
:class="portfolio.row1Background"
class="tw-flex tw-flex-col tw-justify-center !tw-basis-[40%] tw-justify-around tw-px-8"
>
</div>
</div>
<div class="tw-flex tw-justify-end tw-relative">
<div
:class="portfolio.row1Background"
class="tw-absolute tw-top-[2rem] lg:tw-top-[1rem] xl:tw-top-[2rem] tw-right-[-30%] lg:tw-right-[-25%] xl:tw-right-[-20%] 2xll:tw-right-[-18%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
>
<h2
class="animate__animated animate__fadeInUp tw-duration-1000"
>
{{ portfolio.title }}
</h2>
</div>
</div>
<div
class="tw-w-[17rem] lg:tw-w-[19rem] xl:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-44 xl:tw-mt-72 animate__animated animate__fadeInUp tw-duration-1000"
>
<h2
class="tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem]"
>
{{ portfolio.desktopDescription }}
</h2>
<span
class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
>{{ portfolio.subDescription }}</span
>
</div>
<div class="tw-flex tw-justify-end tw-pr-[8%] 2xll:tw-pr-[14%]">
<span
class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
>SKIP</span
>
</div>
</div>

<div
class="tw-flex tw-flex-row !tw-basis-[60%] tw-p-8 lg:tw-p-12"
:class="portfolio.row2Background"
>
<div class="tw-basis-[50%] tw-flex tw-items-end tw-justify-end">
<img
:src="portfolio.image[2]"
:srcset="`${portfolio.image[2]} 800w`"
:alt="portfolio.title"
class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
loading="lazy"
/>
</div>
<div class="tw-flex tw-flex-col tw-basis-[50%]">
<img
:src="portfolio.image[3]"
:srcset="`${portfolio.image[3]} 800w`"
:alt="portfolio.title"
class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
loading="lazy"
/>
<div
class="tw-flex tw-flex-row !tw-basis-[60%] tw-p-8 lg:tw-p-12 2xll:tw-p-20 tw-bg-white"
:class="portfolio.row2Background"
>
<div
class="tw-basis-[50%] tw-flex tw-items-end tw-justify-end animate__animated animate__fadeInUp tw-duration-1000"
>
<img
:src="portfolio.image[2]"
:srcset="`${portfolio.image[2]} 800w`"
:alt="portfolio.title"
class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
loading="lazy"
/>
</div>
<div
class="tw-flex tw-flex-col tw-basis-[50%] animate__animated animate__fadeInUp tw-duration-1000"
>
<img
:src="portfolio.image[3]"
:srcset="`${portfolio.image[3]} 800w`"
:alt="portfolio.title"
class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
loading="lazy"
/>
</div>
</div>
</div>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</template>

<script type="module">
import { Autoplay } from "swiper/modules";
import { Autoplay, EffectFade } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import mobile_justly1 from "@/assets/images/ios-app-development/casestudy/mobile/justly1.webp";
import mobile_justly2 from "@/assets/images/ios-app-development/casestudy/mobile/justly2.webp";
Expand All @@ -154,7 +181,7 @@ import desktop_togness2 from "@/assets/images/ios-app-development/casestudy/togn
export default {
data() {
return {
modules: [Autoplay],
modules: [Autoplay, EffectFade],
activeIndex: 0,
swiperRef: 0,
portfolios: [
Expand Down Expand Up @@ -234,6 +261,10 @@ export default {
},
};
</script>
<style lang="postcss">
<style lang="postcss" scoped>
@import "swiper/css";
@import "swiper/css/effect-fade";
.swiper-container {
@apply tw-mx-0;
}
</style>

0 comments on commit b0bd963

Please sign in to comment.