Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to achieve picture scattered effect based on Vue3". In daily operation, I believe many people have doubts about how to achieve picture scattered effect based on Vue3. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "how to achieve picture scattered effect based on Vue3". Next, please follow the editor to study!

Effect picture

Principle

To put it bluntly, the effect of picture rupture is to make 100 div, each div has its own background picture, through the backgroundPosition attribute to control the background picture orientation of each div, and finally put it together, just like a complete picture, add animation to each div, and each div has different rotation angles, different moving distances, and different moving orientations to make the whole picture scattered like glass.

HTML structure

Here, two div,#break are used as containers for 100 div, and # InBox is used to bind the next background image.

Prepare 5 pictures import bgImg5 from'.. /.. / assets/img/1/y1.png'import bgImg4 from'.. /.. / assets/img/1/y2.png'import bgImg3 from'.. /.. / assets/img/1/y3.png'import bgImg2 from'.. /.. / assets/img/1/y4.png'import bgImg6 from'.. /.. / assets/img/1/y5.png'import {ref, onMounted OnUnmounted} from 'vue'let index = 0onMounted (() = > {let imageSrcArr = [bgImg2, bgImg3, bgImg4, bgImg5, bgImg6] let imgloadPromiseArr: Array = [] let imageArr: Array = [] for (let I = 0) I

< imageSrcArr.length; i++) { imgloadPromiseArr[i] = new Promise((resolve, reject) =>

{let img = new Image () img.src = imageSrcArr [I] img.onload = () = > {resolve (img)}})} imgloadPromiseArr.forEach (item = > {item.then (res = > {imageArr.push (`url (${(res) .currentSrc} `) index = imageArr.length}) create div

Create 200 div through createElement, each div binding length and width, add a background image to the div, use backgroundPosition to make the whole div look like a picture, and bind animation to the div.

For (let I = 0; I

< 100; i++) { let div = document.createElement('div') let div1 = document.createElement('div') div.style.width = '76px' div.style.height = '41px' // 这里为什么是41px后面会提到 div1.style.width = '76px' div1.style.height = '40px' div1.style.overflow = 'hidden' div.style.boxSizing = 'border-box' div.style.backgroundImage = imageArr[0] let positionX = -(i % 10) * 76 + 'px' let positionY = -Math.floor(i / 10) * 40 + 'px' div.style.backgroundPosition = positionX + ' ' + positionY div.style.backgroundSize = '760px 400px' let style = document.styleSheets[0] style.insertRule(`@keyframes secondrotate${i} { 0%,30%{ transform:scale(1) } 70% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} 100% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} }`) style.insertRule(`@keyframes secondrotateS${i} { 0%,32%{ transform:scale(1);opacity:1; }70% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} 100% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} }`) div1.style.animation = `secondrotateS${i} 4.5s ease-out infinite` div.style.animation = `secondrotate${i} 4.5s ease-out infinite` div.style.transformOrigin = `center center` div1.appendChild(div) dom.appendChild(div1)}切换背景图片 通过zIndex来让当前展示的div是哪一个 前面说过，InBox是展示的下一张图片，在breakBox散落完成之后，让breakBox的zIndex降低，展示出下一张图片，随后带有100个div的breakBox完成下一张图片的渲染，zIndex提高，展示出来 let count = 0 let repeat = true let breakBox: HTMLDivElement = document.querySelector('#break')! let InBox: HTMLDivElement = document.querySelector('#InBox')! function changeImage(InBox: HTMLDivElement) { if (repeat) { breakBox.style.zIndex = '-10' count++ count = count === index ? 0 : count repeat = false setTimeout(() =>

{repeat = true breakBox.style.zIndex = '100' let currentImageLength = count = = index-1? 0: count + 1 InBox.style.backgroundImage = imageArr [currentImageLength]}, 1000)}}

The above method is adjusted after each animation is completed. In order to show the next image after the div fragment is broken, a timer is used to delay the processing of this method for 4s because the div fragment disappears completely after 4s. (when the animation is running at 70%, the transparency is 0)

Const timer1 = ref () const timer2 = ref () for (let I = 0; I

< 100; i++) { let div = document.createElement('div') let div1 = document.createElement('div') div.style.width = '76px' div.style.height = '41px' div1.style.width = '76px' div1.style.height = '40px' div1.style.overflow = 'hidden' div.style.boxSizing = 'border-box' div.style.backgroundImage = imageArr[0] let positionX = -(i % 10) * 76 + 'px' let positionY = -Math.floor(i / 10) * 40 + 'px' div.style.backgroundPosition = positionX + ' ' + positionY div.style.backgroundSize = '760px 400px' let style = document.styleSheets[0] style.insertRule(`@keyframes secondrotate${i} { 0%,30%{ transform:scale(1) } 70% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} 100% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} }`) style.insertRule(`@keyframes secondrotateS${i} { 0%,32%{ transform:scale(1);opacity:1; }70% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} 100% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} }`) div1.style.animation = `secondrotateS${i} 4.5s ease-out infinite` div.style.animation = `secondrotate${i} 4.5s ease-out infinite` div.style.transformOrigin = `center center` div.addEventListener('animationstart', () =>

{timer1.value = setTimeout (() = > {changeImage (InBox) div.style.backgroundImage = imageArr [count]}, 4000)}) div.addEventListener ('animationiteration', () = > {timer2.value = setTimeout (() = > {changeImage (InBox) div.style.backgroundImage = imageArr [count]}) 4000)}) div1.appendChild (div) dom.appendChild (div1)} div has gap problem

After 100 div shows, such a line will appear. After many attempts, we have found a way to make the height of the div larger, and the div1 set overflow:hidden; line to disappear.

Code details import bgImg5 from'.. /.. / assets/img/1/y1.png'import bgImg4 from'.. /.. / assets/img/1/y2.png'import bgImg3 from'.. /.. / assets/img/1/y3.png'import bgImg2 from'.. /.. / assets/img/1/y4.png'import bgImg6 from'.. /.. / assets/img/1/y5.png'import {ref, onMounted OnUnmounted} from 'vue'const timer1 = ref () const timer2 = ref () const showImg = ref (false) onMounted (() = > {let imageSrcArr = [bgImg2, bgImg3, bgImg4, bgImg5, bgImg6] let imgloadPromiseArr: Array = [] let imageArr: Array = [] for (let I = 0 I

< imageSrcArr.length; i++) { imgloadPromiseArr[i] = new Promise((resolve, reject) =>

{let img = new Image () img.src = imageSrcArr [I] img.onload = () = > {resolve (img)}})} imgloadPromiseArr.forEach (item = > {item.then (res = > {imageArr.push (`url (${(res) .currentSrc} `) index = imageArr.length})}) showImg.value = true let repeat = true function changeImage (InBox: HTMLDivElement) {if (repeat) {breakBox.style.zIndex ='- 10' count++ count = count = index? 0: count repeat = false setTimeout (() = > {repeat = true breakBox.style.zIndex = '100' let currentImageLength = count = index-1? 0: count+ 1 InBox.style.backgroundImage = imageArr [currentImageLength]} 1000)} let count = 0 let index = 0 let breakBox: HTMLDivElement = document.querySelector ('# break')! Let InBox: HTMLDivElement = document.querySelector ('# InBox')! InBox.style.backgroundImage = imageArr [1] const appendDom = (dom: HTMLElement) = > {for (let I = 0; I)

< 100; i++) { let div = document.createElement('div') let div1 = document.createElement('div') div.style.width = '76px' div.style.height = '41px' div1.style.width = '76px' div1.style.height = '40px' div1.style.overflow = 'hidden' div.style.boxSizing = 'border-box' div.style.backgroundImage = imageArr[0] let positionX = -(i % 10) * 76 + 'px' let positionY = -Math.floor(i / 10) * 40 + 'px' div.style.backgroundPosition = positionX + ' ' + positionY div.style.backgroundSize = '760px 400px' let style = document.styleSheets[0] style.insertRule(`@keyframes secondrotate${i} { 0%,30%{ transform:scale(1) } 70% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} 100% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} }`) style.insertRule(`@keyframes secondrotateS${i} { 0%,32%{ transform:scale(1);opacity:1; }70% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} 100% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} }`) div1.style.animation = `secondrotateS${i} 4.5s ease-out infinite` div.style.animation = `secondrotate${i} 4.5s ease-out infinite` div.style.transformOrigin = `center center` div.addEventListener('animationstart', () =>

{timer1.value = setTimeout (() = > {changeImage (InBox) div.style.backgroundImage = imageArr [count]}, 4000)}) div.addEventListener ('animationiteration', () = > {timer2.value = setTimeout (() = > {changeImage (InBox) div.style.backgroundImage = imageArr [count]}) 4000)}) div1.appendChild (div) dom.appendChild (div1)}} appendDom (breakBox)}) onUnmounted (() = > {typeof timer1 = = 'number' & & clearTimeout (timer1) typeof timer2 =' number' & & clearTimeout (timer2)}) @ import url ('.. /.. / css/comment/animate.css') # animateBox {width: 100vW; height: calc (100vh-50px); / / background-color: rgba (255,255,255,0.6); # break {position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 760px; height: 400px; display: flex; perspective: 1000px; transform-style: preserve-3d; flex-wrap: wrap; z-index: 100 } # InBox {position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 760px; height: 400px; display: flex; perspective: 1000px; transform-style: preserve-3d; flex-wrap: wrap; z-index: 10; background-size: 760px 400px }} at this point, the study on "how to achieve the effect of scattered pictures based on Vue3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.