div.container
div
View Compiled
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.container {
width: 100vw;
position: relative;
}
.container div {
transition: all 1s ease-in;
text-shadow: 3px 3px 7px #5752FF;
font-size: 20rem;
position: absolute;
}
.container div::after {
content: '(';
}
const setRAFInterval = (cb, interval) => {
let now = Date.now;
let startTime = now();
let endTime = startTime;
let loop = () => {
this.intervalTimer = requestAnimationFrame(loop);
endTime = now();
if (endTime - startTime >= interval) {
startTime = now();
endTime = startTime;
cb();
}
}
this.intervalTimer = requestAnimationFrame(loop);
return this.intervalTimer;
};
const getRandomNum = (max) => Math.floor(Math.random() * Math.floor(max));
const randomColor = () => {
const color = Math.floor(Math.random()*16777215).toString(16);
return color.length !== 6 ? `f${color}` : color;
};
const root = document.documentElement;
const container = document.querySelector('.container');
const fragment = document.createDocumentFragment();
for(let i = 0; i < 20; i++) {
let div = document.createElement('div');
fragment.appendChild(div);
}
container.append(fragment);
const divs = document.querySelectorAll('.container > div');
divs.forEach(div => {
div.style.setProperty('left', `${getRandomNum(50)}%`);
div.style.setProperty('right', `${getRandomNum(50)}%`);
div.style.setProperty('font-size', `${getRandomNum(20)}rem`);
div.style.setProperty('text-shadow', `${getRandomNum(20)}px ${getRandomNum(20)}px ${getRandomNum(20)}px #${randomColor()}`);
div.style.setProperty('transform', `rotate(${getRandomNum(360)}deg)`);
});
setRAFInterval(() => {
divs.forEach(div => {
div.style.setProperty('left', `${getRandomNum(39)}%`);
div.style.setProperty('right', `${getRandomNum(50)}%`);
div.style.setProperty('font-size', `${getRandomNum(20)}rem`);
div.style.setProperty('text-shadow', `${getRandomNum(20)}px ${getRandomNum(20)}px ${getRandomNum(20)}px #${randomColor()}`);
const sign = getRandomNum(2) === 1 ? '+' : '-';
div.style.setProperty('transform', `rotate(${sign}${getRandomNum(360)}deg)`);
div.style.setProperty('filter', `
blur(${getRandomNum(5)}px) brightness(${getRandomNum(120)}%) hue-rotate(${getRandomNum(40)}deg)`)
});
}, 3000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.