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.
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.
First, introduce the vue-ripple-directive
plug-in in the Vue component:
import VWave from 'vue-ripple-directive'
Then, in Vue directive
Partially 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!