How to achieve image vibration and water wave effects in Vue?

How to achieve the vibration and water wave effects of pictures in Vue?

As a popular front-end framework, Vue provides a wealth of components and plug-ins to enhance the interactive experience of the user interface. This article will introduce how to use Vue to achieve vibration and water wave effects on images, and is accompanied by corresponding sample code.

1. Vibration effect
   The vibration effect of the picture can be used to attract the user's attention or create a dynamic feeling. The following is a simple implementation plan:

First, define a data attribute in the Vue component to save the coordinate position of the image:

data() {
  return {
    left: 0,
    top: 0,
  }
},

Then, use it in the template The v-bind command applies the coordinate position to the style of the picture:

<template>
  <div>
    <img  src="your_image_path" :  style="max-width:90%"px', top: top + 'px' }" alt="How to achieve image vibration and water wave effects in Vue?" >
  </div>
</template>

Next, the coordinate position of the picture is continuously updated through the timer to achieve the vibration effect:

mounted() {
  setInterval(() => {
    this.left = Math.random() * 10 - 5;
    this.top = Math.random() * 10 - 5;
  }, 100);
},

In this way, the picture will vibrate randomly every 100 milliseconds.

2. Water wave effect
   The water wave effect can create an effect similar to water surface fluctuations, adding a sense of vividness to the picture. The following is a simple implementation plan:

First, introduce the vue-ripple-directive plug-in in the Vue component:

import VWave from 'vue-ripple-directive'

Then, in Vue directivePartially register the plug-in:

directives: {
  wave: VWave,
},

Next, use custom directives in the template to achieve the water wave effect:

<template>
  <div>
    <img  src="your_image_path" v-wave alt="How to achieve image vibration and water wave effects in Vue?" >
  </div>
</template>

Finally, set the water wave effect through CSS styles Details:

[v-ripple]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(100, 100, 100, 0.3);
  animation: ripple 1s linear infinite;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

In this way, the water wave effect will be added to the picture and it will play in a loop.

Summary:
This article introduces how to use Vue to achieve the vibration and water wave effects of images, and provides corresponding sample code. By using Vue's data binding and custom instructions, we can easily achieve these effects and bring users a richer interactive experience.

The above is the detailed content of How to achieve image vibration and water wave effects in Vue?. For more information, please follow other related articles on the PHP Chinese website!