JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<p>Refresh to randomize starting location.</p>

<footer>
</footer>

<footer class="with-glow">
</footer>

<footer class="with-glow fast">
</footer>

SCSS

body {
	background: #F3F3F4;
	font-family: Source Sans Pro, sans-serif;
	color: #444;
	margin: 0;
}

p {
	margin: 30px;
}

footer {
    height: 150px;
    position: relative;
    font-family: Helvetica;
    font-weight: 600;
    overflow: hidden;
    margin-bottom: 30vh;
		background: #fff url(https://scottkaye.blob.core.windows.net/files/motusbank.png) no-repeat;
		background-position: 60px;
		background-size: 150px;
		
    .content {
        position: relative;
        z-index: 1;
    }
		
    &.with-glow::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
				width: 400px;
        content: "";
        z-index: 1;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75));
    }
		
    &::after {
        $width: 1797px;
        $height: 1807px;
				
        position: absolute;
        top: $height / 2 * -0.75;
        right: -$width / 2;
        width: $width;
        height: $height;
        content: "";
        background-image: url('https://scottkaye.blob.core.windows.net/files/spiral.png');
        animation: spin 120s linear infinite;
        // Off-center?
        //transform-origin: ($width / 2 - 30) ($height / 2 - 30);
    }
		
		&.fast::after {
			animation-duration: 10s;
		}
		
		&:last-of-type {
			margin-bottom: 0;
		}
}

@keyframes spin {
    0% {
        transform: rotateZ(0) scale(0.5);
    }
    100% {
        transform: rotateZ(360deg) scale(0.5);
    }
}

JavaScript

// http://mcgivery.com/htmlelement-pseudostyle-settingmodifying-before-and-after-in-javascript/
var UID={_current:0,getNew:function(){this._current++;return this._current}};HTMLElement.prototype.pseudoStyle=function(c,d,e){var f=document.head||document.getElementsByTagName("head")[0],a=document.getElementById("psC")||document.createElement("style");a.id="psC";var b="ps"+UID.getNew();this.className+=" "+b;a.innerHTML+=" ."+b+":"+c+"{"+d+":"+e+"}";f.appendChild(a);return this};

// Random starting position
let maxTime = 120;
[...document.querySelectorAll("footer")]
	.forEach(footer => {
		let rand = Math.random();
		let cls = "footer-" + (rand * 1000 | 0);
		let start = rand * -maxTime;
		footer.classList.add(cls);
		footer.pseudoStyle("after", "animation-delay", start + "s");
	});