Animated Fireworks Logo

animated-fireworks-logo.markdown

Animated Fireworks Logo

Animated logo for a project I'm working on. Uses multiple DOM elements so that I can apply an inner box shadow to get a slight highlight on the top edges of each piece. The entire logo is rotated along the x and y axes and the body has perspective to give the entire experience depth.

To achieve a smooth gradient through all pieces, each element has the same radial gradient with a unique background-position applied. Opening and closing the logo spins the outer rings in and out of the center.

A Pen by John Gill on CodePen.

License.

index.html

<div class="Logo Closed" id="Logo">
	
	<div class="Arms">
		
		<div class="Arm">
			<div class="Circle _25"></div>
			<div class="Circle _50"></div>
		</div>
		
		<div class="Arm">
			<div class="Circle _25"></div>
			<div class="Circle _50"></div>
		</div>
		
		<div class="Arm">
			<div class="Circle _25"></div>
			<div class="Circle _50"></div>
		</div>
		
		<div class="Arm">
			<div class="Circle _25"></div>
			<div class="Circle _50"></div>
		</div>
		
		<div class="Arm">
			<div class="Circle _25"></div>
			<div class="Circle _50"></div>
		</div>
		
		<div class="Arm">
			<div class="Circle _25"></div>
			<div class="Circle _50"></div>
		</div>
		
		<div class="Arm">
			<div class="Circle _25"></div>
			<div class="Circle _50"></div>
		</div>
		
		<div class="Arm">
			<div class="Circle _25"></div>
			<div class="Circle _50"></div>
		</div>
		
	</div>
	
	<div class="Circle _100"></div>
	
</div>

script.js

var body = document.querySelector("body");
var logo = document.querySelector("#Logo");

setTimeout(function(){logo.classList.toggle("Closed");}, 500);
var toggleInterval = setInterval(function(){logo.classList.toggle("Closed");}, 1500);

logo.addEventListener("click", function(){clearInterval(toggleInterval);});

// Ensure :active states are triggered by touches
body.addEventListener("touchstart", function(){});

style.css

* {
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

html,
body {
	position: absolute;
	
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	
	box-sizing: border-box;

	width: 100%;
	height: 100%;
	
	margin: 0px auto;
	padding: 0px;
}

body {
	padding-left: 15px;
	padding-bottom: 10px;
	
	background-color: #333333;
	
	-webkit-perspective: 300;
}

.Logo {
	position: relative;
	
	margin: 0px auto;
	
	width: 200px;
	height: 200px;
	
	-webkit-transform: rotateY(45deg) rotateX(15deg);
	
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 0.25s;
	-webkit-transition-timing-function: cubic-bezier(0, 0, .5, 1);
}

.Logo:active,
.Logo.Closed {
	-webkit-transform: rotateY(45deg) rotateX(15deg) rotateZ(-135deg);
	
	-webkit-transition-duration: 0.25s;
	-webkit-transition-timing-function: ease-in;
}

.Arms {
	position: absolute;
	
	left: 50%;
	top: 50%;
	
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 0.25s;
	-webkit-transition-timing-function: cubic-bezier(0, 0, .5, 1.25);
	
	-webkit-transform: scale3d(1,1,1);
}

.Logo:active .Arms,
.Logo.Closed .Arms {
	-webkit-transform: scale3d(0.25,0.25,1);
	
	-webkit-transition-timing-function: ease-in;
}

.Arm {
	position: absolute;
	
	left: 50%;
	top: 50%;
}

.Arm:nth-child(1) {
	-webkit-transform: rotateZ(0deg);
}

.Arm:nth-child(2) {
	-webkit-transform: rotateZ(45deg);
}

.Arm:nth-child(3) {
	-webkit-transform: rotateZ(90deg);
}

.Arm:nth-child(4) {
	-webkit-transform: rotateZ(135deg);
}

.Arm:nth-child(5) {
	-webkit-transform: rotateZ(180deg);
}

.Arm:nth-child(6) {
	-webkit-transform: rotateZ(225deg);
}

.Arm:nth-child(7) {
	-webkit-transform: rotateZ(270deg);
}

.Arm:nth-child(8) {
	-webkit-transform: rotateZ(315deg);
}

.Circle {
	position: absolute;
	
	left: 0px;
	top: 0px;
	
	background-image: -webkit-radial-gradient(center, circle cover, #FFAA00 10%,#FF2200 60%);
	background-size: 200px 200px;
	
	box-shadow: inset 0px 1px 1px rgba(255,255,255,0.25), 0px 1px 3px rgba(0,0,0,0.5);
}

.Circle._100 {
	margin-left: -30px;
	margin-top: -30px;
	
	left: 50%;
	top: 50%;
	
	width: 60px;
	height: 60px;
	
	border-radius: 30px;
	
	background-position: 50% 75%;
	
	-webkit-transform: rotateZ(0deg);
	
	-webkit-transition-duration: 0.25s;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-timing-function: cubic-bezier(0, 0, .5, 1);
}

.Circle._50 {
	margin-left: -15px;
	margin-top: -15px;
	
	top: -55px;
	
	width: 30px;
	height: 30px;
	
	border-radius: 15px;
}

.Circle._25 {
	margin-left: -7.5px;
	margin-top: -10px;
	
	top: -85px;
	
	width: 15px;
	height: 15px;
	
	border-radius: 8px;
}

.Logo:active .Circle._100,
.Logo.Closed .Circle._100 {
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 0.25s;
	
	-webkit-transform: rotateZ(135deg);
}

.Arm:nth-child(1) .Circle {
	-webkit-transform: rotateZ(0deg);
}

.Arm:nth-child(2) .Circle {
	-webkit-transform: rotateZ(-45deg);
}

.Arm:nth-child(3) .Circle {
	-webkit-transform: rotateZ(-90deg);
}

.Arm:nth-child(4) .Circle {
	-webkit-transform: rotateZ(-135deg);
}

.Arm:nth-child(5) .Circle {
	-webkit-transform: rotateZ(-180deg);
}

.Arm:nth-child(6) .Circle {
	-webkit-transform: rotateZ(-225deg);
}

.Arm:nth-child(7) .Circle {
	-webkit-transform: rotateZ(-270deg);
}

.Arm:nth-child(8) .Circle {
	-webkit-transform: rotateZ(-315deg);
}

.Arm:nth-child(1) .Circle._50 {
	background-position: 50% 60%;
}

.Arm:nth-child(1) .Circle._25 {
	background-position: 50% 50%;
}

.Arm:nth-child(2) .Circle._50,
.Arm:nth-child(8) .Circle._50 {
	background-position: 50% 65%;
}

.Arm:nth-child(2) .Circle._25,
.Arm:nth-child(8) .Circle._25 {
	background-position: 50% 60%;
}

.Arm:nth-child(3) .Circle._50,
.Arm:nth-child(7) .Circle._50 {
	background-position: 50% 75%;
}

.Arm:nth-child(3) .Circle._25,
.Arm:nth-child(7) .Circle._25 {
	background-position: 50% 75%;
}

.Arm:nth-child(4) .Circle._50,
.Arm:nth-child(6) .Circle._50 {
	background-position: 50% 85%;
}

.Arm:nth-child(4) .Circle._25,
.Arm:nth-child(6) .Circle._25 {
	background-position: 50% 90%;
}

.Arm:nth-child(5) .Circle._50 {
	background-position: 50% 90%;
}

.Arm:nth-child(5) .Circle._25 {
	background-position: 50% 100%;
}