How to realize 3D switching scrolling effect with vue
This article introduces the relevant knowledge of "how to achieve 3D switching scrolling effect in vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
This is the final effect, click on the left and right arrows to achieve the scrolling effect, but only simple scrolling, no animation and so on
The idea of realization is:
In css, normally write a div and use display:flex to tile the picture
Then position a box in the middle, the size of the box is larger than the outside, and just take one of the middle pictures in the list.
In js, use the v-for loop list
When you click on the right, delete the first picture in the circular list, then add it to the last one in the list, and click on the left side of the list. In this way, you can easily achieve a seamless loop effect.
The most important point is, because when the trapezoid is in the middle, either let UI give a box, and the front end is set beyond the hidden attribute to achieve the trapezoid effect, or you can call up a polygon with the css attribute of polygon.
Paste the code and have a look
/ / html//
{{this.imgList [1] .text}} / / jsdata () {return {imgList: [{img: 'activity-01', text:' 2020 title Promotion campaign',}, {img: 'activity-02' Text: '2020 title promotion campaign 1,}, {img:' activity-03', text: '2020 title promotion campaign 2, 2,} methdos: {/ / Click on the left side of previous () {const direction =' left' This.scrollImg (direction);}, / / Click on the right side next () {const direction = 'right'; this.scrollImg (direction);}, / / process scrolling list picture scrollImg (direction) {if (direction =' left') {const first = this.imgList.shift (); this.imgList.push (first) } else {const last = this.imgList.pop (); this.imgList.unshift (last);} console.log ();},}, / css key code / / draw polygons / / these attributes rotate clip-path counterclockwise: polygon (4%, 1% 90%, 95% 90%, 92%)
This is the end of the content of "how to achieve 3D switching scrolling effect in vue". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
