{"id":35481,"date":"2024-10-31T08:06:31","date_gmt":"2024-10-31T07:06:31","guid":{"rendered":"https:\/\/www.dbi-services.com\/blog\/?p=35481"},"modified":"2024-10-31T08:18:11","modified_gmt":"2024-10-31T07:18:11","slug":"vue-creating-an-awesome-parallax-effect-with-swiper","status":"publish","type":"post","link":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/","title":{"rendered":"Vue – Creating an Awesome Parallax Effect with Swiper"},"content":{"rendered":"\n

Adding a parallax effect to your website brings a smooth, professional feel, making it more interactive and visually appealing. With Swiper<\/strong> for Vue, you can easily implement parallax effects for a slideshow. In this guide, we\u2019ll create a parallax effect using Vue 3 and explore additional features to enhance this effect.<\/p>\n\n\n\n

I. Create a New Vue 3 Project<\/h2>\n\n\n\n

Let’s start from scratch to create a Vue 3 app and set up Swiper<\/strong> to create a parallax slider. Here\u2019s a step-by-step guide to set up the environment and build an awesome parallax effect.<\/p>\n\n\n

\nblogger@PC MINGW64 ~\/Documents\/Blogs\/parallax-vue-awesome\n$ npm init vue@latest my-parallax-app\nNeed to install the following packages:\n  create-vue@3.11.2\nOk to proceed? (y) y\n\nVue.js - The Progressive JavaScript Framework\n\n\u221a Add TypeScript? ... No \/ Yes\n\u221a Add JSX Support? ... No \/ Yes\n\u221a Add Vue Router for Single Page Application development? ... No \/ Yes\n\u221a Add Pinia for state management? ... No \/ Yes\n\u221a Add Vitest for Unit Testing? ... No \/ Yes\n\u221a Add an End-to-End Testing Solution? \u00bb No\n\u221a Add ESLint for code quality? ... No \/ Yes\n\u221a Add Prettier for code formatting? ... No \/ Yes\n\u221a Add Vue DevTools 7 extension for debugging? (experimental) ... No \/ Yes\n\nScaffolding project in C:\\Users\\blogger\\Documents\\Blogs\\parallax-vue-awesome\\my-parallax-app...\n\nDone. Now run:\n\n  cd my-parallax-app\n  npm install\n  npm run format\n  npm run dev\n<\/pre><\/div>\n\n\n
II. Install Vue Swiper<\/h2>\n\n\n\n
Next, install Swiper<\/strong>:<\/p>\n\n\n
\nnpm install swiper\n<\/pre><\/div>\n\n\n
III. Set Up the Project Structure<\/h2>\n\n\n\n
Inside the project, let\u2019s create a new component for our parallax slider. We\u2019ll place this in the components<\/code> folder for organization.<\/p>\n\n\n\n
Create a file named AwesomeParallax.vue<\/code> in the src\/components<\/code> folder:<\/p>\n\n\n
\nsrc\n\u2514\u2500\u2500 components\n    \u2514\u2500\u2500 ParallaxSlider.vue\n<\/pre><\/div>\n\n\n
I also added the pictures that I’ll be using for the Parallax into the assets<\/code> directory (Pictures are mine \ud83d\udcf7). In the end, you should have at least the following structure:<\/p>\n\n\n
\nsrc\n\u251c\u2500\u2500 assets\n\u2502   \u251c\u2500\u2500 parallax1.jpg\n\u251c\u2500\u2500 components\n\u2502   \u2514\u2500\u2500 AwesomeParallax.vue\n\u251c\u2500\u2500 views\n\u2502   \u2514\u2500\u2500 HomeView.vue\n\u2514\u2500\u2500 App.vue\n<\/pre><\/div>\n\n\n
IV. Create the Parallax Slider Component<\/h2>\n\n\n\n
Add the following code to AwesomeParallax.vue<\/code>. This component will import the required Swiper modules for navigation, pagination, and the parallax effect. You can find the official documentation from Swiper here: https:\/\/swiperjs.com\/demos#parallax<\/a>.<\/p>\n\n\n
\n<template>\n  <swiper\n    :style="{\n      '--swiper-navigation-color': '#fff',\n      '--swiper-pagination-color': '#fff',\n    }"\n    :speed="600"\n    :parallax="true"\n    :pagination="{\n      clickable: true,\n    }"\n    :navigation="true"\n    :modules="modules"\n    class="mySwiper"\n    data-swiper-parallax-x\n  >\n    <template v-slot:container-start>\n      <div class="parallax-bg" data-swiper-parallax="-23%"><\/div>\n    <\/template>\n    <swiper-slide>\n      <div class="title" data-swiper-parallax="-300">Slide 1<\/div>\n      <div class="subtitle" data-swiper-parallax="-200">Subtitle<\/div>\n      <div class="text" data-swiper-parallax="-100">\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam\n          dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla\n          laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.\n          Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.\n          Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper\n          velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut\n          libero. Aenean feugiat non eros quis feugiat.\n        <\/p>\n      <\/div> <\/swiper-slide\n    ><swiper-slide>\n      <div class="title" data-swiper-parallax="-300">Slide 2<\/div>\n      <div class="subtitle" data-swiper-parallax="-200">Subtitle<\/div>\n      <div class="text" data-swiper-parallax="-100">\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam\n          dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla\n          laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.\n          Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.\n          Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper\n          velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut\n          libero. Aenean feugiat non eros quis feugiat.\n        <\/p>\n      <\/div> <\/swiper-slide\n    ><swiper-slide>\n      <div class="title" data-swiper-parallax="-300">Slide 3<\/div>\n      <div class="subtitle" data-swiper-parallax="-200">Subtitle<\/div>\n      <div class="text" data-swiper-parallax="-100">\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam\n          dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla\n          laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.\n          Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.\n          Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper\n          velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut\n          libero. Aenean feugiat non eros quis feugiat.\n        <\/p>\n      <\/div>\n    <\/swiper-slide>\n  <\/swiper>\n<\/template>\n<script lang="ts">\n\/\/ Import Swiper Vue.js components\nimport { Swiper, SwiperSlide } from 'swiper\/vue'\n\n\/\/ Import Swiper styles\nimport 'swiper\/css'\n\nimport 'swiper\/css\/pagination'\nimport 'swiper\/css\/navigation'\n\n\/\/ import required modules\nimport { Parallax, Pagination, Navigation } from 'swiper\/modules'\n\nexport default {\n  components: {\n    Swiper,\n    SwiperSlide,\n  },\n  setup() {\n    return {\n      modules: [Parallax, Pagination, Navigation],\n    }\n  },\n}\n<\/script>\n\n<style>\n#app {\n  height: 100%;\n  display: contents;\n}\nhtml,\nbody {\n  position: relative;\n  height: 100%;\n}\n\nbody {\n  background: #eee;\n  font-family:\n    Helvetica Neue,\n    Helvetica,\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  color: #000;\n  margin: 0;\n  padding: 0;\n}\n\n.swiper {\n  width: 100%;\n  height: 100%;\n  background: #000;\n}\n\n.swiper-slide {\n  font-size: 18px;\n  color: #fff;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 40px 60px;\n}\n\n.parallax-bg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 130%;\n  height: 100%;\n  -webkit-background-size: cover;\n  background-size: cover;\n  background-position: center;\n  background-image: url('..\/assets\/parallax1.jpg');\n}\n\n.swiper-slide .title {\n  font-size: 41px;\n  font-weight: 300;\n}\n\n.swiper-slide .subtitle {\n  font-size: 21px;\n}\n\n.swiper-slide .text {\n  font-size: 14px;\n  max-width: 400px;\n  line-height: 1.3;\n}\n<\/style>\n<\/pre><\/div>\n\n\n
To achieve a full-screen parallax effect, I used display: contents;<\/code> on the #app<\/code> element. This allows the background to stretch across the viewport without being constrained by the parent element’s dimensions.<\/p>\n\n\n\n
However, setting the .parallax-bg<\/code> width to 130%<\/code> can cause height issues, as the image might not scale proportionately, leading to excess height. Still, this is needed to achieve the parallax effect in our case, so it means that you need to choose your background image knowing that it is going to be cropped.<\/p>\n\n\n\n
V. Use the Component in HomeView.vue<\/h2>\n\n\n\n
Now that we\u2019ve created the AwesomeParallax<\/code> component, we can add it to HomeView.vue<\/code> to display it on the main page.<\/p>\n\n\n\n
Open src\/HomeView.vue<\/code> and replace its content with the following:<\/p>\n\n\n
\n<template>\n    <AwesomeParallax \/>\n<\/template>\n\n<script setup lang="ts">\nimport AwesomeParallax from '@\/components\/AwesomeParallax.vue'\n<\/script>\n<\/pre><\/div>\n\n\n
Then open src\/App.vue<\/code> and replace its content with the following:<\/p>\n\n\n
\n<template>\n  <HomeView \/>\n<\/template>\n\n<script setup lang="ts">\nimport HomeView from '@\/views\/HomeView.vue'\n<\/script>\n<\/pre><\/div>\n\n\n
VI. Run the application<\/h2>\n\n\n\n
With everything in place, you can start the development server to see the parallax effect in action:<\/p>\n\n\n
\nnpm run dev\n<\/pre><\/div>\n\n\n
Navigate to http:\/\/localhost:3000<\/code> in your browser to see your parallax slider. You should see a smoothly animated slider with a parallax background and Swiper’s navigation and pagination controls.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
VII. Enhancing the Parallax Effect<\/h2>\n\n\n\n
Now that you have a working parallax slider, you can experiment with additional features, such as:<\/p>\n\n\n\n
    \n
  • Slide Transition Duration<\/strong>: Customize the transition duration for smoother animations by editing the :speed<\/code> prop adjustments on the swiper<\/code> component.<\/li>\n\n\n\n
  • Center the text<\/strong>: To center the text, title, and subtitle in the middle of your screen, you can use flexbox properties on the .swiper-slide<\/code> elements. Here\u2019s how you can adjust your CSS:<\/li>\n<\/ul>\n\n\n
    \n.swiper-slide {\n  font-size: 18px;\n  color: #fff;\n  box-sizing: border-box;\n  padding: 40px 60px;\n  \n  \/* Flexbox properties for centering *\/\n  display: flex;\n  flex-direction: column; \/* Stack elements vertically *\/\n  justify-content: center; \/* Center vertically *\/\n  align-items: center; \/* Center horizontally *\/\n}\n\n.swiper-slide .title {\n  font-size: 41px;\n  font-weight: 300;\n  text-align: center; \/* Center text *\/\n}\n\n.swiper-slide .subtitle {\n  font-size: 21px;\n  text-align: center; \/* Center text *\/\n}\n\n.swiper-slide .text {\n  font-size: 14px;\n  max-width: 400px;\n  line-height: 1.3;\n  text-align: center; \/* Center text *\/\n}\n<\/pre><\/div>\n\n\n
    \"\"<\/figure>\n\n\n\n
      \n
    • Adding Image Gradients<\/strong>: Layering gradients over the background images to create depth. To apply a gradient overlay on top of your background image while keeping the image itself, you can modify the .parallax-bg<\/code> class to use both the background image and the gradient. Here’s how you can do it:<\/li>\n<\/ul>\n\n\n
      \n.parallax-bg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 130%;\n  height: 100%;\n  background-image:\n    linear-gradient(to right, rgba(255, 128, 0, 0.3), rgba(0, 0, 0, 0.9)),\n    \/* Gradient overlay *\/ url('..\/assets\/parallax1.jpg'); \/* Background image *\/\n  background-size: cover;\n  background-position: center;\n}\n<\/pre><\/div>\n\n\n
      \"\"<\/figure>\n\n\n\n
        \n
      • Vertical parallax<\/strong>: Add the props :direction=\"'vertical'\"<\/code> to create a vertical parallax. In this case, don’t forget to edit the class parallax-bg to adjust the height and width property as needed:
        <\/li>\n<\/ul>\n\n\n
        \n<swiper\n    :style="{\n      '--swiper-navigation-color': '#fff',\n      '--swiper-pagination-color': '#fff',\n    }"\n    :speed="600"\n    :parallax="true"\n    :pagination="{\n      clickable: true,\n    }"\n    :navigation="true"\n    :modules="modules"\n    :direction="'vertical'"\n    class="mySwiper"\n    data-swiper-parallax-x\n  >\n\n.parallax-bg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 130%;\n  background-image:\n    linear-gradient(to right, rgba(255, 128, 0, 0.3), rgba(0, 0, 0, 0.9)),\n    \/* Gradient overlay *\/ url('..\/assets\/parallax1.jpg'); \/* Background image *\/\n  background-size: cover;\n  background-position: center;\n}\n<\/pre><\/div>\n\n\n
        \"\"<\/figure>\n\n\n\n
        Conclusion<\/h2>\n\n\n\n
        This guide demonstrated how to set up a Vue 3 application with a parallax effect, creating visually engaging user experiences. You can further enhance the parallax by adjusting animation speeds, or even incorporating dynamic slide content. This setup is highly flexible for building beautiful, interactive sliders in Vue apps. Don’t forget to check Swiper API to learn more about what is doable with this component.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Adding a parallax effect to your website brings a smooth, professional feel, making it more interactive and visually appealing. With Swiper for Vue, you can easily implement parallax effects for a slideshow. In this guide, we\u2019ll create a parallax effect using Vue 3 and explore additional features to enhance this effect. I. Create a New […]<\/p>\n","protected":false},"author":87,"featured_media":35550,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3029],"tags":[3034,3451,3035,3358],"type_dbi":[3039],"class_list":["post-35481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-vue","tag-vue-awesome-swiper","tag-vuejs","tag-vuetify","type-vue"],"acf":[],"yoast_head":"\nVue - Creating an Awesome Parallax Effect with Swiper - dbi Blog<\/title>\n<meta name=\"description\" content=\"Learn to add a captivating parallax effect to your Vue 3 website using Swiper. This guide covers setup, component creation, and styling.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue - Creating an Awesome Parallax Effect with Swiper\" \/>\n<meta property=\"og:description\" content=\"Learn to add a captivating parallax effect to your Vue 3 website using Swiper. This guide covers setup, component creation, and styling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/\" \/>\n<meta property=\"og:site_name\" content=\"dbi Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-31T07:06:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-31T07:18:11+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"944\" \/>\n\t<meta property=\"og:image:height\" content=\"461\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joan Frey\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joan Frey\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/\"},\"author\":{\"name\":\"Joan Frey\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\"},\"headline\":\"Vue – Creating an Awesome Parallax Effect with Swiper\",\"datePublished\":\"2024-10-31T07:06:31+00:00\",\"dateModified\":\"2024-10-31T07:18:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/\"},\"wordCount\":603,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png\",\"keywords\":[\"vue\",\"vue-awesome-swiper\",\"vuejs\",\"vuetify\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/\",\"name\":\"Vue - Creating an Awesome Parallax Effect with Swiper - dbi Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png\",\"datePublished\":\"2024-10-31T07:06:31+00:00\",\"dateModified\":\"2024-10-31T07:18:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\"},\"description\":\"Learn to add a captivating parallax effect to your Vue 3 website using Swiper. This guide covers setup, component creation, and styling.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#primaryimage\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png\",\"contentUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png\",\"width\":944,\"height\":461,\"caption\":\"vuejs swiper\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.dbi-services.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue – Creating an Awesome Parallax Effect with Swiper\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/\",\"name\":\"dbi Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\",\"name\":\"Joan Frey\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"caption\":\"Joan Frey\"},\"url\":\"https:\/\/www.dbi-services.com\/blog\/author\/joanfrey\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue - Creating an Awesome Parallax Effect with Swiper - dbi Blog","description":"Learn to add a captivating parallax effect to your Vue 3 website using Swiper. This guide covers setup, component creation, and styling.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/","og_locale":"en_US","og_type":"article","og_title":"Vue - Creating an Awesome Parallax Effect with Swiper","og_description":"Learn to add a captivating parallax effect to your Vue 3 website using Swiper. This guide covers setup, component creation, and styling.","og_url":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/","og_site_name":"dbi Blog","article_published_time":"2024-10-31T07:06:31+00:00","article_modified_time":"2024-10-31T07:18:11+00:00","og_image":[{"width":944,"height":461,"url":"http:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png","type":"image\/png"}],"author":"Joan Frey","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Joan Frey","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#article","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/"},"author":{"name":"Joan Frey","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"headline":"Vue – Creating an Awesome Parallax Effect with Swiper","datePublished":"2024-10-31T07:06:31+00:00","dateModified":"2024-10-31T07:18:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/"},"wordCount":603,"commentCount":0,"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png","keywords":["vue","vue-awesome-swiper","vuejs","vuetify"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/","url":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/","name":"Vue - Creating an Awesome Parallax Effect with Swiper - dbi Blog","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#primaryimage"},"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png","datePublished":"2024-10-31T07:06:31+00:00","dateModified":"2024-10-31T07:18:11+00:00","author":{"@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"description":"Learn to add a captivating parallax effect to your Vue 3 website using Swiper. This guide covers setup, component creation, and styling.","breadcrumb":{"@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#primaryimage","url":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png","contentUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/2024-10-31-08_12_20-dbi-Blog.png","width":944,"height":461,"caption":"vuejs swiper"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dbi-services.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue – Creating an Awesome Parallax Effect with Swiper"}]},{"@type":"WebSite","@id":"https:\/\/www.dbi-services.com\/blog\/#website","url":"https:\/\/www.dbi-services.com\/blog\/","name":"dbi Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06","name":"Joan Frey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","caption":"Joan Frey"},"url":"https:\/\/www.dbi-services.com\/blog\/author\/joanfrey\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/35481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/comments?post=35481"}],"version-history":[{"count":41,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/35481\/revisions"}],"predecessor-version":[{"id":35549,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/35481\/revisions\/35549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media\/35550"}],"wp:attachment":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media?parent=35481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/categories?post=35481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/tags?post=35481"},{"taxonomy":"type","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/type_dbi?post=35481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}