How to use Vue to implement scrolling parallax effects

How to use Vue to implement scrolling parallax effects

The Parallax Scrolling Effect is a method that uses elements that scroll at different speeds in a web page to create visual differences. technology. It can bring users a more vivid and dynamic browsing experience and enhance the visual appeal of web pages. In this article, we will introduce how to use Vue to implement scrolling parallax effects and provide specific code examples.

First, we need to create a Vue project. You can use the Vue CLI command line tool to quickly create a basic Vue project. Execute the following command in the terminal:

vue create parallax-effect

Then select the default configuration and wait for the project initialization to complete. Enter the project directory and start the development server:

cd parallax-effect
npm run serve

Now that we have a basic Vue project, we will create a scrolling parallax component. Create a file named ParallaxEffect.vue in the src/components directory, and write the following code in the file:

<template>
  <div class="parallax-container">
    <div class="parallax-layer" :style="{ transform: 'translateY(' + scrollY * 0.5 + 'px' }">
      <img src="/static/imghw/default1.png"  data-src="layer1.png"  class="lazy" alt="Layer 1">
    </div>
    <div class="parallax-layer" :style="{ transform: 'translateY(' + scrollY * 0.3 + 'px' }">
      <img src="/static/imghw/default1.png"  data-src="layer2.png"  class="lazy" alt="Layer 2">
    </div>
    <div class="parallax-layer" :style="{ transform: 'translateY(' + scrollY * 0.2 + 'px' }">
      <img src="/static/imghw/default1.png"  data-src="layer3.png"  class="lazy" alt="Layer 3">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollY: 0
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY;
    }
  }
};
</script>

<style scoped>
.parallax-container {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.parallax-layer img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.parallax-layer:nth-child(2) {
  bottom: 20%;
}

.parallax-layer:nth-child(3) {
  bottom: 40%;
}
</style>

In the above code, we created a parallax-container container, which contains Three parallax-layers, each using a different speed to achieve scrolling parallax. We use Vue's responsive data scrollY to listen to the scroll event of the window and update the position of the layer based on the scroll position.

In order to make the effect of scrolling parallax more obvious, we set different bottom attributes for different layers to achieve different overlay effects.

Finally, we need to use this component in App.vue. Append the following code to the template section in App.vue:

<template>
  <div id="app">
    <ParallaxEffect />
  </div>
</template>

Now restart the development server and you will see a web page with scrolling parallax effects.

I hope this article can help you understand how to use Vue to implement scrolling parallax effects. Of course, you can also adjust the code according to your own needs to achieve more complex and unique scrolling parallax effects. Happy programming!

The above is the detailed content of How to use Vue to implement scrolling parallax effects. For more information, please follow other related articles on the PHP Chinese website!