SCSS only: Particle Triangles

Mock up showing what our static content can feel like with subtle moving background.

by Allen N.

HTML

<img src="https://i.postimg.cc/Z5f2B2sD/3-pillars.png" alt="Screenshot of Content">
<div class="particles">
  <div class="wrap">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

SCSS

html, body {
  height: 100%;
}
body {
  min-height: 100%;
  overflow: hidden;
}
img {
  position: absolute;
  left: 50%;
  top: 50%;
	width: 80vw;
  transform: translate(-50%, -50%);
}

@keyframes move {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(random(360)+deg) translate3d(((random(1000)) * 1px), ((random(1000) - 500) * 1px), ((random(2000) - 1000) * 1px));
    opacity: 0;
  }
}
.particles {
  position: relative;
  width: 100%;
  min-height: 100%;
  transform-style: preserve-3d;
	opacity: 0.1;
}
.wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  perspective: 600px;
}
.wrap > div {
  position: absolute;
  opacity: 0;
  animation: move 50s infinite;
	transition: all 333ms;
}
.wrap > div:hover {
	border-top-color: #FF4E00 !important;
}
.wrap > div:nth-child(2n) {
	//border-top-color: #FF4E00 !important;
	&:hover {
		//border-top-color: #0C499C !important;
	}
}

@for $i from 1 through 100 {
  .wrap > div:nth-child(#{$i}){
     $size: random(50)+px;
     $size2x: random(100)+px;
     height: 0;
     width: 0;
     border-left: $size solid transparent;
     border-right: $size solid transparent;
     border-top: $size solid #0C499C;
     animation-delay: -$i * 1s;
     opacity: 0;
     // opacity: (100 - $i) * 0.01;
     transform: rotate(random(360)+deg) translate3d( ((random(1000) - 500) * 1px),  ((random(1000) - 500) * 1px), ((random(2000) - 1000) * -1px));
     // background: hsl( random(360) , 70%, 50%);
  }
 
}