screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <div v-bind:style="{ backgroundColor: currentColor, transition: 'background-color 1s ease-in-out' }" style="height: 100000px;"> Vue random color from an array on scroll </div> </div> <script type="module"> const app = Vue.createApp({ data() { return { currentColor: null, colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff'] } }, mounted() { window.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { const randomIndex = Math.floor(Math.random() * this.colors.length); this.currentColor = this.colors[randomIndex]; } } }); app.mount('#app'); </script> </body> </html>