EffectHub.com: your best source for gaming

Recommendation

More Effects...

var feelings = [].slice.call(document.querySelectorAll('li'));
var MIN_DURATION = 20000;
var classes = ['joy','sadness','anger','fear','disgust'];
var filters = ['f1','f2','f3','f4','f5'];
var opacities = ['o1','o2','o3','o4','o5'];

var method = css;
//if WAAPI is supported, use it otherwise do CSS
if (typeof document.documentElement.animate === 'function') {
  method = waapi;
}
feelings.forEach(method);

//Animate via WAAPI
function waapi(li) {
  var scale = Math.max(.15, Math.random());
  var y = Math.random() * 40; 
  li.classList.add(classes[Math.floor(Math.random() * classes.length)]);
  li.classList.add(filters[Math.floor(Math.random() * filters.length)]);
  li.classList.add(opacities[Math.floor(Math.random() * opacities.length)]);
  
  li.animate([
    {transform: 'translate(0, ' + y + 'vmin) scale(' + scale + ')'},
    {transform: 'translate(120vw, ' + y + 'vmin) scale(' + scale + ')'}
  ], {
    duration: MIN_DURATION + (Math.random() * 25000),
    easing: 'linear',
    delay: -82050,
    iterations: Infinity
  });
  li.children[0].animate([
    // {translate: '0px -' + (Math.random() * 10 + 6) + 'vmin'},
    // {translate: '0px ' + (Math.random() * 10 + 6) + 'vmin'}
    {transform: 'translate(0px, -' + (Math.random() * 10 + 6) + 'vmin)'},
    {transform: 'translate(0px, ' + (Math.random() * 10 + 6) + 'vmin)'}
  ], {
    duration: Math.random() * 30000 + 10000,
    delay: -82050,
    iterations: Infinity,
    direction: 'alternate',
    easing: 'ease-in-out'
  })
}

//Animate via CSS
function css(li) {
  var scale = Math.max(.15, Math.random());
  var y = Math.random() * 40; 
  li.classList.add(classes[Math.floor(Math.random() * classes.length)]);
  li.classList.add(filters[Math.floor(Math.random() * filters.length)]);
  li.classList.add(opacities[Math.floor(Math.random() * opacities.length)]);
  
  li.style.top = y + 'vmin';
  li.style.animationDelay = '-82050ms';
  li.style.animationDuration = (MIN_DURATION + (Math.random() * 25000)) + 'ms';
  li.style.animationName = 'moveIt';
  li.style.animationTimingFunction = 'linear';
  li.style.animationIterationCount = 'infinite';
  li.children[0].style.transform = 'scale(' + scale + ')';
}

CSS

body {
  height: 100vh;
  background: #061333;
  overflow: hidden;
}

ul {
  top: 20vh;
  height: 60vh;
  width: 100%;
  position: relative;
}
ul li {
  position: absolute;
  top: 0vh;
  left: -20vmin;
  color: #E6FF3B;
  mix-blend-mode: hard-light;
  will-change: transform;
}
ul li span {
  display: block;
  border-radius: 50%;
  background: currentColor;
  width: 20vmin;
  height: 20vmin;
  height: 20vmin;
}
ul li.sadness {
  color: #1BB3F6;
}
ul li.anger {
  color: red;
}
ul li.fear {
  color: #B728FE;
}
ul li.disgust {
  color: chartreuse;
}
ul li.f3 span {
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
ul li.f4 span {
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
ul li.f5 span {
  -webkit-filter: blur(7px);
          filter: blur(7px);
}
ul li.o3 span {
  opacity: 0.8;
}
ul li.o4 span {
  opacity: 0.8;
}
ul li.o5 span {
  opacity: 0.6;
}

@-webkit-keyframes moveIt {
  100% {
    -webkit-transform: translate(120vw);
            transform: translate(120vw);
  }
}

@keyframes moveIt {
  100% {
    -webkit-transform: translate(120vw);
            transform: translate(120vw);
  }
}

HTML

Recommendation

Join Effecthub.com