I want to put this raining pixels animation in my Vue app:
https://codepen.io/kme211/pen/pRzRpJ
I tried just copying the HTML, CSS and JS in their respective tags, thus template, style and script.
However, when I insert the JS in my IDE and refresh the page it turns blank.
How can I insert this animation in my Vue app? I need it as a background for my homepage.
<template>
<div class="bloks"></div>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta aliquet scelerisque. Donec accumsan magna vel felis volutpat dapibus. In eleifend molestie ipsum vitae fringilla. Fusce at euismod velit. Pellentesque ut lacus sed justo faucibus euismod vel id dui. Nulla ac dictum turpis. Fusce congue enim vel egestas sollicitudin. Etiam nec mi ultricies orci tincidunt pretium eu non urna.
</p>
</section>
<section>
<p>
Sed eget ligula congue, dignissim nibh rutrum, congue nisl. Curabitur vehicula malesuada nulla a fringilla. Nullam nisl felis, mollis ac pellentesque et, tempus at dolor. Etiam quis purus at neque faucibus elementum sed nec sem. Integer dapibus dolor sed egestas vehicula. Mauris fringilla eleifend iaculis. Suspendisse gravida urna ac interdum fringilla. Maecenas sagittis mollis imperdiet. Aenean venenatis metus tortor, ac consequat urna faucibus eget. Pellentesque at mi malesuada, ornare eros vel, iaculis libero. Cras lacinia, nisl in volutpat volutpat, magna magna sagittis urna, ut posuere ante ligula ac lorem. Praesent iaculis ipsum et dui fermentum, non eleifend neque faucibus. Vestibulum quis urna eget eros maximus gravida.
</p>
</section>
<section>
<p>
Ut commodo arcu eu leo consectetur faucibus. Donec egestas ligula id commodo vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mauris nulla, gravida id ex id, egestas eleifend sem. Phasellus sit amet scelerisque nunc. Aenean laoreet iaculis malesuada. Cras et volutpat augue, eget convallis turpis. Donec accumsan lobortis dapibus. Proin scelerisque, nulla id fringilla laoreet, felis justo sollicitudin odio, eget efficitur sem metus in libero.
</p>
</section>
</template>
<style>
:root {
--blokColor: #495664;
}
html {
box-sizing: border-box;
background: #333C4A;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
color: white;
height: 100%;
width: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
p {
padding: 2em;
max-width: 600px;
background: rgba(0, 0, 0, 0.4)
}
.bloks {
width: 100%;
height: 100%;
z-index: -5;
position: fixed;
overflow: hidden;
}
.blok {
height: 25px;
width: 25px;
background: #495664; // Fallback for browsers w/o CSS variable support
background: var(--blokColor);
position: absolute;
transition: background 1.5s;
}
@keyframes blok {
100% { top: 100vh; opacity: 0; }
}
</style>
<script>
const numberOfBloks = 9,
w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight,
bloksContainer = d.querySelector('.bloks'),
blokColors = ['#495664', '#379956', '#F70C9B'], // Color for each section
sections = Array.from(document.querySelectorAll('section'));
function injectCssAndMarkup() {
const head = d.head || d.getElementsByTagName('head')[0],
style = d.createElement('style'),
leftValues = getLeftValues(numberOfBloks, x),
topValues = getRandomValues(numberOfBloks, 200),
delayValues = getRandomValues(numberOfBloks, 15);
style.type = 'text/css';
const css = getBlokCSS(numberOfBloks, y, leftValues, topValues, delayValues);
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
bloksContainer.innerHTML = getBlokMarkup(numberOfBloks);
}
function getBlokMarkup(blokNum) {
let bloks = [];
for(let i = 0; i < numberOfBloks; i++) {
bloks.push(`<div class="blok blok${i+1}"></div>`);
}
return bloks.join('n');
}
function getRandomValues(blokNum, maxVal) {
let values = [];
for(let i = 0; i < blokNum; i++) {
values.push(Math.floor((maxVal / blokNum) * (i)));
}
return values.sort(function() { return 0.5 - Math.random() });
}
function getLeftValues(blokNum, screenWidth) {
let values = [];
for(let i = 0; i < blokNum; i++) {
values.push(Math.floor((screenWidth / blokNum) * (i + 0.5)));
}
return values;
}
function getBlokCSS(blokNum, screenHeight, left, top, delay) {
let css = [];
for(let i = 0; i < blokNum; i++) {
let duration = (screenHeight - (-top[i]))/50;
css.push(`
.blok${i+1} {
left: ${left[i]}px;
top: -${top[i]}px;
animation-delay: ${delay[i]}s;
animation: blok ${duration}s infinite;
animation-timing-function: linear;
}
`);
}
return css.join('n');
}
// https://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var handleScroll = debounce(function() {
console.log(`scrollTop: ${document.body.scrollTop}`)
const scrollTop = document.body.scrollTop;
sections.forEach((section, i) => {
console.log(`section ${i} | offsetTop: ${section.offsetTop}`)
if(scrollTop >= (section.offsetTop-100)) {
document.documentElement.style.setProperty('--blokColor', blokColors[i]);
}
})
}, 250);
document.addEventListener('scroll', handleScroll);
injectCssAndMarkup();
</script>
